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

Question

如果我只能说一个1920 x 1080的屏幕，如何在不测试的情况下为更大的屏幕尺寸创建媒体查询？

Answer 1

您可以在Chrome中设置任何分辨率。只需点击＆＃34;切换设备模式＆＃34;在Inspector中设置任何分辨率。

Answer 2

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

Answer 3

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

Answer 4

如果您使用的是Safari，则可以相对轻松地完成此操作。

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

以下是一些图片说明！

1. 转到 Safari 菜单（位于左上角）。
2. 在该菜单上点击偏好设置，这会打开一个弹出框。



1. 在弹出框中，单击高级选项卡。
2. 在该标签的最底部，您会看到一个复选框，其中显示菜单栏中的显示开发菜单，选中该复选框。



1. 现在在Safari中加载您的网站。
1. 当您的网站已加载时（例如我使用的是SO），请点击开发下拉菜单。
2. 点击进入响应式设计模式，现在将在比浏览器窗口小的窗口中显示您的网站。



1. 在该窗口中，单击最左侧的窗口。
2. 在那个较小的窗口的四周都有一些灰色的小条，如果你拖动它们就可以制作任何你想要的尺寸。
3. 作为旁注，当您拖动灰色条（如步骤9所示）时，您应该看到宽度和高度分辨率（像素）发生变化（请参见下面的屏幕截图），这非常有用（我全部使用它）时间），因为它会告诉你网站中断的确切分辨率（像素）。附：您可以使用此工具进入 ANY 屏幕分辨率 - 无论大小 - 这真的很酷！ （我做了2500 x 1500,100 x 100等）

希望这能帮到你！