我想知道在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) {
}
答案 0 :(得分：3)
如果您使用的是最小宽度，请从最小值开始。因为如果浏览器获得两个适合的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) {
}