给@media最小宽度或最大宽度的正确方法

Question

我想弄清楚是否应该有一个顺序(增加或减少)，而在css中给出@media。

我正在使用一些最小宽度的媒体，如果我按以下顺序书写，那么如果我按递增或递减顺序书写，会有什么不同?

@media only screen and (min-width: 1000px) {
}
@media only screen and (min-width: 1365px) {
}
@media only screen and (min-width: 1280px) {
}
@media only screen and (min-width: 900px) {
}
@media only screen and (min-width: 1150px) {
}

Answer 1

如果您使用min-width，那么从最小值开始。因为如果浏览器得到两个合适的CSS条件，它会选择后一个。例如:

@media only screen and (min-width: 1280px) {
}
@media only screen and (min-width: 900px) {
}

现在如果浏览器宽度大于1280，两个条件都适用。在这种情况下，它将选择第二个条件，即(min-width: 900px)。而必须选择(min-width: 1280px)

所以要记住它的顺序。

同样适用于max-width条件。同时给出了max-width从大到小的CSS条件。所以你得到了下面的-

for min-width

@media only screen and (min-width: 900px) {
}
@media only screen and (min-width: 1150px) {
}
@media only screen and (min-width: 1280px) {
}

for max-width

@media only screen and (max-width: 1280px) {
}
@media only screen and (max-width: 1150px) {
}
@media only screen and (max-width: 900px) {
}