媒体查询和滚动条宽度

Question

我正在处理需要精确媒体查询处理的布局。我的一个问题是crossbrowser 滚动条宽度，因为它根据浏览器的不同而大多数（所有这些？）都包含在窗口宽度中。

正如我们在这两个示例中看到的那样，媒体查询在使用和不使用垂直滚动条的情况下都不会在相同的窗口大小下执行操作：

1. Test without scrollbar
2. Test with scrollbar

在第一个示例中，您可以在800/700/600px窗口宽度处看到背景颜色的确切变化 在带滚动条的第二个示例中，颜色在：

处变化
• Chrome和Firefox：779/679/579px
• IE：783/783/583px

最多可达21px。

通过忽略媒体查询中的滚动条并关注可用宽度本身是否有解决方法。
如果不是如何处理此问题，您是否修复了scollbar的最大宽度并将其包含在媒体查询中？

- 更新 -

我正在寻找CSS的最佳实践/解决方案，因为我想避免这个项目的JS。

Answer 1

看一下这个例子：http://stowball.github.io/mqGenie/

对我来说，它在Firefox和Chrome中运行良好（使用滚动条）。

您可以在此处下载并阅读有关此插件的更多信息：https://github.com/stowball/mqGenie（~2.2 kb）

其中一个来源：https://stackoverflow.com/a/21414947/2898694

享受。