media type与media query

media type(媒体类型)是css 2中的一个非常有用的属性，通过media type我们可以对不同的设备指定特定的样式，从而实现更丰富的界面。media query(媒体查询)是对media type的一种增强，是CSS 3的重要内容之一。随着移动互联网的发展，media query开始得到大家的重视。

media type

让我们先了解一下media type，其实这个大家会比较熟悉一点，我们通常会用到的media type会是all 和screen，然后是print，一些网站会专门通过print类型为页面的打印格式提供更友好的界面。
其实，media type有很多种：

media type的几种使用方法

我们可以通过几种方法来声明media type：

方法一

<link href="style.css" media="screen print" ...

方 法二

<?xml-stylesheet media="screen" href="style.css"...

方 法三

@import url("style.css") screen;

方 法四

1
2
3

<style media="screen">
@import url("style.css");
</style>

方 法五

1
2
3

@media screen{
selector{rules}
}

当 然，这几种方法各有利弊，而我们常用的是第一种和最后一种方法。

media type的浏览器支持

• IE5.5/6 /7不支持在@import中使用媒体类型
• Safari/firefox只支持all,screen,print三种类型(包括 iphone)
• Opera 完全支持
• Opera mini  支持handheld，未指定则使用screen
• Windows Mobile系统中的IE支持handheld，其它支持不明…

media query

正如前文所 说，media query是CSS 3对media type的增强，事实上我们可以将media query看成是media type+css属性判断。

请注意，下面提到的一些关键字等内容，有些是在media type中就可用的，但是放到media query中将能更好的发挥其作用，所以我就在适当的地方引入。

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

<link rel="stylesheet" media="screen and (animation)” herf=“…”

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

1
2
3

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

如 果设备的浏览器的最大宽度是240px，则页面将使用中号字体。

PS:属性和值之间是用冒号连接的，而不是等 号，这与正常的CSS的写法一致。

媒体查询语句结构

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

1
2
3

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

其 中media type可以省略，属性值也可以为空：

@media (color:4){}

@media (color){}

当 然，请注意，有属性值和没有属性值的情况代表的意义是不一样的，所以上面的这两条规则不是等价的。

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

1
2
3

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

1
2
3

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

media query支持的属性

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

从这些属性中我们可以看出，media query就是为了更好的适配各种设备而生的。

浏览器扩展

webkit

webkit是最早实现 media query支持的浏览器内核之一，同时它也根据自己的需要搞了一些特有的扩展属性，最常用的有：

详情请看这里：http://webkit.org/specs/MediaQueriesExtensions.html

firefox

firefox 也提供一些自己的扩展，不过由于firefox浏览器的手机版现在还很弱，所以很少会用到，感兴趣的同学可以到https://developer.mozilla.org/En/CSS/Media_queries查 阅。

max与min

细心的同学可能已经注意到前面用到的这两个关键词，他们是要配合支持它们的属性使用的，它们的意义与 我们常用的max-width和minwidth等类似。

各属性对max和min的支持在前面的属性列表中有给出，这里是一个详细的列表：

not/only

媒 体类型还支持 not和only关键字，它们可以用来更方便的定位某个媒体设备：

not：排除某种制定的媒体类型

@media not print and (color){
}

only：指 定某种特定的媒体类型，可以用来排除不支持媒体查询的浏览器：

@media only screen and (color){
}

media query的浏览器支持：

• 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支持)

实例：

现在让我们来看一些典型的例子：

检 测iPhone safari：

<link media="only screen and (max-device-width: 480px)" href="style.css">

这 是apple官方网站推荐的一种定位iPhone safari浏览器的方法，在iPhone一代和2代的时代，这条规则的确能够正确的判断出iPhone的浏览器，但是后来出现了Android的大屏幕 手机，比如Nexus One和HTC desire，这条规则也能适配这些480px宽度的机器。

Google的iPhone横屏样 式：

Google之前通过以下方式为iPhone手机提供横屏样式(因为最早的3代iPhone手机不支持orientation属 性)：

1
2
3
4
5
6

@media screen and (max-height:300px){
    #linksDiv{
        margin-top:10px;
    }
    ...
}

android 手机的多分辨率问题：

android系统的开放性导致其终端的多样性，那么对于各种各样的android手机来说，屏幕分辨率的差异导致 针对android手机的页面重构复杂性增加，那么我们可以用media query为每种分辨率提供特定样式：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

/* for 240 px width screen */
@media only screen and (max-device-width:240px){
    selector{
    }
}
 
/* for 360px width screen */
@media only screen and (min-device-width:241px) and (max-device-width:360px){
    selector{
    }
}
 
/* for 480 px width screen */
@media only screen (min-device-width:361px)and (max-device-width:480px){
    selector{
    }
}

device-aspect-ratio

device- aspect-ratio可以用来适配特定屏幕长宽比的设备，这也是一个很有用的属性，比如，我们的页面想要对长宽比为4:3的普通屏幕定义一种样式，然 后对于16:9和16:10的宽屏，定义另一种样式，比如自适应宽度和固定宽度：

1
2
3
4
5
6
7
8
9
10
11

/* for 4:3 screen */
@media only screen and (device-aspect-ratio:4/3){
    selector{
    }
}
 
/* for 16:9 and 16:10 screen */
@media only screen and (device-aspect-ratio:16/9) and (device-aspect-ratio:16/10){
    selector{
    }
}

当 然，对于手机也可以使用这个属性，比如对于480px*800px的Nexus One和Desire等手机，可以用下面的样式来匹配：

1
2
3
4
5

/* for 480px*800px width screen */
@media only screen (device-aspect-ratio:5/3){
    selector{
    }
}

O’Reilly 区分iPhone和iPad的方法

O’Reilly为其网站制作了针对iPad和iPhone设备的不同版本，从而提供最适合相关设备阅 读的界面，他们的做法就是使用media query：

1
2
3
4

<link rel="stylesheet" media="all and (max-device-width: 480px)" href="iphone.css">
<link rel="stylesheet" media="all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)" href="ipad-portrait.css">
<link rel="stylesheet" media="all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)" href="ipad-landscape.css">
<link rel="stylesheet" media="all and (min-device-width: 1025px)" href="ipad-landscape.css">

详 细介绍可以查看这里：http://broadcast.oreilly.com/2010/04/using-css-media-queries-ipad.html

总 结

CSS 3的media query是一个很强大也很好用的工具，它为我们在不同的设备和环境下实现丰富的界面提供了一种快捷方法，虽然现在各个浏览器对它的支持还有些差异，但是 大家都在改进，IE 9已经开始支持media query了。不过目前media query的最大舞台是在高端手持设备，相信随着移动互联网的快速发展，media query也会很好发挥自己的作用。