首先來看，什麽是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。

web前端課程技術分享之關於rem布局和vw布局的理解