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

【问题标题】：Only first two media queries works in CSS. Rest is being ignored只有前两个媒体查询在 CSS 中有效。休息被忽略
【发布时间】：2017-02-07 18:05:28
【问题描述】：

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

我有树媒体查询，但只有前两个有效。在手机上查看时，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;
  }
}

&lt;div&gt;Hello&lt;/div&gt;

【问题讨论】：

工作正常codepen.io/anon/pen/LxJEry
您也可以先定位移动设备，然后再从那里自定义。

标签： html css mobile media responsive

【解决方案1】：

将元标记添加到您的 html 中，初始比例设置为 1。

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

【讨论】：

【解决方案2】：

如果只是调整浏览器窗口的大小，代码在桌面上可以正常工作，但不能使用 chrome 来模拟屏幕大小 - 所以这可能是模拟器的问题。您必须将页面加载到移动设备上或尝试几个不同的模拟器才能确定。

【讨论】：