html - 在两种媒体查询案例中使用 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;仍然以 320 像素为目标。将最后一个更改为：

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

这将停止该查询影响低于 321 像素的任何内容。

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

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

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语法...