html - 只有前两个媒体查询适用于 CSS。休息被忽略

Question

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

我有树媒体查询，但只有前两个有效。在手机上查看时，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 中，并将初始比例设置为 1。

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