CSS，对类的@media感到困惑

Question

我正在努力将我的第一次参与使用“响应式”css，我正在使用这个新的@media .......事情......我在理解方面遇到了很大麻烦一些。我已经在多个网站上阅读了它以形成我的代码，但它并没有按照我的预期去做，所以我变得更加沮丧。

我基本上在文本中有一个位置，在正常情况下，我希望它是font-size: 64px;，但如果屏幕变得非常小（480px），我希望它缩小到喜欢24px;。我添加了一些其他荒谬的属性，以确保我实际上得到了不同的结果，但我仍然很困惑。

所以这是我的方法......

@media (min-width: 480px) {
    .name {
        color: green;
        font-family: "Comic Sans MS";
        font-size: 24px;
      }
}

.name {
   font-size: 64px;
}


<span class="name">This is a really long name</span>

所以我预计，当它运行时，它将具有正常的.name类，如果分辨率下降到480px或更薄，它将转到另一个。这完全错了吗？因为这不是我发生的事情。

Answer 1

媒体查询中的.name选择器与媒体查询后的.name选择器具有相同的specificity。因此，后面的.name选择器优先。

只需更改订单即可解决问题：

.name {
   font-size: 64px;
}

@media (min-width: 480px) {
    .name {
        color: green;
        font-family: "Comic Sans MS";
        font-size: 24px;
      }
}

如果您希望媒体查询中的样式在屏幕480px或更薄时生效，则应使用max-width媒体查询：

.name {
   font-size: 64px;
}

@media (max-width: 480px) {
    .name {
        color: green;
        font-family: "Comic Sans MS";
        font-size: 24px;
      }
}