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

对于intance：

，宽度尺寸也不重叠

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

Answer 2

尝试自定义媒体查询。

id="basiccbox"

媒体类型（tty，电视，投影，屏幕，手持设备，盲文，浮雕，听觉）已在Node Inspector中弃用，不应使用。

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

2 个答案: