媒体查询和滚动条宽度 [英] Media queries and scrollbar width

问题描述

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

I am working on a layout that needs precise media query handling. One of my issues is the crossbrowser scrollbar width as it is different according to browsers and most (all of them?) include it in the window width.

正如我们在这两个例子中所看到的，媒体查询在具有和不具有垂直滚动条的相同窗口大小下不起作用：

As we can see in these 2 examples, the media queries don't act at the same window size with and without the vertical scrollbar :

1. 无滚动条测试


2. 使用滚动条测试

1. Test without scrollbar
2. Test with scrollbar

在第一个示例中，您可以看到背景颜色更改完全在 800/700 / 600px 窗口宽度。

在滚动条的第二个示例中，颜色改变为：

In the first example, you can see the background color change exactly at 800/700/600px window width.
In the second examples with the scrollbar the colors change at :

• Chrome和firefox： 779/679 / 579px


• IE： 783/783 / 583px

• Chrome and firefox : 779/679/579px
• IE : 783/783/583px

到 21px 。

有一个工作是忽略媒体查询中的滚动条，本身。

如果不是如何处理这个问题，你是否修正了scollbar的最大宽度并将其包含在媒体查询中？

Is there is a work around by ignoring the scrollbar in media queries and focus on the available width itself.
If not how do you handle this issue, do you fix a maximum width for the scollbar and include it in the media queries?

- UPDATE -

我正在使用CSS搜索最佳实践/解决方案，因为我想避免JS这个项目。

I am searching for best practices/solution with CSS as I would like to avoid JS for this project.

推荐答案

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

它在Firefox和Chrome中为我工作正常（使用滚动条）。

It is working fine both in Firefox and in Chrome for me (with scrollbars).

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

You can download and read more about this plugin here: https://github.com/stowball/mqGenie (~2.2 kb)

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

享受。

这篇关于媒体查询和滚动条宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！