CSS3对media type的功能的增强就是添加了media queries功能。
Media Queries概念引入解决的问题是网页在不同设备的浏览器中显示风格的多样性需求。
问题1：如果针对特定窗口尺寸来设计网页（布局，显示），那么会在其他窗口尺寸中显示该网页会产生很多问题；
问题2：如果针对不同的窗口尺寸来制作不同的网页，则需要制作的网页会变得更多，消耗更多的人力时间。
通过Media Queries则可以通过针对不同的设备特性来使用不同的样式代码；大大减少了开发成本和提高了应用的友好度。
页面中引入媒体类型方法：
1、link方法引入
<link rel="stylesheet" type="text/css" href="../css/print.css" media="print" />
2、xml方式引入
<?xml-stylesheet rel="stylesheet" media="screen" href="css/style.css" ？>
3、@import方式引入，@import引入有两种方式：
//样式文件中调用另一个样式文件：
@import url("css/reset.css") screen;
@import url("css/print.css") print;
//在<head></head>中的<style>...</style>中调用：
<head>
<style type="text/css">
@import url("css/style.css") all;
</style>
</head>
4、@media引入，这种引入方式和@import是一样的，也有两种方式：
@media 设备类型 and (设备特性) {样式代码}
以上几种方法都有其各自的利弊，在实际应用中建议使用第一种和第四种，因为这两种方法是在项目制作中是常用的方法。
Media query是基于设备类型和设备媒体特征来做判断的，媒体特征有下面这些，这些特征在指定值得时候大部分都支持使用min-/max-来作为前缀。并且可以大体分为两类，一类针对浏览器屏幕（software），一类针对显示设备屏幕(hardware)。
<link rel="stylesheet" media="screen and (max-width:600px)" href="small.css" type="text/css" /> //当屏幕小于或等于600px时，将采用small.css样式来渲染Web页面。 <link rel="stylesheet" media="screen and (min-width:900px)" href="big.css" type="text/css" /> //当屏幕大于或等于900px时，将采用big.css样式来渲染Web页面。
<link rel="stylesheet" media="screen and (min-width:600px) and (max-width:900px)" href="style.css" type="text/css" /> //一个Media Query可以包含0到多个表达式，表达式又可以包含0到多个关键字，以及一种Media Type。 //正如上面的其表示的是当屏幕在600px-900px之间时采用style.css样式来渲染web页面。
<link rel="stylesheet" media="screen and (max-device-width: 480px)" href="iphone.css" type="text/css" /> //上面的代码指的是iphone.css样式适用于最大设备宽度为480px，比如说iPhone上的显示，这里的max-device-width所指的是设备的实际分辨率，也就是指可视面积分辨率
<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css" href="iphone4.css" /> //上面的样式是专门针对iPhone4的移动设备写的。
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css" type="text/css" /> <link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css" type="text/css" /> //在大数情况下，移动设备iPad上的Safari和在iPhone上的是相同的，只是他们不同之处是iPad声明了不同的方向，比如说 上面的例子，在纵向(portrait)时采用portrait.css来渲染页面； 在横向（landscape）时采用landscape.css来渲 染页面。
/*240px的宽度*/ <link rel="stylesheet" media="only screen and (max-device-width:240px)" href="android240.css" type="text/css" /> /*360px的宽度*/ <link rel="stylesheet" media="only screen and (min-device-width:241px) and (max-device-width:360px)" href="android360.css" type="text/css" /> /*480px的宽度*/ <link rel="stylesheet" media="only screen and (min-device-width:361px) and (max-device-width:480px)" href="android480.css" type="text/css" /> //可以使用media query为android手机在不同分辨率提供特定样式，这样就可以解决屏幕分辨率的不同给android手机的页面重构问题。
<link rel="stylesheet" media="not print and (max-width: 1200px)" href="print.css" type="text/css" /> //not关键字是用来排除某种制定的媒体类型，换句话来说就是用于排除符合表达式的设备。
<link rel="stylesheet" media="only screen and (max-device-width:240px)" href="android240.css" type="text/css" /> //only用来定某种特定的媒体类型，可以用来排除不支持媒体查询的浏览器。 //其实only很多时候是用来对那些不支持Media Query但却支持Media Type的设备隐藏样式表的。 //1.支持媒体特性（Media Queries）的设备，正常调用样式，此时就当only不存在； //2.对于不支持媒体特性(Media Queries)但又支持媒体类型(Media Type)的设备，这样就会不读了样式， //因为其先读only而不是screen；另外不支持Media Qqueries的浏览器，不论是否支持only，样式都不会被采用。
//在Media Query中如果没有明确指定Media Type，那么其默认为all，如： <link rel="stylesheet" media="(min-width: 701px) and (max-width: 900px)" href="medium.css" type="text/css" /> //另外还有使用逗号（，）被用来表示并列或者表示或，如下 <link rel="stylesheet" type="text/css" href="style.css" media="handheld and (max-width:480px), screen and (min-width:960px)" /> //style.css样式被用在宽度小于或等于480px的手持设备上，或者被用于屏幕宽度大于或等于960px的设备上。
本文学习参考资料：