在媒体查询案例中使用 css '重要'

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 以下。它们都具有相同的特异性，因此级联中最后一个将优先。