相关疑难解决方法(0)

媒体查询和滚动条宽度

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

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

  1. 无滚动条测试
  2. 使用滚动条进行测试

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

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

这有所不同21px.

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

- 更新 -

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

css cross-browser scrollbar css3 media-queries

12
推荐指数
2
解决办法
3817
查看次数

标签 统计

cross-browser ×1

css ×1

css3 ×1

media-queries ×1

scrollbar ×1