学习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规则类似,只是用法有些差别。

发表评论