Css3-media query

在同一个样式表中，使用媒体查询定义在不同的媒体（media）中不同的样式(style)。

两部分组成：可选的媒体类型+媒体表达式

使用方法：
1.link标签的media属性指定

<link rel="stylesheet" media="all and (max-width:768px)" href="index.css" />

2.@media

@media screen and (max-width:992px){
	body{
		width:100%;
	}
}

• 媒体类型：

类型	描述
all	所有类型
screen	屏幕，如手机屏、电脑显示屏 、平板
print	打印机
speech	屏幕阅读器

注：别的类型，如果需要CSS3媒体查询

• 媒体特性
  width:视口宽度（和min max组合使用）
  height:视口高度（和min max组合使用）
  device-width:设备宽度（和min max组合使用）
  device-pixel-ratio:设备像素比（和min max组合使用）
  oriention:设备的方向，landscape横屏，portrait竖屏

• 操作符

操作符	描述
，	逻辑或，和媒体类型放一起
and	逻辑与，连接媒体类型和媒体特性
only	只有当前媒体类型判断媒体特性，显示样式。和媒体类型放一起
not	逻辑非，排除媒体类型。和媒体类型放一起

示例：

@media screen,print and (mix-width:998px){
	.color{
		color:#444;	
	}
}
/**等价于**/
@media screen {}
@media print and(min-width:998px){}

@media only screen and (max-width:998px) {}
/**排除屏幕视口最大宽度1200px**/
@media not print and (max-width:1200px){}

注：别的特性，如果需要CSS3媒体查询

对不支持媒体查询(media query)的移动设备:
1.移动端

<meta name="viewport" content="width=device-wdth,initial-scale=1.maximum-scale=1,minimum-scale=1"/>

禁止缩放 :user-scalable=no

<meta name="viewport" content="width=device-wdth,initial-scale=1.maximum-scale=1,minimum-scale=1,user-scalable=no"/>

2.古老浏览器
引入respond.js

<!--[if lt IE 9]>
<script src="respond.js"></script>
<![endit]-->