響應式佈局的目的：為移動裝置提供更好的體驗，用技術使網頁適應從小到大不同解析度的螢幕

有一句話對響應式佈局的形容非常貼切：content like water。

1.viewpoint

viewpoint：螢幕上用於顯示網頁的一塊區域（可能比瀏覽器的視區要寬，也可能要窄）

viewpoint理論

移動裝置上的viewpoint可分為：1）layout viewpoint （如顯示器的寬度，大於瀏覽器的可視寬度）

                                                   2）visual viewpoint （瀏覽器的可視寬度，和瀏覽器的大小相同）

                                                   3）ideal viewpoint  (移動裝置的理想寬度，隨移動裝置的大小不同而不同)

利用<meta>元資料標籤對viewpoint進行控制

<meta name="viewpoint" content="width=device-width", initial-scale="1.0">

content="width=device-width"  表示viewponit的寬度採用裝置寬度（即ideal viewpoint的寬度)

initial-scale="1.0"

2.css媒體查詢

媒體查詢有兩種方式

1）<link>元素中的css媒體查詢

<link rel="stylesheet" media="max-width:800px">

2)樣式表中的css媒體查詢

@media screen and(min-width:600px){
...
...
...
}

事實上，媒體查詢就是做出一些限制條件，滿足哪些限制條件，就採用哪一個樣式，由於移動裝置的螢幕的大小各不相同，所以媒體查詢的使用就會很廣泛，因為不同的裝置的佈局方式等等都是不一樣的。

3.如何下手響應式

1）設定viewpoint

2）用媒體查詢設定斷點（min-width, max-width, max-height, min-height, landscape, portrait）

       ·先規劃好斷點，如（手機，平板，PC）

       ·遇到具體情況在增加具體斷點

       ·幾個關鍵點，手機橫屏，平板豎屏，PC寬屏和窄屏

注意：要知道設定min-width和的區別：min-width是移動端有限的設定方式，螢幕從小到大向上面相容，max-width相反

4.響應式佈局

1）流體                       設定較少的斷點（利用媒體查詢）所有內容使用flex:1;

2）固定+流體              設定較多的斷點，部分內容使用flex:1;

3）表現形式改變        就是螢幕不斷變化時，display:hidden與display:block以及寬高等等的變化

5.響應式圖片

<img src="img/small.png"

          srcset="img/large.png 960w,  img/medium.png 640w,  img/small.png 320w"

          sizes="(max-width:414px) 100vw, 640px"

          alt="響應式圖片">

 sizes="(max-width:414px) 100vw, 640px" 表示我們對圖片的需求，當小於414px時，就去原值，大於414px時，取640px，其中的100vw表示螢幕的100%顯示，就是全屏顯示。

srcset="img/large.png 960w,  img/medium.png 640w,  img/small.png 320w" 表示可供我們選擇的圖片規格，其中w是寬度描述符，在這裡就是px的意思。圖片選取原則：完全吻合原尺寸>大於原尺寸>小於原尺寸的最接近的尺寸

補充：上面w是寬度描述符，常用的還有x（裝置畫素比描述符）

如：

srcset="img/large.png 2x"

裝置畫素比(devicepixelradio)：dpr=物理畫素/獨立畫素（CSS畫素）              值為1時為標準屏，值為2時為2倍屏

更多關於移動裝置的資訊（畫素密度，裝置畫素比，retina屏）參考我的下一篇文章retina顯示屏

本部落格由博主原創，如需轉載需說明出處！謝謝支援！