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

本文参考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： @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样式）？

• 规则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这个范围，浏览器不会解析这些样式。

codepen示例

查看上面的示例，先把浏览器放到最大，再逐渐拉窄；窗口颜色分别从灰色变成红色、橙色、黄色、绿色。

欢迎分享本文, 但请保留原文链接。