在两种媒体查询情况下都使用 css 'important'

Question

我正在创建一个我遇到错误的移动应用程序。

这里我的核心风格是用于桌面的：

.abc{
     width:1001px;
}
@media only screen and (max-width : 320px) {
.abc{
     width:320px!important;
}
}
@media only screen and (max-width : 480px) {
.abc{
     width:480px!important;
}
}

在这里，从上面的样式中，480px的样式同时适用于320px和480px。

是否有其他建议解决此问题。

Answer 1

这是因为max-width:480px;仍然针对320px。将最后一个更改为：

@media only screen and (min-width: 321px)  and (max-width: 480px) {
    .abc {
        width: 480px !important;
    }
}

这将阻止该查询影响321px以下的任何内容。

看起来您不需要!important此修复程序与此问题无关，因此我会删除，如果我是您，它可能会在将来弄乱

另一种解决方案是将320px查询移动下方480px。它们都具有相同的特异性，因此级联中最后一个的特异性将优先。

Answer 2

设置最小宽度

.abc {
    width: 1001px;
}
@media only screen and (max-width: 320px) {
    .abc {
        width: 320px;
    }
}
/* set a min-width here, so these rules don't apply for screens smaller than 321px */
@media only screen and (min-width: 321px) and (max-width: 480px) {
    .abc{
        width: 480px;
    }
}

如果我是对的，您也应该能够删除!important语法...