CSS responsive : 调整窗口大小 VS Chrome 响应式答案

【问题标题】：CSS responsive : Resizing windows VS Chrome responsiveCSS responsive : 调整窗口大小 VS Chrome 响应式
【发布时间】：2016-11-07 16:34:44
【问题描述】：

这是我的问题。这有点基本，但真的让我很生气。我制作了一个响应式网页，在手动调整窗口大小时看起来非常棒，但在使用嵌入在 chrome 中的响应式工具时看起来就不那么好了。所以我决定根据它在谷歌浏览器响应工具上的外观进行设计，但现在我手动调整窗口大小时看起来很糟糕。

我应该相信哪一个？！我怎么知道我在手机上的样子？

编辑：另外，我有这个基本规则

@media only screen and (min-device-width: 900px) {

   body {
      width: 60%;
      margin: 0 auto;
   }

}

在使用 chrome 响应工具时，body 宽度会正确调整大小，但在调整 chrome 窗口大小时不会。如果我将其更改为min-width : 900px，则正文将在调整 chrome 窗口大小时正确调整大小，但不能使用 chrome 响应工具！

编辑2：图片来解释我的意思

左侧是 Chrome 提供的响应式检查器工具，右侧是使用 @media only screen and (min-device-width: 900px) 时正在调整大小的 chrome 窗口（两者宽度相同）媒体查询在此处（在检查器上）不起作用，但在调整窗口大小时起作用

这里也一样，但使用@media only screen and (min-width: 900px)。检查器工具显示页面确定，但每当我调整 Chrome 窗口的大小时，查询都不会被触发！

【问题讨论】：

【解决方案1】：

您应该针对 Windows 大小而不是设备宽度来定位您的网页响应能力。

将每个 Min-device-width 和 max-device-width 分别更改为 min-width 和 max-width。这应该可以解决您的问题。在使用响应式设计模式和窗口调整大小进行缩放时，我遇到了同样的问题。在对 CSS 媒体查询进行了这个小改动后，它得到了解决。

【讨论】：

【解决方案2】：

尝试将“仅屏幕”更改为“全部”，因为 Chrome 可以使用“手持”媒体进行 iPhone 模拟并将“min-device-width”更改为“min-width”。

【讨论】：