揭开CSS3媒体查询迷雾（min-width和max-width）
本⽂参考MichelleKlann的
媒体查询(media queries)是响应式设计(Responsive Web Design简称RWD)必不可少的⼀部分。
媒体查询有两个关键词min-width和max-width, 接触过媒体查询的同学可能会认同我，这两个关键词很绕；从字⾯上理解它们可能不那么容易，以⾄于我每次都需要在脑海⾥⾯不断演算，然后⼩⼼翼翼地测试效果（⼤概和写正则表达式的感觉差不多）。
在这篇⽂章中我尝试解开媒体查询的迷雾。⾸先是名词解析：
width: 通常指代视⼝宽度；另外width和device width的区别在于，device width指代是屏幕的物理宽度。⽐如iphone5的屏幕分辨率是1136x640，竖屏时device width是640，横屏时是1136。通常，移动设备的浏览器都是全屏的，所以⼀般情况下width等于device-width。但是height和device-height的情况不⼀样（浏览器上⽅的地址栏和下⽅的⼯具栏有可能不算进视⼝⾼度）。鉴于⼀般媒体查询不采⽤height，所以本⽂所有例⼦全部使⽤width，指代width的像素全部加粗便于理解。
规则1： @media only screen and (min-width: 330px) {...}
指「width⼤于或者等于min-width，采⽤{...}的样式」
所以，如果width是320px，这条规则返回false；返回false的媒体查询规则会直接被浏览器过滤掉，不会渲染这条规则中的CSS样式。这种情况翻译过来就是：
「如果320px⼤于等于330px，采⽤{...}的样式」
问题1：有width为310px, 320px, 330px, 340px, 350px的视⼝，哪些视⼝会采⽤以上规则（指代规则1中{...}的CSS样式）？
css样式表优先级最高规则2： @media only screen and (max-width: 330px) {...}
指「width⼩于或者等于max-width，采⽤{...}的样式」
如果width是320px，这条规则会返回true，浏览器会解析这段规则中的CSS样式。这种情况翻译过来就是：
[如果320px⼩于或者等于330px，采⽤{...}的样式」
问题2：有width为310px, 320px, 330px, 340px, 350px的视⼝，哪些视⼝会采⽤以上规则（指代规则2中{...}的CSS样式）？
这条规则会更加容易理解，简单解释就是：视⼝宽度在min-width和max-width之间的，都会采⽤这条规则。
规则3：@media only screen and (min-width: 330px) and (max-width: 350px) {...}
如果width为340px, 这条规则返回true。翻译过来就是：
「如果340px在330px和350px之间，采⽤{...}的样式」
问题3：有width为310px, 320px, 330px, 340px, 350px的视⼝，哪些视⼝会采⽤以上规则（指代规则3中{...}的CSS样式）？
实例：
body {
background-color: gray;
}
@media screen and ( max-width: 960px ) {
body { background-color: red; }
}
@media screen and ( max-width: 768px ) {
body { background-color: orange; }
}
@media screen and ( max-width: 550px ) {
body { background-color: yellow; }
}
@media screen and ( max-width: 320px ) {
body { background-color: green; }
}
这条规则翻译过来就是:
1. 显⽰灰⾊背景；
2. width为0-960px的，显⽰红⾊背景；
3. width为0-768px的，显⽰橙⾊背景；
4. width为0-550px的，显⽰黄⾊背景；
5. width为0-320px的，显⽰绿⾊背景；
需要提醒⼀下的是CSS的优先级概念，在样式表中越后的样式优先级越⾼，就是后⾯的样式会覆盖前⾯的样式。在这个例⼦中，我们先设定了默认颜⾊为灰⾊。如果width⼤于960px的，会显⽰灰⾊。
假设width为750px，会先匹配到灰⾊，再匹配红⾊，最终显⽰了橙⾊。由于width等于750px，它不在0-550px和0-320px这个范围，浏览器不会解析这些样式。
查看上⾯的⽰例，先把浏览器放到最⼤，再逐渐拉窄；窗⼝颜⾊分别从灰⾊变成红⾊、橙⾊、黄⾊、绿⾊。
欢迎分享, 但请保留原⽂链接。
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论