揭开CSS3媒体查询迷雾（min-width和max-width）

http://www.cnblogs.com/lozio/p/4677738.html 本文参考MichelleKlann的Media Queries Demystified: Min-Width and Max-Width 媒体查询(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： 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样式）？规则2： 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： 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;  } screen and ( max-width: 960px ) {   body { background-color: red; } } 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这个范围，浏览器不会解析这些样式。 codepen示例 查看上面的示例，先把浏览器放到最大，再逐渐拉窄；窗口颜色分别从灰色变成红色、橙色、黄色、绿色。