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;

方法四

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

方法五

@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动画，那么就能执行这个外部样式表文件。

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