用media screen做响应式布局，为何断点设为800px时chrome会在783px就变化？

程序员文章站 2022-05-23 15:53:06

...

回复内容：

谢邀，这个不是@media的bug, 而是Chrome 和 Safari 计算你的max-width的800px其实是 (780px body + 20px scrollbar)，也就是说滚动条有20像素，其实精确一点应该是780不是783。
Firefox, Opera 和 IE就不计算20的滚动条宽度。如果你要解决这个问题，让不同浏览器的滚动条宽度计算准确，请加入body { overflow-y: scroll; }.
由于浏览器版本，滚动条宽度会在15px,17px,20px，但是你设计过程中建议按照20px的标准去计算，这样能避免不同浏览器不同版本的宽度误差，下面是一些版本对应的滚动条宽度参考：

我测试过现在最新的chrome,safari,firefox的mac版本滚动条经过精确测算是15px，windows版本下的未检测，感兴趣可以自己去测试下.

想更深入的学习css 的盒模型，不错过任何一个编码中的细节，请参看W3C的官方标准资料：CSS basic box model
测试你不同的操作系统的不同浏览器滚动条，直接点开网址即可测试：http://www.textfixer.com/tutorials/scrollbar-pixel-width-test.php 泻药
因为是针对视口的设置
所以你得把滚动条宽度加进去…… 泻药
题主理解有误，下面一步步的来解释。
先说@media的语法，参考@media - CSS

@media  {
  
}

赞同 @Chuckie Chang的回答，chrome把滚动条的width也算在媒体查询里。你把chrome调试工具换成右列显示，就会发现800px时媒体查询生效了

泻药~
不太懂，老板要求一般都是用JS判断用户是哪个尺寸的屏幕，然后直接替换相应的session["css"]文件这样来做。前台输出?css=session["css"]。我们不太害怕效率耗损~ 因为who care ~ 至于对于某个尺寸宽高的CSS代码的编写我们不参与~ meta没加上

用media screen做响应式布局，为何断点设为800px时chrome会在783px就变化？

声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn核实处理。