Chrome 开发工具支持媒体查询，但浏览器不支持
Chrome dev tools honors media queries, but browser doesn't
我在 css 文件中设置了 0-500px 和 501-1250px 等媒体查询...
当我在 "emulation" 选项卡中选中 "Emulate Mobile" 时，我的 CSS 断点在 Chrome 开发人员工具的屏幕模拟器中运行良好。如果未选中该选项，或者当我在没有打开开发工具的情况下在浏览器中查看它时，它不会接受断点。
断点在 Firefox 的 "Responsive Design Mode" 中也能正常工作，但当我关闭开发工具时，在常规浏览器中就不行了。
我不确定如何最好地提出这个问题 -- 是否可以让样式在常规浏览器中工作？
这是我的屏幕演示问题的视频：
看了你的视频后，媒体查询看起来像是问题所在。您正在检查设备宽度，浏览器将其视为屏幕的全尺寸，而不是浏览器的宽度。
试试这样写：
@media all and (min-width: 1251px) and (max-width: 2600px) {
*/ code here /*
}
注意它只检查 min-width 而不是 min-device-width。
我建议您也阅读以下内容：https://css-tricks.com/css-media-queries/ and http://bradfrost.com/blog/post/7-habits-of-highly-effective-media-queries/ 以更多地了解它们的工作原理。
我在 css 文件中设置了 0-500px 和 501-1250px 等媒体查询...
当我在 "emulation" 选项卡中选中 "Emulate Mobile" 时，我的 CSS 断点在 Chrome 开发人员工具的屏幕模拟器中运行良好。如果未选中该选项，或者当我在没有打开开发工具的情况下在浏览器中查看它时，它不会接受断点。
断点在 Firefox 的 "Responsive Design Mode" 中也能正常工作，但当我关闭开发工具时，在常规浏览器中就不行了。
我不确定如何最好地提出这个问题 -- 是否可以让样式在常规浏览器中工作？
这是我的屏幕演示问题的视频：
看了你的视频后，媒体查询看起来像是问题所在。您正在检查设备宽度，浏览器将其视为屏幕的全尺寸，而不是浏览器的宽度。
试试这样写：
@media all and (min-width: 1251px) and (max-width: 2600px) {
*/ code here /*
}
注意它只检查 min-width 而不是 min-device-width。
我建议您也阅读以下内容：https://css-tricks.com/css-media-queries/ and http://bradfrost.com/blog/post/7-habits-of-highly-effective-media-queries/ 以更多地了解它们的工作原理。