@media 媒体查询

目前各种屏幕尺寸的移动设备，笔记本，台式机，
还有前后端分离的思想，要求页面尽量多的适应设备屏幕，这就会用到Media Query 媒体查询。
先介绍一片文章：http://www.w3cplus.com/content/css3-media-queries 写的很具体
下面是我自己对@media的理解
我常用的引入方式：

<link href="print.css" media="print" rel="stylesheet" type="text/css">

表示当媒体是print的时候引用print.css样式

/* 在样式文件中 */@media screen and (max-width:1000px){}

表示当屏幕小于1000px时使用里面的样式

媒体类型（media type）：
也就是 上面所用的 print 、screen、speech等 ,还有一些 不过最常用其实也就是screen了。

媒体特性（属性）：
也就是上面所用的max-width，还有min-width max/min-height max/min-device-width/height orientation等等。
具体类型和特性 可以看http://www.runoob.com/cssref/css3-pr-mediaquery.html 很全面。

关键字：
关键字and not only， 他们表示条件和条件之间的关系
eg：

@media screen and (max-width:1000px) and (man-width:600px){}

and表示且的关系，当宽度大于600PX小于1000PX时 使用样式。

@media not print and (max-width:100px){}

not表示非，非print设备

@media only screen and (max-width:1000px){}

only表仅仅，当为screen时
关键字还有个all没有明确指定media type 时就是all

举些栗子0.0
一、最大/小宽度/高度

<link media="screen and (max/min-width/height:500px)" href="a.css">@media screen and (max/min-width/height:500px){}

(注意：两行代码代表两种引入方式)
二、多个media queries 使用

<link media="screen and (min-width:600px) and (max-width:900px)" href="b.css">@media screen and (min-width:600px) and (max-width:900px){}

三、设备屏幕宽高（Device width/height）
这个重要了，当我们做适应性布局的时候，对不同屏幕尺寸的手机，或数码设备平板等会常用到

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

device-width为实际分辨率，也就是可以看见的面积
四、可翻转设备

@media all and (orientation:portrait){}

orientation表示设备可见区域高度是否大于等于宽度，通俗点讲就是设备是竖屏，还是横屏
orientation有两个值：portrait 竖屏，landscape横屏