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)时调整大小的镀铬窗口（两者宽度相同）媒体查询在这里（在检查器上）不起作用，但在调整窗口大小时确实有效 [！[在此处输入图像说明] [1]] [1]

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

[！[在此处输入图像说明] [2]] [2]

Answer 1

我知道我回答晚了，但希望这可以帮助遇到类似问题的其他人。我主要是回应你的第一点：

<块引用>

我制作了一个响应式网页，在手动调整窗口大小时看起来非常棒，但在使用嵌入在 chrome 中的响应式工具时看起来不太好。所以我决定根据它在 Google Chrome 响应工具上的样子进行设计，但是现在当我手动调整窗口大小时它看起来很糟糕。我应该相信哪一个？！我怎么知道它在移动设备上会是什么样子？

就像 Relisora 所说的，绝对相信响应式工具而不是手动调整窗口大小！

但手动调整大小与开发者工具不同仍然令人沮丧。

要确保页面在响应式工具和手动调整大小上看起来相同/相似，请尝试使用视口元标记！

在你的 html head 中加入这样的内容：

<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0">

来自Mozilla的进一步解释

Answer 2

我非常重视开发工具中的chrome响应工具。

但有时调整大小或响应工具都不起作用（在响应设置中使用它时）。

从未让我失败的唯一工具是将设备模拟到响应式工具中时：

访问它：F12 - ＆gt;设置 - ＆gt;设备

列表非常完整但不是一般情况下你可以测试一切。对于大多数设备来说，它仍然应该足够了。

修改：

如果您要测试的设备不在列表中，您可以通过单击“添加自定义设备”添加它，并确保完成所有元素：

EDIT2：

检查员正在工作，而简单地调整大小并不是因为在使用简单的大小调整时你没有考虑变量：分辨率。当您选择设备时，检查器会知道此变量，这就是渲染与使用实际设备完全相同的原因。检查员将显示将在移动设备上呈现的内容。