1，響應式佈局：當瀏覽器寬度改變時，網頁根據寬度變化自動變化成適合人看的佈局。比如，當瀏覽器寬度為1920px時，一排顯示6張圖片，但是當瀏覽器寬度為640px時，一排顯示3張圖片。

2，響應式佈局的一些技術點紀錄：

(1)允許網頁的寬度自動的調整

在網頁程式碼的頭部，加入一行viewport元標籤。

 1 <meta name="viewport" content="width=device-width, initial-scale=1" /> 

viewport是網頁預設的寬度和高度，上面這行程式碼的意思是，網頁寬度預設等於螢幕寬度（width=device-width），原始縮放比例（initial-scale=1）為1.0，即網頁初始大小佔螢幕面積的100%。

(2)儘量少使用絕對的寬度，多點百分比

(3)相對大小的字型:字型不要使用px寫死，最好使用相對大小的em，或者高清方案rem，這個不限制與字型，別的屬性也可以這麼設定

(4)流式佈局，float等float的好處是，如果寬度太小，放不下兩個元素，後面的元素會自動滾動到前面元素的下方，不會在水平方向overflow（溢位），避免了水平滾動條的出現。

(5)選擇載入css，<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 400px)" href="tinyScreen.css" />，這個意思是如果螢幕寬度小於400畫素（max-device-width: 400px），就載入tinyScreen.css檔案。媒體查詢media

(6)利用display:none;和display:line-block切換元素在網頁中是否可見。

3，關於viewport:

平時設計的網頁寬度px都是css畫素，而不是物理畫素。在debug可以通過更改dpr:1/2/3來模擬css中1px等於多少物理畫素。

通過瀏覽：viewportsizes.com  網址可以查詢各種裝置的理想寬度（即做網頁時需要的寬度）。

4，彈性佈局；

百分比佈局使得網頁寬度能夠隨著檢視它們的螢幕視窗大小變化，因而得名彈性佈局