Question

我想使用媒体查询稍微修改我的CSS以用于不同的设备。理想情况下，我想创建一个类或规则的基线版本，然后将其覆盖仅部分，如下所示：

.myClass {
    font-family:Helvetica;
    color:#333333;
    font-size:20px;
}

@media screen and (min-width: 1000px) {
    .myClass {
        font-size:30px;
    }
}

我的问题是，对于与媒体查询匹配的屏幕，.myClass将完全替换基线（从而消除字体和颜色属性 - 值对），或者它将保留那些和只覆盖字体大小值？

它似乎有用，但我想知道这是否是预期的行为。谢谢！

Answer 1

它将保留这些值并仅覆盖font-size值。换句话说，当满足媒体查询时，其行为与：

相同

.myClass {
    font-family:Helvetica;
    color:#333333;
    font-size:20px;
}

.myClass {
    font-size:30px;
}

如果没有，第二条规则就会消失，只留下第一条规则。

这是预期的行为;除了仅在特定条件下应用所附规则外，@media规则不会以任何方式影响级联。

如果您只需要应用一个规则或另一个规则（即规则需要互斥），您有两种选择：

重置第二条规则中的font-family和color声明：

.myClass {
    font-family:Helvetica;
    color:#333333;
    font-size:20px;
}

@media screen and (min-width: 1000px) {
    .myClass {
        font-family:inherit;
        color:inherit;
        font-size:30px;
    }
}

将第一条规则包含在媒体查询的否定版本中：

@media not screen and (min-width: 1000px) {
    .myClass {
        font-family:Helvetica;
        color:#333333;
        font-size:20px;
    }
}

@media screen and (min-width: 1000px) {
    .myClass {
        font-size:30px;
    }
}

请参阅我对这些类似问题的回答，以获得更详细的说明：

是否可以通过@media查询部分覆盖规则？

1 个答案: