媒体查询对更宽的查询进行最低查询

Question

我的媒体查询遇到了问题，仅在移动宽度设备上，当屏幕为 414 像素和（最大-width: 375px) 当屏幕为 375px 时。我没有在 320px 上设置 !important。较大的媒体查询在 (max-width: 768px) 及以上工作。有其他人经历过这种行为吗？

我的查询在样式表中是从高到低的顺序，我需要将它们从低到高翻转吗？

@media (max-width: 768px) 

@media (max-width: 414px)

@media (max-width: 375px)

@media (max-width: 320px)

Answer 1

我开始制作一个测试用例（如下）并意识到它可能就像与browser's interpretation of the viewport 发生冲突一样简单。

#foo {
  margin: 10px;
  padding: 10px;
  background-color: #ff0;
}

#foo:after {
  content: "Default CSS";
}

@media (max-width: 768px) {
  #foo {
    background-color: #f0f;
  }
  #foo:after {
    content: "Max Width 768";
  }
}

@media (max-width: 414px) {
  #foo {
    background-color: #00f;
  }
  #foo:after {
    content: "Max Width 414";
  }
}

@media (max-width: 375px) {
  #foo {
    background-color: #0f0;
  }
  #foo:after {
    content: "Max Width 375";
  }
}

@media (max-width: 320px) {
  #foo {
    background-color: #f00;
  }
  #foo:after {
    content: "Max Width 320";
  }
}

<div id="foo"></div>