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

Question

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

例如，我在style.css中添加了这样的代码：

.box{height: 600px;}

然后我在enhanced.css中放了一个css代码，这样当它在较小的屏幕上时，它的高度会降低。

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

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

感谢。

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; } 规则的特异性 - 例如

{{1}}