Chrome 开发工具支持媒体查询，但浏览器不支持

Question

我在 0-500px 和 501-1250px 等 css 文件中设置了媒体查询...

当我在“仿真”选项卡中选中“仿真移动”时，我的 CSS 断点在 Chrome 开发人员工具的屏幕仿真器中运行良好。如果未选中该选项，或者当我在没有打开开发工具的情况下在浏览器中查看它时，它不会遵守断点。

当我关闭开发工具时，断点在 Firefox 的“响应式设计模式”中也可以正常工作，但在常规浏览器中却不行。

我不确定如何最好地提出这个问题——是否可以让这些样式在常规浏览器中工作？

这是我的屏幕视频演示了这个问题：

https://youtu.be/_FBoDek0Ou0

Answer 1

看过您的视频后，媒体查询似乎是个问题。您正在检查设备宽度，浏览器将其视为屏幕的 FULL SIZE，而不是浏览器的宽度。

试着这样写：

@media all and (min-width: 1251px) and (max-width: 2600px) {
    */ code here /*
}

请注意，它只检查min-width 而不是min-device-width。

我建议您也阅读以下内容：https://css-tricks.com/css-media-queries/ 和 http://bradfrost.com/blog/post/7-habits-of-highly-effective-media-queries/，以更好地了解它们的工作原理。