给出@media min-width或max-width的正确方法

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

如果您使用的是最小宽度，则从最小值开始。 因为如果浏览器获得两个适合的css条件，它会选择后一个。 例如在以下情况中 -

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

}

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

}

现在如果浏览器宽度超过1280，这两个条件都适合它。 在这种情况下，它将选择第二个条件，即（最小宽度：900px）。 而它必须选择（最小宽度：1280px）。

所以始终牢记其秩序。

同样适用于最大宽度条件。 还给出了具有递减顺序的最大宽度的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) {

}