参考博客：http://www.qianduan.net/media-type-and-media-query.html
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有很多种：
| 类型 | 解释 |
|---|---|
| all | 所有设备 |
| braille | 盲文 |
| embossed | 盲文打印 |
| handheld | 手持设备 |
| 文档打印或打印预览模式 | |
| projection | 项目演示，比如幻灯 |
| screen | 彩色电脑屏幕 |
| speech | 演讲 |
| tty | 固定字母间距的网格的媒体，比如电传打字机 |
| tv | 电视 |
media query支持的属性
事实上，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 | 横屏或竖屏 |
几个特别注意的地方
1、 orientation:判断设备是横屏还是竖屏时使用，Portrait判断输出设备中的页面可见区域高度大于或等于宽度(竖屏状态)；landscape:除portrait值情况外，都是landscape。
eg:
1 <!DOCTYPE html> 2 <html lang="zh-cn"> 3 <head> 4 <meta charset="utf-8" /> 5 <title>media features orientation_CSS参考手册_web前端开发参考手册系列</title> 6 <style> 7 @media not screen and (orientation:portrait){ 8 body{color:#f00;} 9 } 10 </style> 11 </head> 12 <body> 13 <div class="test">当输出设备中的页面可见宽度大于高度时，本行文字显示为红色</div> 14 </body> 15 </html>
例子中 @media not screen and (orientation:portrait) 由于使用的not 故之前的竖屏状态改为了横屏状态（设备的宽度大于高度）是触发此CSS.
2、device-aspect-ratio 表示输出设备页面的尺寸比（常见的有4:3 16:9 但是这里表示用的是4/3 16/9）：
eg:
1 /* for 4:3 screen */ 2 @media only screen and (device-aspect-ratio:4/3){ 3 selector{ 4 } 5 } 6 7 /* for 16:9 and 16:10 screen */ 8 @media only screen and (device-aspect-ratio:16/9) and (device-aspect-ratio:16/10){ 9 selector{ 10 } 11 }
3、webkit :WebKit 是一个开源的浏览器引擎
现在浏览器的内核引擎，基本上是四分天下：
Trident: IE 以Trident 作为内核引擎;
Gecko: Firefox 是基于 Gecko 开发;
WebKit: Safari, Google Chrome,傲游3,猎豹浏览器,百度浏览器 opera浏览器 基于 Webkit 开发。
Presto: Opera的内核，但由于市场选择问题，主要应用在手机平台--Opera mini
注：2013年2月Opera宣布转向WebKit引擎
注：2013年4月Opera宣布放弃WEBKIT，跟随GOOGLE的新开发的blink引擎
故在CSS3中添加了前缀来区分一些浏览器的特有属性：
-moz代表firefox浏览器私有属性
-ms代表IE浏览器私有属性
-webkit代表chrome、safari私有属性
-o 代表opera 浏览器
-ms代表IE浏览器私有属性
-webkit代表chrome、safari私有属性
-o 代表opera 浏览器