Question

我的媒体查询遇到了问题，仅在移动宽度设备上，当屏幕位于414px时，最低查询（最大宽度：320px）被接管（最大宽度：414px） -width：375px）当屏幕为375px时。我没有在320px上设置！重要。较大的媒体查询工作在（最大宽度：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一样简单。

＆＃13;

#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";
  }
}

＆＃13;

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

＆＃13;

媒体查询以较宽的宽度对查询进行最低查询

1 个答案: