Question

当我为某个检测类型设置我的样式时，不是在指定的媒体检测宽度上使用该媒体样式，而是将其用作父值，我不明白它为什么这样做。

没有应用所述风格的小提琴：http://jsfiddle.net/T6Sk4/正常工作

将其应用于特定宽度：http://jsfiddle.net/T6Sk4/1/嗯..

@media (min-width: 320px) {
    #contain {
        width:300px;
    }
    .box {
        display:none;
    }
}
@media (min-width: 480px) {
    #contain {
        width:460px;
    }
}
@media (min-width: 600px) {
    #contain {
        width:580px;
    }
}
@media (min-width: 760px) {
    #contain {
        width:740px;
    }
}
@media (min-width: 900px) {
    #contain {
        width:880px;
    }
}
@media (min-width: 1038px) {
    #contain {
        width:980px;
    }
}

Answer 1

确定。使用以下代码更改480px的代码。它在没有320px屏幕的所有屏幕中都能正常工作。我测试过了。所以试试这个让我知道：

@media only screen and (min-width: 480px) {
 #contain {
    width:460px;
 }
.box {
    display:block;
 }
}

此外，您应该像所有屏幕一样使用您的代码@media only screen and (min-width:480px){}。如果不明白检查我的代码。

Answer 2

最小宽度大于320px，因此每个媒体查询都会应用，因为每个匹配。

Answer 3

如果您想提高性能和可读性，请添加最大宽度值。目前，您的所有规则都在大屏幕上使用，经常覆盖相同的规则。第二个好处是：您确切知道适用的规则。

媒体查询不适用于指定的查询

3 个答案: