css媒体查询顺序问题

这是通过css-级联样式表的设计。

这意味着，如果应用两个与相同元素发生冲突的规则，它将选择最后一个声明的规则，除非第一个规则具有!important标记或更具体(例如：html > body相对于只是body，后者不那么具体)。

所以，考虑到这个CSS

@media (max-width: 600px) {
  body {
    background: red;
  }
}

@media (max-width: 400px) {
  body {
    background: blue;
  }
}

如果浏览器窗口宽为350像素，则背景将是蓝色的，而使用此css则是蓝色的。

@media (max-width: 400px) {
  body {
    background: blue;
  }
}

@media (max-width: 600px) {
  body {
    background: red;
  }
}

和相同的窗口宽度，背景将是红色的。这两条规则确实是匹配的，但第二条规则是应用的规则，因为这是最后一条规则。

最后，用

@media (max-width: 400px) {
  body {
    background: blue !important;
  }
}

@media (max-width: 600px) {
  body {
    background: red;
  }
}

或

@media (max-width: 400px) {
  html > body {
    background: blue;
  }
}

@media (max-width: 600px) {
  body {
    background: red;
  }
}

背景将是蓝色的(350像素宽的窗口)。

赞0 评论0 收藏0 分享

这是通过css-级联样式表的设计。 这意味着，如果应用两个与相同元素发生冲突的规则，它将选择最后一个声明的规则，除非第一个规则具有!important标记或更具体(例如：html > body相对于只是body，后者不那么具体)。 所以，考虑到这个CSS @media (max...

看加速得中二 学生 回答于24天前

或者，你只需将最小宽度添加到更大的媒体查询/IES中

@media (min-width: 400.1px) and (max-width: 600px) {
  body {
    background: red;
  }
}

@media (max-width: 400px) {
  body {
    background: blue;
  }
}

使用此代码，在任何顺序中，宽度为400.1px-600px的分辨率总是为红色，宽度为400 px或更小的分辨率总是为蓝色。