媒体查询-响应式web设计(一)
背景
1.移动设备普及，设备屏幕尺寸小于显示器
2.出现更大尺寸的显示器
3.响应式web设计出现，适配多种设备和屏幕
定义
就是网页内容会随着访问它的设备的不同而呈现不同的样式
viewport
视口（viewport）：浏览器中用于呈现网页的区域
默认视口：移动设备默认视口尺寸大于屏幕尺寸，因此需要如下代码，调整视口尺寸防止浏览器缩放
<meta name="viewport" content="width=device-width">
详细参考 http://www.cnblogs.com/2050/p/3877280.html
媒体查询
浏览器兼容性：IE8之后的浏览器都支持
媒体查询浏览器支持情况
@media and (min-width:320px) {...}
@media and (min-width:480px) {...}
@media支持类型
all：默认是全部
screen：屏幕
print：打印
projection：投影
媒体查询常用特性
width/height：视口宽度/ 高度
device-width/device-height：设备宽度/高度
resolution：设备分辨率，比如min-resolution：*dpi | * dpcm | * dppx（dp dot per i是inch，cm是厘米，px是pixel）
多个媒体查询切分到不同的样式表
虽然减少了首次加载流量，但是增加了http次数，gzip压缩后，流量变化可能不大，因此需要根据具体情况来选择是否切分
响应式Web设计 HTML5和CSS3实战 第2版
下载地址：http://pan.baidu.com/s/1cByAT4密码：c6ox
购买链接：https://item.jd.com/12116654.html
参考
http://www.ruanyifeng.com/blog/2012/05/responsive_web_design.html
