当前位置:Gxlcms >
html代码 >
用mediascreen做响应式布局,为何断点设为800px时chrome会在783px就变化?
用mediascreen做响应式布局,为何断点设为800px时chrome会在783px就变化?
时间:2021-07-01 10:21:17
帮助过:42人阅读
回复内容:
谢邀,这个不是@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没加上