由於裝置的解析度不同，我們就用響應式布局來解決裝置解析度不同的問題，常見的解決方法有px視口、**查詢、百分比、rem、和vw/vh等方法來實現響應式布局。接下來介紹下個種方法。
一、px和視口
布局視口定義了pc網頁在移動端的預設布局行為，因為通常pc的解析度較大，布局視口預設為980px。也就是說在不設定網頁的viewport的情況下，pc端的網頁缺省會以布局視口為基準，在移動端進行展示。因此我們可以明顯看出來，預設為布局視口時，根植於pc端的網頁在移動端展示很模糊。
視覺視口表示瀏覽器內看到的**的顯示區域，使用者可以通過縮放來檢視網頁的顯示內容，從而改變視覺視口。視覺視口的定義，就像拿著乙個放大鏡分別從不同距離觀察同乙個物體，視覺視口僅僅類似於放大鏡中顯示的內容，因此視覺視口不會影響布局視口的寬度和高度。
理想視口或者應該全稱為「理想的布局視口」，在移動裝置中就是指裝置的解析度。換句話說，理想視口或者說解析度就是給定裝置物理畫素的情況下，最佳的「布局視口」。
解析度和物理畫素之間的聯絡
css畫素 = 物理畫素/解析度
二、**查詢
使用@media**查詢可以針對不同的**型別定義不同的樣式，特別是響應式頁面，可以針對不同螢幕的大小，編寫多套樣式，從而達到自適應的效果。
@media screen and (max-width: 960px)
}@media screen and (max-width: 768px)
}@media screen and (max-width: 550px)
}@media screen and (max-width: 320px)
}
四、自適應場景下的rem
rem單位是乙個靈活的、可擴充套件的單位、與em不同。rem無論巢狀多少層，只相對根源素的font-size，預設大小是12px，所以1rem=12px;
通過rem布局，我們只需要動態的改變font-size的大小即可。
rem布局的缺點：
在響應式布局中必須通過js來動態控制根元素font-size的大小。
五、 vw/wh實現自適應
1）什麼是vw/vh
ss3中引入了乙個新的單位vw/vh，與檢視視窗有關，vw表示相對於檢視視窗的寬度，vh表示相對於檢視視窗高度，除了vw和vh外，還有vmin和vmax兩個相關的單位。
vw:相對於視窗的寬度，寬度為100vw
vh:相對於視窗的高度，高度為100vh
vmin:vw和vh中的較小值
vmax:vw和vh中的較大值
2）vw單位換算
如果要將px換算成vw單位，很簡單，只要確定檢視的視窗大小（布局視口），如果我們將布局視口設定成解析度大小，比如對於iphone6/7 375*667的解析度，那麼px可以通過如下方式換算成vw：1px=(1/375)*100vw
也可以通過postcss的相應外掛程式，預處理css做乙個自動的轉換，postcss-px-to-viewport可以自動將px轉化成vw。
3）vw/vh單位相容性
絕大多數瀏覽器支援vw單位，單ie11並不支援，因此有一定的侷限性。
常見的響應式布局方式
布局型別 在談響應式布局前，我們先梳理下網頁設計中整體頁面排版布局，常見的主要有如下幾種型別 布局實現 採用何種方式實現布局設計，也有不同的方式，這裡基於頁面的實現單位而言，分為四種型別 固定布局 可切換的固定布局 彈性布局 混合布局。固定布局 以畫素作為頁面的基本單位，不管裝置螢幕及瀏覽器寬度，只...
面試常見css布局以及解決方法
結構 class box class son div div box son box son box son box son 結構 class box1 div class box2 div box1 box2 class box class box1 div class box2 div div ...
響應式布局方法總結
定義 響應式布局指的是同一頁面在不同螢幕尺寸下有不同的布局。傳統的開發方式是pc端開發一套，手機端再開發一套，而使用響應式布局只要開發一套就夠。優點面對不同解析度裝置靈活性強 能夠快捷解決多裝置顯示適應問題 缺點僅適用布局 資訊 框架並不複雜的部門型別 相容各種裝置工作量大，效率低下 累贅，會出現隱...