媒体查询和滚动条宽度

Question

我正在处理需要精确媒体查询处理的布局。其中一个问题是跨浏览器滚动条宽度因浏览器而异，并且大多数（全部？）将其包含在窗口宽度中。

正如我们在这两个例子中所看到的，使用和不使用垂直滚动条时，媒体查询在不同的窗口大小下表现不同：

1. 没有滚动条的测试
2. 有滚动条的测试

在第一个示例中，您可以看到背景颜色在窗口宽度为 800/700/600px 时恰好更改。
在第二个示例中，在具有滚动条的情况下颜色更改为：

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

这使差别高达 21px。

是否有一种方法可以忽略媒体查询中的滚动条，而专注于可用宽度本身。
如果没有，请问您如何处理此问题，您是否为滚动条设置最大宽度并将其包含在媒体查询中？

-- 更新 --

我正在寻找使用 CSS 的最佳实践/解决方案，因为我希望避免在该项目中使用 JS。

- web-tiki

---

它看起来与其他任务相似。尝试这个链接： [https://dev59.com/QHDYa4cB1Zd3GeqPFN9K] - Petroff

@Nividim 我看过这个问题，但答案不符合我的需求，我正在寻找一个 CSS 解决方案。 - web-tiki

@Web-tiki，我的回答有帮助吗？有什么评论吗？如果不被接受，请告诉我是否有问题，我会尝试添加额外信息或解释。 - Sharikov Vladislav

@SharikovVladislav 您的回答很有趣，链接也很一致，所以我点了个赞。但我正在寻找一种没有使用 JS 的 CSS 解决方案和最佳实践。也许我的问题没有表述清楚，我会更新它的描述。 - web-tiki

Answer 1

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

对我来说，它在Firefox和Chrome中都很好用（带滚动条）。

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

其中之一来源：https://dev59.com/qGsz5IYBdhLWcg3wCDl2#21414947。

享受吧。

- Sharikov Vladislav

Answer 2

【英译中】

八年后（2023年），容器查询得到了大多数浏览器的支持，并解决了这个问题！

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

html{container-type:inline-size;}

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

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

我已经使用容器查询的方法更新了您的示例“带滚动条的测试”（未更改HTML和JavaScript）。updated your example

- schellmax

---

注意：我刚刚发现，在使用“html”或“body”元素上的“container-type”时，身体内的“position:fixed”将不再起作用。 - schellmax

关于我之前对“position:fixed”问题的评论，现在似乎有了一个解决方案：https://www.oddbird.net/2023/07/05/contain-root/#tl%3Bdr%2C-can-we-have-a-root-container%3F - schellmax