Question

我正在使用css媒体查询来制作一个响应的网页（目前尚未发布）。但是，在Chrome Inspector移动设备模式下，该网站没有响应。但是，如果我在物理上调整浏览器窗口的大小，它就会响应。

媒体查询的开头如下：

@media screen and (max-width: 767px) {}

Answer 1

将其放入您网页的<head>：

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

视口元标记简化了pretty dicy的某些内容，指导浏览器以某种方式运行，而不是浏览器尝试估计显示页面的正确方式。正如您所发现的那样，拥有CSS断点可能还不够 - 对于某些设计和浏览器来说，它会很好，但它取决于浏览器。

width=device-width使用听起来像的自定义值（device-width） - 将此视口的宽度设置为设备的宽度。 initial-scale表示将缩放设置为100％。所以，一起：让视口与设备一样宽，不要放大或缩小。