css - 响应能力 : Chrome inspector tool VS actual browser window

Question

我制作了一个响应式网页，在手动调整窗口大小时看起来非常好，但在使用 chrome 中嵌入的响应式工具时看起来不太好。所以我决定根据它在谷歌浏览器响应工具上的样子来设计，但现在当我手动调整窗口大小时它看起来很糟糕。

我应该相信哪一个？!我如何知道它在移动设备上的显示效果？

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

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

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

}

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

左边是 Chrome 提供的响应式检查器工具，右边是使用 @media only screen 和 (min-device-width: 900 像素)媒体查询在这里(在检查器上)不起作用，但在调整窗口大小时起作用

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

Answer 1

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

I've made a responsive web page that looks really great when resizing the window manually but doesn't look so great when using the responsive tool embedded in chrome. So I decided to design according to what it looks like on Google Chrome responsive tool, but now it looks awful when I resize the window manually.Which one should I trust ?! How do I know what It will look like on mobile?

正如 Relisora 所说，绝对相信响应式工具胜过手动调整窗口大小!

但令人沮丧的是，手动调整大小与开发人员工具不同。

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

把这样的东西放在你的 html 头中:

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

来自 Mozilla 的进一步解释