CSS响应：调整窗口大小与Chrome响应

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

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

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

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

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

}

在使用chrome responsive tool时，主体宽度将正确调整大小，但在调整chrome窗口大小时不会。如果我将其更改为

最小宽度：900px

，主体将在调整chrome窗口大小时正确调整大小，但不使用chrome响应工具

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

左边是Chrome提供的响应式检查器工具，右边是Chrome窗口在使用

@仅媒体屏幕和（最小设备宽度：900px）

媒体查询在此不起作用（在inspector上），但在调整窗口大小时起作用

这里也一样，但只使用

@媒体屏幕和（最小宽度：900px）

。inspector工具显示页面Ok，但只要我调整Chrome窗口的大小，查询就不会被触发

---

尝试将“仅屏幕”更改为“全部”，因为Chrome可以使用“手持”媒体进行iPhone仿真，并将“最小设备宽度”更改为“最小宽度”。

您的网页响应应以窗口大小而不是设备宽度为目标

---

将每个最小设备宽度和最大设备宽度分别更改为最小宽度和最大宽度。这应该能解决你的问题。在使用响应式设计模式和窗口大小调整进行缩放时，我也遇到了同样的问题。在CSS媒体查询中做了这个小改动后，问题就解决了。

您能提供一个您工作的实例吗？我不确定在调整窗口大小后，您将面临哪些困难。如果可能，您可以共享网站的实时链接吗？@Scott:Media query不需要刷新来应用CSS规则。@Sayed Rafeeq:不，我不能。正如你所看到的，这是一个本地版本。不，仍然有同样的问题（见屏幕截图）