这段代码什么意思:
@media only screen and (max-width: 1360px)
当用户的界面小于等于1360px的时候, 会加载该流媒体样式(此时的界面是包含滚动条的);
在Chrome/26.0.1384.0 Safari/537.26或者更低版本中会有一个神奇的bug;
出现bug的必须条件为,1:界面有引用一个css文件,不管这个css文件是否存在; 2:流媒体查询的宽度 必须介于 --》》浏览器包含滚动条的可视区域 和 浏览器未包含滚动条的宽度 之间,
3:界面必须出现滚动条, 源码如下:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="css/xx.css"/>
<title>云平台首页</title>
</head>
<style> .bodyer {
background:#FBA733;
border:1px solid #eee;
width:400px;
height:400px;
} /*@media all and (max-width:1300px) {*/
@media only screen and (max-width: 1360px){
.bodyer {
width:200px;
height:200px;
}
}
</style>
<body>
<style>
</style>
<div class="bodyer">
</div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>
</html>
正常显示是要这样的:
有时候会变成这样:
新版本的chrome是没有问题的, 至于哪些chrome有问题, 我可没测过, 要解决这个问题, 把垂直滚动条去掉就好了, 或者把滚动条出现在DIV内部, 不要出现在BODY元素上, 流媒体查询就会生效了;