如何为比您拥有的大屏幕编写媒体查询？

Question

如果我仅限于说1920 x 1080的屏幕，如何在无法测试的情况下为更大的屏幕尺寸创建媒体查询？

Answer 1

您可以在Chrome中设置任何分辨率。只需在Inspector中点击“切换设备模式”并设置任何分辨率即可。

Answer 2

在Chrome开发者工具中，您可以使用use Device Mode来模拟任何分辨率，而不仅仅是移动断点。

Answer 3

如果您使用的是谷歌浏览器，您可以打开网络检查器Ctrl-Shift-I，然后使用Ctrl-Shift-M切换设备模式。它主要用于较小的设备，但您应该能够在屏幕顶部出现的菜单中选择“响应”，然后输入您希望的任何分辨率以及缩放级别，以便您可以查看它在你的屏幕上，尽管缩放。

Answer 4

如果您使用的是Safari，您可以相对容易地做到这一点。

如果你不使用Safari，你可能应该得到它，至少在网站测试。正如您在步骤6中看到的，Safari拥有许多非常有用的开发工具（即禁用JS，禁用CSS等）。

下面是一些说明与图片！

---

1. 转至Safari浏览器菜单（左上角）。
2. 在该菜单上点击首选项，这应该打开一个弹出框。

---

在弹出框，点击高级标签。

在该选项卡的最底部，您应该看到一个复选框，其中显示菜单栏中的显示显影菜单，然后选中该框。

---

现在加载你的网站在Safari。

---

当你的网站加载（在这个例子中我使用SO），单击开发下拉菜单。

点击进入响应式设计模式，现在将在比浏览器窗口更小的窗口中显示您的网站。

---

在该窗口中，点击窗口上的最左边看的东西上。

这个小窗口的四边都有小灰条，如果你拖动这些灰条，你可以随意调整大小。作为一个侧面说明，当你拖动灰色条（如步骤9所示）时，你应该看到宽度和高度分辨率（像素）的变化（见下面的屏幕截图），这是非常有用的（我全部使用它时间），因为它可以告诉你网站中断时的确切分辨率（像素）。附：你可以去任何屏幕分辨率 - 无论大小，你想用这个工具，这真的很酷！ （我已经做了2500×1500，100×100等）

---

希望这可以帮助你！