媒体查询和滚动条宽度

Question

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

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

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

这有所不同21px.

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

- 更新 -

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

Answer 1

它在Firefox和Chrome中都可以正常使用(使用滚动条).

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

请享用.

Answer 2

八年后（2023 年），大多数浏览器都支持容器查询，并且可以解决这个问题！

我们不使用媒体查询（正如您所发现的，它报告包括滚动条的窗口宽度），而是在 html 元素上声明“包含上下文”

html{container-type:inline-size;}

...然后使用容器查询来获取它的宽度（没有滚动条）：

@container(max-width:600px){
  body{background:gray;}
}