视口媒体查询适用于桌面，但不适用于移动设备

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 结构中的相等规则，因此，如果有的话，您的媒体查询应该是独占的（每个相关规则仅出现在查询 {...} 块中。 p>

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

@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 页面顶部的视口元标记。使用 chrome 开发人员工具查看为页面加载了哪些 CSS 规则，并使用它来确定媒体查询是否返回 true，然后您可以找出原因并更精确地定义它们。