css - 我应该将默认声明与媒体查询样式表放在同一样式表上吗？

Question

我将默认声明放入 style.css 中，然后将所有媒体查询放入名为 enhanced.css 的不同样式表中。

例如，我在 style.css 中放置了如下代码:

.box{高度:600px;}

然后我在 enhanced.css 中放置了一段 css 代码，这样当它在较小的屏幕上时，框的高度就会减小。

@media 仅屏幕和(最小宽度:320px)和(最大宽度:480px){ .box{高度:300px;} }

但不幸的是它在小屏幕上不起作用。它始终遵循 style.css 中的样式。我的问题是，我可以做上面那样的事情吗？要将默认声明放在不同的样式表上，还是应该将默认声明与媒体查询样式表放在同一样式表上？

谢谢。

Answer 1

问题是你的选择器是相等的 specificity (@media 规则没有任何特殊性) - 两条规则都使用一个类选择器 (.box)，并且因为您正在加载 .style.css 在 enhanced.css 之后，前者优先。如果您想将 @media 规则包含在常规 .box 规则之前，则需要提高该规则的特异性 - 例如

@media only screen and (min-width: 320px) and (max-width: 480px) {
    body .box {
        height: 300px;
    }