css - 视口(viewport)媒体查询适用于桌面，但不适用于移动设备

Question

我正在尝试 css 的响应式设计功能。当我设置最大宽度 370px并将我的容器设置为该宽度，即使屏幕宽度较小，它也应该保持这种状态。在谷歌浏览器中使用开发人员工具时，当我设置为从桌面查看时它可以完美运行，但当我设置为从手机查看时它不会。我添加了 <meta>标签和一切。这是怎么回事？

这些是规范:

@media screen and (max-width:370px) {
    #container {
        width:370px;
    }
}

Answer 1

最有可能的是您正在覆盖媒体查询中设置的值，稍后在您的 CSS 页面中，例如:

@media screen and (max-width:370px) {
     #container {
     width:370px;
    }
}
....
#container {
   width:90%;
}

CSS 将覆盖 latest-is-retained 结构中的相等规则，所以如果有的话，您的媒体查询应该是独占的(每个相关规则只出现在查询 {...} block 中。

宽度尺寸也不重叠，例如:

@media screen and (max-width:370px) {
     #container {
     width:370px;
    }
}
@media screen and (max-width:600px) {
     #container {
     width:600px;
    }
}

第二个查询将覆盖第一个查询，因为两者都返回 TRUE .
下面是如何编写语法的更好示例:

@media screen and (max-width:370px) {
     #container {
     width:370px;
    }
}
@media screen (min-width:371px) and (max-width:600px) {
     #container {
     width:600px;
    }
}

您还只需要一个位于 HTML 页面顶部的视口(viewport)元标记。使用 chrome 开发人员工具查看为页面加载了哪些 CSS 规则，并使用它来确定媒体查询是否返回 true，然后您可以找出原因并更精确地定义它们。