Firefox 6/7 处理 max-width:320px 媒体查询是否错误？
我最近在 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- 和媒体的“标准”行为是什么 ？
提前谢谢 J。
I'm seeing strange behavior with media query in Firefox lately, and I was wondering who's doing it right (compared to Chrome and IE9).
I've got the following 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%;}
}
And Firefox (when resizing the browser, doesn't seem to notice the max:width 320px while it reacts to the bigger screen media queries.
Not only that, but when I use ctrl + often enough on a window it will kick in, where as Chrome and Internet Explorer 9 don't apply new media queries on ctrl + / ctrl -
Anyone know what's the 'standard' behavior with regards to ctrl+/ctrl- and media queries?
Thanks in advance...
J.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
我不知道为什么所提供的答案已被勾选，因为它没有回答OP的问题。媒体查询不触发 320 像素的原因是 Firefox 中的导航工具栏。
如果您将其关闭（转到“查看”-“工具栏”-“导航工具栏”并取消选中它），则媒体查询将以 320 像素触发。
I dont know why the answer provided has been ticked as it doesn't answer the OP's question. The reason why the media query doesn't fire 320 pixels is because of the navigation toolbar in Firefox.
If you turn it off (go to VIEW - TOOLBARS - NAVIGATION TOOLBAR and untick it) then the media query will fire at 320 pixels.
在 Firefox 中，根据您的具体工具栏设置，内容区域可能无法缩小到特定宽度以下。如果您设置带有垂直滚动条的页面，则当窗口小于该最小宽度时，您可以看到滚动条开始消失。此时，浏览器窗口会变小，但页面视口却不会变小。因此，如果您的情况下最小宽度大于 320px，那么上面的媒体查询将永远不会适用。
关键点是媒体查询匹配页面视口宽度，而不是浏览器窗口宽度。
此外，媒体查询匹配 CSS 像素，而不是设备像素。 Firefox 中的缩放会更改设备像素中 CSS 像素的大小，因此页面视口大小（以设备像素为单位固定）会更改 CSS 像素。
对于变焦应该做什么没有标准。
In Firefox, depending on your exact toolbar setup, it may be impossible for the content area to shrink below a certain width. If you set up a page with a vertical scrollbar, you can see the scrollbar start disappearing when the window gets to be smaller than that minimal width. At that point, the browser window is getting smaller, but the page viewport is NOT. So if that minimal width is greater than 320px in your case, then the media query above would never apply.
The key point being that media queries match on the page viewport width, not the browser window width.
Furthermore, media queries match on CSS pixels, not device pixels. Zooming in Firefox changes the size of a CSS pixel in device pixels, so the page viewport size (which is fixed in device pixels) changes in CSS pixels.
There is no standard of what zoom should do.
我一直致力于 320px 的响应式设计，但 Firefox 就是不响应。
我发现，出于某种原因，如果您将媒体查询设置为 480px -
(max-width:480px)- 那么 Firefox 无论如何都会应用媒体查询。I've been working on a responsive design for 320px but Firefox just wouldn't respond.
I found that, for some reason, if you set your media query to 480px -
(max-width:480px)- then Firefox will apply the media queries anyway.