通過rem來實現響應式佈局：

首先來看，什麼是rem單位。rem是一個靈活的、可擴充套件的單位，由瀏覽器轉化畫素並顯示。與em單位不同，rem單位無論巢狀層級如何，都只相對於瀏覽器的根元素（HTML元素）的font-size。預設情況下，html元素的font-size為16px，

rem單位都是相對於根元素html的font-size來決定大小的,根元素的font-size相當於提供了一個基準，當頁面的size發生變化時，只需要改變font-size的值，那麼以rem為固定單位的元素的大小也會發生響應的變化。 因此，如果通過rem來實現響應式的佈局，只需要根據檢視容器的大小，動態的改變font-size即可。

 rem2px和px2rem：

如果在響應式佈局中使用rem單位，那麼存在一個單位換算的問題，rem2px表示從rem換算成px，這個就不說了，只要rem乘以相應的font-size中的大小，就能換算成px。更多的應用是px2rem，表示的是從px轉化為rem。

比如給定的視覺稿為750px（物理畫素），如果我們要將所有的佈局單位都用rem來表示，一種比較笨的辦法就是對所有的height和width等元素，乘以相應的比例，現將視覺稿換算成rem單位，然後一個個的用rem來表示。另一種比較方便的解決方法就是，在css中我們還是用px來表示元素的大小，最後編寫完css程式碼之後，將css檔案中的所有px單位，轉化成rem單位。

rem 佈局的缺點：

通過rem單位，可以實現響應式的佈局，特別是引入相應的postcss相關外掛，免去了設計稿中的px到rem的計算。rem單位在國外的一些網站也有使用，這裡所說的rem來實現佈局的缺點，或者說是小缺陷是：在響應式佈局中，必須通過js來動態控制根元素font-size的大小。也就是說css樣式和js程式碼有一定的耦合性。且必須將改變font-size的程式碼放在css樣式之前。

通過vw來實現自適應

什麼是vw？

css3中引入了一個新的單位vw，與檢視視窗有關，vw表示相對於檢視視窗的寬度，除了vw，還有vmin和vmax兩個相關的單位。各個單位具體的含義如下：

單位含義vw相對於視窗的寬度，視窗寬度是100vw相對於視窗的高度。

vw和%的區別為：

單位含義%大部分相對於祖先元素，也有相對於自身的情況（border-radius、translate等)vw/vh相對於視窗的尺寸

從對比中我們可以發現，vw單位與百分比類似，單確有區別，前面我們介紹了百分比單位的換算困難，這裡的vw更像"理想的百分比單位"。任意層級元素，在使用vw單位的情況下，1vw都等於檢視寬度的百分之一。

vw單位換算：

同樣的，如果要將px換算成vw單位，很簡單，只要確定檢視的視窗大小（佈局視口），如果我們將佈局視口設定成解析度大小，比如對於iphone6/7 375*667的解析度，那麼px可以通過如下方式換算成vw：

1px = （1/375）*100 vw

vw單位的相容性：

絕大多數的瀏覽器支援vw單位，但是ie9-11不支援，vw單位在絕大部分高版本瀏覽器內的支援性很好，但是opera瀏覽器整體不支援vw單位，如果需要相容opera瀏覽器的佈局，不推薦使用vw。