Question

我对css有一般性问题：

我想添加媒体查询以适应不同的屏幕尺寸。但是，如果我不能在相应的屏幕尺寸上看到它，我怎么知道给出不同查询的值？有没有办法预览我的内容会是什么样子？

Answer 1

您可以通过点击网页右侧的谷歌浏览器检查工具，然后点击左上角的小手机图标，查看各种设备尺寸的网站。

Answer 2

大多数现代浏览器在其开发人员工具中都有设备模拟器。对于Chrome，您可以在此处找到文档：https://developers.google.com/web/tools/chrome-devtools/device-mode/

对于更多跨浏览器/设备测试，您可以使用：https://www.browserstack.com/screenshots

仍然没有什么可以设置一个设备实验室，在那里你可以对一些最流行的设备进行物理测试。

希望有所帮助，

Answer 3

您可以输入 Chrome （或 Opera的）开发工具并激活设备模式以模拟不同的屏幕。我喜欢使用响应模式，它允许您拖动和调整大小以检查不同大小的行为以及显示CSS断点的媒体查询标尺。

其他浏览器也有类似的工具，例如Firefox的'响应式设计模式'或Edge的'仿真'，两者都通过 Inspect Element 访问。< / p>

然而，这种模拟不能保证100％像设备一样。

Answer 4

您可以使用此类工具，以不同的设备尺寸和分辨率进行测试。

http://quirktools.com/screenfly/