背景

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