要弄懂響應式佈局首先得知道viewport的概念。viewport就是瀏覽器顯示頁面內容的屏幕區域。
視口又可分爲佈局視口，視覺視口，理想視口。
一、viewport
視覺視口：各大網站在初期爲了適應手機，給手機端默認視口寬度設爲980px。這樣原來是電腦上的佈局爲了能在在手機上顯示就會自動壓縮。同時網站上的字就會變得十分模糊。來看看典型的栗子
如果在手機上就會變成這樣
視覺視口：pc端網頁還是保持原來的尺寸大小。移動端能看到的網頁的部分就是視覺視口。同樣是以百度首頁爲栗子
在移動端能看到的部分，也就是上面的圖，就是視覺視口。
再來看看理想視口，它是pc端的網頁在手機端的最佳佈局方式。各大主流網站都做了移動端的適配，所以同樣以百度爲例。
上面展示的就是理想視口。
爲了能讓網頁在移動端都以理想視口的方式佈局。我們需要用到meta標籤，它會通知瀏覽器以設備的寬度來呈現網頁。如果加上了meta標籤，佈局視口的寬度就以設備寬度爲準，而不是固定以980px。設備寬度爲1000px，佈局視口寬度就是1000px，設備是200px，佈局寬度就是200px。
二、meta標籤
來正式的看一看神奇的meta標籤。
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
再看看百度的實際應用
三、px單位
物理像素和物理像素比：
物理像素和設備的分辨率有關。我們知道分辨率越高，屏幕上的顯示就會更清晰。物理像素是設備一出廠就規定好了的。如果用ps打開一張圖片，經過無限放大之後看到的那一個個的小格子，就是1像素.
px單位是css中的單位，它指的是css像素，1css像素=物理像素/分辨率。
如果設計師給了你一份750px*1080px的視覺稿，佈局視口之前已經提過是980px。此時在pc端中 1css像素=750/980=0.76px，移動端（以iPhone6爲例）1css像素=750/375=2px。這裏看出，在pc端中1像素==0.76個物理像素，在iPhone6中1css像素==2物理像素。這樣就會造成單位的不統一，從而造成視覺效果的不統一。
常見移動式佈局解決方案
媒體查詢：
@media screen and (max-width: 960px){
body{
background-color:#FF6699
}
}
@media screen and (max-width: 768px){
body{
background-color:#00FF66;
}
}
@media screen and (max-width: 550px){
body{
background-color:#6633FF;
}
}
@media screen and (max-width: 320px){
body{
background-color:#FFFF00;
}
}
上述的代碼通過媒體查詢定義了幾套樣式，通過max-width設置樣式生效時的最大分辨率，上述的代碼分別對分辨率在0～320px，320px～550px，550px～768px以及768px～960px的屏幕設置了不同的背景顏色。
使用百分比佈局（流式佈局）
百分比佈局，很好理解。但是問題是百分比是相對於誰的百分比。
參考文檔：https://github.com/forthealllight/blog/is80sues/13 這裏有很詳細的介紹
使用rem單位
rem單位在某種程度上保持了單位的一致性。無論嵌套的有多深，它始終以html根元素的字體大小爲標準1rem=16px