媒体查询-响应式web设计(一)

背景

1.移动设备普及，设备屏幕尺寸小于显示器

2.出现更大尺寸的显示器

3.响应式web设计出现，适配多种设备和屏幕

定义

就是网页内容会随着访问它的设备的不同而呈现不同的样式

viewport

视口（viewport）：浏览器中用于呈现网页的区域

默认视口：移动设备默认视口尺寸大于屏幕尺寸，因此需要如下代码，调整视口尺寸防止浏览器缩放

详细参考 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