学习 Media Query

最近做一个手机 Web 应用需要在各种平台的手机的不同分辨率下加载相应的图片。因为对图片要求较高，缩放会让图片变形模糊。最初想到的是用 Javascript 来获取手机屏幕大小，然后动态加载相应的 CSS 文件。这种办法是可行的，但不是最好的。最佳方案是使用今天将谈到的 Media Query。

什么是 Media Query？

Media Query 是 CSS3 对 Media Type 的增强，事实上我们可以将 Media Query 看成是 Media Type + CSS 属性判断。

css 属性判断可以只是某个 CSS 属性的名称，也可以是属性 + 值：

如果设备支持 CSS 动画，那么就能执行这个外部样式表文件。

@media screen and (max-width:240px){
  body {
    font-size:medium;
  }
}

如果设备的浏览器的最大宽度是 240px，则页面将使用中号字体。注意属性和值之间是用冒号连接的，而不是等号，这与正常的 CSS 的写法一致。

媒体查询语句

我们可以将上述语句称为媒体查询语句，这样也更能理解一些。从上面的例子也可以看出，媒体查询语句一般由 Media Type 加一到多个 CSS 属性判断组成，而多个 CSS 属性判断可以用关键字 and 连接：

@media screen and (min-width:1024px) and (max-width:1280px) {
  body { 
    font-size:medium;
  }
}

其中 Media Type 可以省略，属性值也可以为空。当然，有属性值和没有属性值的情况代表的意义是不一样的，所以上面的这两条规则不是等价的。

而针对多个媒体类型的 CSS 规则，可以用逗号来隔开：

@media handheld and (min-width:360px),screen and (min-width:480px) {
  body {
    font-size:large;
  }
}
@media screen and (min-width:800px),print and (min-width:7in) {
  body {
    font-size:small;
  }
}

支持的属性

事实上，Media Query 支持的属性和我们常用的 CSS 属性是不太一样的，它们是一些特别定义的条目：

属性	值	Min/Max	描述
color	整数	yes	每种色彩的字节数
color-index	整数	yes	色彩表中的色彩数
device-aspect-ratio	整数/整数	yes	宽高比例
device-height	length	yes	设备屏幕的输出高度
device-width	length	yes	设备屏幕的输出宽度
grid	整数	no	是否是基于格栅的设备
height	length	yes	渲染界面的高度
monochrome	整数	yes	单色帧缓冲器中每像素字节
resolution	分辨率(“dpi/dpcm”)	yes	分辨率
scan	Progressive interlaced	no	tv 媒体类型的扫描方式
width	length	yes	渲染界面的宽度
orientation	Portrait/landscape	no	横屏或竖屏

浏览器支持

Media Query 毕竟属于 CSS3 的范畴，因此不是所有浏览器都支持。

IE 9 以下不支持
Firefox 3.5+(Gecko 1.9.1+)支持
Opera 9.5+完全支持
Opera mini 5 支持
webkit 支持大部分属性(safari 3.0 的内核版本是 522，iPhone 1 代的 safari 的内核版本是 524，webkit 大概从这个时候开始支持 media query，但是对部分属性比如 projection 支持不好)
iPhone OS 3.2 之前的版本不支持 orientation 属性，iPad 和 iPhone 4 支持该属性。
iPhone Safari 不支持 orientation(iPhone 4 支持)

其实，Media Query 与 Flex 手机应用中的 media 规则类似，只是用法有些差别。