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

在媒体查询案例中使用css“important”

2 个答案: