CSS 只有前两个媒体查询有效。休息被忽略

Question

我确信我的问题有一个非常简单的解决方案。

我有树媒体查询，但只有前两个有效。在 phone.

上查看时，800 像素的像素被忽略了

div {
  color: yellow;
  font-size: 50px;
}

@media (max-width: 1200px) {
  div {
    color: red;
  }
}

@media (max-width: 1000px) {
  div {
    color: green;
  }
}

@media (max-width: 800px) {
  div {
    color: purple;
  }
}

<div>Hello</div>

Answer 1

将元标记添加到您的 html 并将 initial-scale 设置为 1。

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

Answer 2

如果仅调整浏览器 window 的大小，代码在桌面上运行良好，但无法使用 chrome 模拟屏幕大小 - 因此这可能是模拟器的问题。您必须将页面加载到移动设备上或尝试几个不同的模拟器才能确定。

CSS 只有前两个媒体查询有效。休息被忽略

Only first two media queries works in CSS. Rest is being ignored

html

css

media

mobile

responsive