视口媒体查询可以在桌面上使用，但不能在移动设备上使用

Question

我正在尝试css的响应式设计功能。当我将最大宽度设置为370px并将容器设置为该宽度时，即使屏幕宽度较小，它也应该保持这种方式。当在谷歌Chrome中使用开发工具时，当我设置为从桌面查看时，它非常有效，但当我将其设置为从手机查看时，却没有。我添加了<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将覆盖中的相等规则。最新保留结构，因此，如果有任何问题，您的媒体查询应该是独占的（每个相关规则只出现在查询{...}块中。

宽度大小也不重叠，例如：

@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，然后您可以找出原因并更准确地定义它们。