我最近在Firefox中看到了媒体查询的奇怪行为，我想知道谁做得对（与Chrome和IE9相比）。
我有以下css：
@media screen and (max-width:320px){
#sfWrapper{max-width:280px;font-size:0.625em;line-height:1.2em}
#cpw_banner{display:none;visibility:hidden;}
#cpw_content{width:100%;}#cpw_aside{width:100%;}
}
Firefox（在调整浏览器大小时，似乎没有注意到max：width 320px，而它会对更大的屏幕媒体查询作出反应。
不仅如此，但是当我在窗口上经常使用ctrl +时，它会启动，而Chrome和Internet Explorer 9不会在ctrl + / ctrl上应用新的媒体查询 -
任何人都知道ctrl + / ctrl-和媒体查询的“标准”行为是什么？
提前致谢... 学家
答案 0 :(得分：7)
我不知道为什么提供的答案已被勾选，因为它没有回答OP的问题。媒体查询未触发320像素的原因是Firefox中的导航工具栏。
如果您将其关闭（转到VIEW - TOOLBARS - NAVIGATION TOOLBAR并取消勾选），则媒体查询将以320像素触发。
答案 1 :(得分：6)
在Firefox中，根据您确切的工具栏设置，内容区域可能无法收缩到某个宽度以下。如果您设置一个带有垂直滚动条的页面，当窗口小于最小宽度时，您可以看到滚动条开始消失。此时，浏览器窗口变小，但页面视口不是。因此，如果您的最小宽度大于320px，那么上面的媒体查询永远不会适用。
关键是媒体查询与页面视口宽度匹配，而不是浏览器窗口宽度。
此外，媒体查询匹配CSS像素，而不是设备像素。放大Firefox会更改设备像素中CSS像素的大小，因此页面视口大小（在设备像素中固定）会改变CSS像素。
缩放应该没有标准。
答案 2 :(得分：1)
我一直致力于320px的响应式设计，但Firefox不会回应。
我发现，出于某种原因，如果您将媒体查询设置为480px - (max-width:480px) - 那么Firefox无论如何都会应用媒体查询。