我在 Firefox 中遇到 css 媒体查询问题。它在 Chrome 中可以正常工作，就像我制作了两个 DIV 并想要一个滚动条一样。如果我将 firefox 的屏幕尺寸减小到 800 像素，那么两个 DIV 都会崩溃，并且在一些像素媒体查询工作之后，但在 Chrome 中不会发生这种情况。
检查这个小提琴http://jsfiddle.net/RMvqC/2/
【问题讨论】：
@media all and (max-width: calc(980px + scrollbar-width))这样的媒体查询而杀人
我通过在我的项目头部调用“mqGenie”javascript 解决了这个问题。
现在，我的媒体查询的宽度在 Chrome、Safari、Firefox 和 IE 上都可以正常工作（具有相同的值），无论是否带有滚动条。
此 javascript 调整浏览器中的 CSS 媒体查询，包括视口宽度中的滚动条宽度，以便它们以预期大小触发。
你可以从这个网址下载：
【讨论】：
基于 Firefox 和 Webkit 的浏览器以不同的方式呈现滚动条。在 Firefox 中，MediaQuery 考虑滚动条的宽度，即 15px 与屏幕宽度，但在基于 Webkit 的浏览器中，它不被视为具有屏幕宽度的滚动条。所以，这就是浮动 DIV 在 Firefox 中折叠的原因。
我用 css 做了一些东西可能对你有帮助。 （查看this fiddle）
html {
/* force scrollbars */
height: 101%;
}
body {
margin: 0;
padding:0;
white-space:nowrap;
}
#box1,
#box2 {
display:inline-block;
width: 400px;
height: 200px;
vertical-align:top;
white-space:normal;
}
#box1 {
background: #ce0000;
margin-right:-5px;
}
#box2 {
background: #8e0000;
}
@media screen and (max-width: 799px) {
body {
white-space:normal;
}
#box1,
#box2 {
width: 300px;
}
}
【讨论】：
Firefox & Opera 遵循 W3C 规范，即在媒体查询宽度中包含滚动条宽度（原因可能是为了避免a comment here 中描述的无限循环），而 Webkit 没有（可能是因为他们认为这没有意义）
有一个解决方法（我只在 FF 上测试过），显然如果你强制滚动条一直可见，那么宽度现在将与 Webkit 保持一致。代码如下：
html
{
overflow:hidden;
height:100%;
}
body
{
position:relative;
overflow-y:scroll;
height:100%;
-webkit-overflow-scrolling:touch; /* So iOS Safari gets the inertia & rubber-band effect */
}
如果您只想将此应用到 FF 和 Opera，您可以求助于 CSS hack：
/* Firefox */
@-moz-document url-prefix()
{
html
{
overflow:hidden;
height:100%;
}
body
{
position:relative;
overflow-y:scroll;
height:100%;
/*-webkit-overflow-scrolling:touch;*/
}
}
/* Opera */
x:-o-prefocus, html
{
overflow:hidden;
height:100%;
}
x:-o-prefocus, body
{
position:relative;
overflow-y:scroll;
height:100%;
}
不用说，需要注意的是滚动条将始终可见，这可能是一个不错的折衷方案。
【讨论】：
注意安全！
我的最终策略是在媒体查询中添加 20 像素，这是我在布局上的默认空白。
有一个例外：@media (min-width: 320px) 在那个尺寸下，不要留下 20 像素的空白区域，并添加一条规则来解决较小的背景问题：
html body {
min-width: 320px;
}
20px 是滚动条默认宽度大小。
仅供参考：https://www.sitepoint.com/rwd-scrollbars-is-chrome-better/
【讨论】：
您可以使用 CSS-hack 轻松实现 Firefox 解决方案。将您的内容包装在一个额外的 <div> 中后，将此行添加到您的 CSS：
/* Firefox-Hack */
body, x:-moz-any-link {
overflow-x: hidden;
}
#wrapper, x:-moz-any-link {
margin: 0 -7.5px;
}
检查jsbin（jsfiddle 现在已关闭）
要获得更丰富的响应体验，您可以添加另一个媒体查询：another jsbin
CSS-hack 发现于 paulirish.com
【讨论】：
这是外围相关的，但我找到了一种方法来检测浏览器在任何给定时刻实际使用的媒体查询，而不必乱用滚动条和正文宽度......
基本上，在您的身体某处定义一个绝对定位的 1-x-1 像素大小的列表，其中包含您希望“可观看”的每个媒体查询条件的列表项。
然后在每个媒体查询定义中，显示/隐藏相应的列表项，然后简单地检查该项目在您的脚本中是否可见。
例子：
<body>
...
<ul id="mediaQueryHelper">
<li id="desktop"></li>
</ul>
</body>
<style type="text/less">
#mediaQueryHelper {
position: absolute;
height: 1px;
width: 1px;
visibility: hidden;
top: -999px;
left: -999px;
}
@media screen and (min-width: 481px)
{
#desktop { display: inline; }
}
@media screen and (min-width: 320px) and (max-width: 480px)
{
#desktop{ display: none; }
}
</style>
<script type="text/javascript">
$(document).ready(function()
{
var _desktop = $("#desktop");
$(window).resize(function() {
console.log("media-query mode: " + _desktop.is(":visible") ? "DESKTOP" : "MOBILE");
});
});
</script>
【讨论】：
如果您不想一直显示滚动条，请将您的内容包装到 <div> 元素等中。您可以使用 JavaScript 在显示滚动条时为所有媒体查询添加特定值。
// check whether scrollbar is visible
var isScrollbarVisible = window.innerWidth > document.documentElement.clientWidth;
// search for media rule
var mediaRule = document.styleSheets[i].cssRules[j];
// update media rule
mediaRule.media.mediaText = '..'
我编写了一个小脚本，您可以将其包含在您的页面中。它检测窗口何时调整大小并在需要时更改所有媒体查询。 css 变量--replace-media-scrollbar 的值用作滚动条的宽度，如果没有找到值，则使用15px。这适用于媒体查询with、min-width、max-width、height、min-height 和max-height，即使它们使用and 连接也是如此。
JavaScript：
function* visitCssRule(cssRule) {
// visit imported stylesheet
if (cssRule.type == cssRule.IMPORT_RULE)
yield* visitStyleSheet(cssRule.styleSheet);
// yield media rule
if (cssRule.type == cssRule.MEDIA_RULE)
yield cssRule;
}
function* visitStyleSheet(styleSheet) {
try {
// visit every rule in the stylesheet
var cssRules = styleSheet.cssRules;
for (var i = 0, cssRule; cssRule = cssRules[i]; i++)
yield* visitCssRule(cssRule);
} catch (ignored) {}
}
function* findAllMediaRules() {
// visit all stylesheets
var styleSheets = document.styleSheets;
for (var i = 0, styleSheet; styleSheet = styleSheets[i]; i++)
yield* visitStyleSheet(styleSheet);
}
// collect all media rules
const mediaRules = Array.from(findAllMediaRules());
// read scrollbar width
var style = getComputedStyle(document.documentElement);
var scrollbar = style.getPropertyValue('--replace-media-scrollbar') || '15px';
// update media rules
if (scrollbar != '0px') {
var oldValue = '0px';
function updateMediaRulesScrollbar() {
var newValue = window.innerWidth > document.documentElement.clientWidth ? scrollbar : '0px';
// if value changed
if (oldValue != newValue) {
for (var i = 0, mediaRule; mediaRule = mediaRules[i]; i++) {
var regex = RegExp('\\((width|min-width|max-width|height|min-height|max-height): (calc\\([^)]*\\)|[^)]*)\\)', 'g');
var replacement = '($1: calc($2 - ' + oldValue + ' + ' + newValue + '))';
mediaRule.media.mediaText = mediaRule.media.mediaText.replace(regex, replacement);
console.log(mediaRule);
}
}
oldValue = newValue;
}
updateMediaRulesScrollbar();
window.onresize = updateMediaRulesScrollbar;
}
可选 CSS：
:root {
--replace-media-scrollbar: 15px;
}
【讨论】：