尝试在使用css3媒体查询的时候,发现不管是max-width还是min-width 在表示范围的时候随着给定的数值不同会存在不确定性。
查阅 W3C官方文档 ,有这么一段话:
Most media features accept optional ‘min-’ or ‘max-’ prefixes to express "greater or equal to" and "smaller or equal to" constraints.
基本可以理解为
max-width 表示 小于等于
min-width 表示 大于等于
但是在谷歌开发者文档中又存在下面这样的定义,没有边界值,只取小于或大于:
于是在FireFox中和Chrome中分别做了几组试验,在调试器改变视口尺寸,记录页面变化效果,得到以下数据
媒体查询body{
background-color:#0033FF;
}
@media screen and (min-width: 401px){
body{
background-color:#FFFF00;
}
}
my first @media
发现随着给定的数值不同,媒体查询所表示的范围也会变的不同,不是W3C所指的大于等于或者小于等于,发现并没有很明确的规律可循。
所以,有没有大牛可以解释一下?