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

Question

我将默认声明放入style.css其中，然后将所有媒体查询放入名为enhanced.css.

例如，我把代码放在style.css这样的地方：

.box{height: 600px;}

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

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

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

谢谢。

Answer 1

问题是您的选择器具有相同的特异性（@media规则没有任何特异性） - 两个规则都使用一个类选择器（.box）并且因为您在前者优先.style.css之后加载。如果您想在常规规则之前包含规则，则enhanced.css需要增加规则的特异性- 例如@media.box

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