我应该使用哪个工具进行响应式 Web 开发：Chrome Web 开发人员工具或只是调整窗口大小？答案

【问题标题】：Which tool should I use for responsive web development: Chrome web developer tool or simply resize the window?我应该使用哪个工具进行响应式 Web 开发：Chrome Web 开发人员工具或只是调整窗口大小？
【发布时间】：2018-01-03 10:58:46
【问题描述】：

我一直在尝试为移动设备制作一个响应式网站。我找到了两种测试响应式设计的方法：

通过调整窗口大小
使用 Google Chrome 开发者工具

在他们两个中，我得到了不同的看法。哪一个给了我正确的看法，因为我在 'em' 中使用 font-size 和 padding。

【问题讨论】：

好吧，调整窗口大小并不一定会改变分辨率，它只会改变 body 容器或 div 等的宽度……这取决于您对它们进行响应式编码的方式。您不会像使用开发者工具模拟其他设备的实际分辨率/屏幕尺寸那样看到字体大小的变化。

标签： html css web responsive-design media-queries

【解决方案1】：

调整浏览器窗口大小不是响应式的。开发响应式应用程序最简单但并不完美的方法是使用 Chrome 的开发者工具。即使这样也可能会给您带来不同的结果，因为移动设备屏幕不仅使用宽度/高度，还使用 dpi。所以 320 iphone6s 屏幕不会完美匹配 320px 调整大小的浏览器或同等安卓设备。

【讨论】：

【解决方案2】：

使用 chrome 开发者工具。这是检查响应能力的好方法。它带有流行的移动和平板设备的尺寸。因此，您可以一次检查多种设备。
简单地调整浏览器的大小并不是检查响应能力的正确方法。
最近我建立了一个页面，可以很好地使用你提到的两种方式。您可以查看here。
如果您需要任何帮助，请告诉我。

【讨论】：

【解决方案3】：

我会说 Chrome 开发工具是本地快照的最佳选择。

但是，如果您可以访问一台或多台移动设备，您可能希望在 Heroku 或其他生产环境中启动该网站并从实际设备上查看。

以 iPhone 6 为例，我发现 Chrome 在 safari 中没有考虑地址栏或底部导航，因此与 iPhone 6 的 Chrome Dev 视图可能略有不同。

【讨论】：