Question

我在0-500px和501-1250px的css文件集中进行媒体查询，依此类推......

当我拥有＆＃34;模拟移动设备时，我的CSS断点在Chrome开发者工具的屏幕模拟器中运行良好。检查＆＃34;仿真＆＃34;标签。如果取消选中该项，或者在未打开开发工具的情况下在浏览器中查看它，则不会遵守断点。

断点在Firefox＆＃34;响应式设计模式＆＃34;但是当我关闭开发工具时，不会在常规浏览器中。

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

这是我的屏幕视频，展示了问题：

Answer 1

查看视频后，媒体查询就像是问题所在。您正在检查设备宽度，浏览器将其视为屏幕的全尺寸，而不是浏览器的宽度。

尝试这样写：

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

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