CSS3媒介查询

在CSS2中已经可以识别不同的媒介类型，一般的应用是在不同的媒介上采用不同的样式，比较典型的就是识别print设置适合打印的样式CSS3的媒介查询 @media非常的好用，特别是在响应式页面上。

构成：媒体查询包含一个媒体类型，后跟一个或多个检查特定条件（如最小的屏幕宽度）的表达式。

meidia type 类型：all匹配所有设备，print打印机设备，screen彩色计算机显示器设备（还有其他类型但是基本用不到）

现在的android、iphone都是screen设备，采用CSS3的Media Query 媒体查询。

响应式页面设计：使得一个网页能够适应多个终端，它并不是同样内容等比例缩小，也不像WAP网站一样与PC端差异巨大。相应式设计在设计风格和色彩搭配上保持了很大的一直性，又根据移动设备的特点对布局做了调整

响应式设计一般要遵循4个原则：

1、重要内容优先，小屏幕只显示高优先级内容

2、体验的一致性

3、友好的链接

4、考虑移动操作习惯

媒介查询的使用

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

class{

backfround-color:#fff;}

}

窗口小于600px的.class样式，and为条件添加符，可以使用多个and添加多个条件

@media screen and(max-width:600px) and(min-width:900px){

class{

backfround-color:#fff;}

}

适配设备的判断条件：

width

height

device-width:屏幕宽度

device-height 

orientation 设备手持方向

aspect-ratio浏览器，纸张长宽比

color 颜色欧式

color-index 颜色模式列表整数

monochrome 整数

resolution 解析度

scan 隔行扫描

grid 整数