Question

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

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

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

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

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

}

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

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

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

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

Answer 1

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

Answer 2

您应该针对Windows大小而不是设备宽度来定位Web页面响应。

将每个最小设备宽度和最大设备宽度分别更改为最小宽度和最大宽度。这应该可以解决您的问题。使用响应式设计模式和窗口大小调整进行缩放时，我遇到了同样的问题。它在CSS Media Query中进行了这么小的改动后得到了解决。