css3媒体查询选择器

响应式布局的核心：css3媒体查询选择器
基本结构：

@media 媒体类型 关键字 带条件的媒体属性 <and 带条件的媒体属性...> {
	// 样式规则
}

1. 媒体类型
   all：默认值，包含screen、print
   screen：屏幕
   print：打印预览

2. 媒体属性
   width（浏览器窗口尺寸）
   device-width（设配独立像素）
   device-pixel-ratio（像素比）（加-webkit-前缀，pc:1 移动端:看参数）
   上述三个媒体属性可以加min、max前缀：最小值和最大值的设置
   orientation（横竖屏切换）：portrait竖屏、landscape横屏

3. 关键字：
   only：处理浏览器兼容问题，让旧浏览器读取失效
   and：连接一条查询规则
   ,：连接多条查询规则
   not：取反

4. 举例

@media screen and (max-width: 600px) { 
/*当屏幕尺寸小于600px时，应用下面的CSS样式*/
  body {
    background: #ccc;
  }
}