CSS @media 仅屏幕查询在 360 像素下不起作用

Question

我正在尝试使用 CSS 来设置移动响应网页的样式。当我将 chrome 调整为 360px 时，样式显示其检测到 432px。当chrome缩小为320px时，li里面的内容，div为空

<meta name="viewport" content="width=device-width,initial-scale=1" />

添加到网页的页眉部分

  //media query for mobile responsiveness
  @media only screen and (max-width: 320px) {
    .header {
      min-width: 100%;
      margin: 0px;
      text-align: left;
      font-size: 10px;
      font-weight: bold;
      display: flex;
      flex-direction: row;
      // border: 1px solid red;
    }
    .container li div {
      padding: 5px 75px;
      margin: 0px;
      text-align: center;

      //border: 1px solid blue;
    }
  }

//代码继续不同的断点

  @media only screen and (max-width: 432px) {
    .header {
      min-width: 100%;
      margin: 0px;
      text-align: left;
      font-size: 10px;
      font-weight: bold;
      display: flex;
      flex-direction: row;
    }
    .container li div {
      padding: 5px 25px;
      margin: 3px;
      text-align: center;
      width: 90%;
      height: 100%;
      font-size: 16px;
      //border: 1px solid blue;
    }
  }

表示 360 像素的 GIF 被检测为 432 像素

Answer 1

CSS max-width: 432px 将影响小于或等于 432px 的任何屏幕尺寸。屏幕尺寸 360px 小于 432px，因此将应用此规则。

CSS 是级联因此最新的规则将覆盖任何较早的规则。

如果这是最后一个 CSS 那么它将覆盖之前设置的任何值 - 例如 - @media only screen and (max-width: 320px){ ...}

解决这个问题的方法是按顺序设置你的CSS，使最大的CSS在顶部，最小的宽度设置在底部：

@media only screen and (max-width: 720px) {
 ...
}
@media only screen and (max-width: 640px) {
 ...
}
@media only screen and (max-width: 480px) {
 ...
}
@media only screen and (max-width: 360px) {
 ...
}

如果您决定使用 min-width 而不是 max-width，那么显然会颠倒这些媒体样式的顺序。重点是 CSS 将应用符合标准的所有样式，而 最后一个是最合适的样式！。所以最后一个应该是最后一个正确的；在这种情况下

CSS @media 仅屏幕查询在 360 像素下不起作用

CSS @media only screen query not working under 360px

css

media-queries

spfx