rem 是相對文件根元素（html）字型大小的尺寸單位，當元素的尺寸或文字字號等使用 rem 單位時，會隨著根元素的 font-size 變化而變化，那麼在不同解析度的裝置下動態設定根元素的字型大小就可以實現頁面自適應。那麼如何動態設定呢，看到很多文章都講的是使用js獲取裝置螢幕尺寸來操作，而我在工作中一直使用的方法是通過設定文件根元素 font-size: calc(100vw/18.75) 來實現 rem 自適應。
以常見的750px的設計稿為例，如果想要規定1rem = 40px（基準值，後面會講到），便是設定 html { font-size: calc(100vw / 18.75) }
其中，100vw是裝置視口的總寬度，當裝置的寬與設計稿的等寬時，則此時有：
100vw = 750px => 1px = 100vw / 750
如果設定基準值為 1px，則 1rem = 1px，程式碼則是 html { font-size: calc(100vw / 750) }
但是一般不會設定為1px，而是設定10px、20px或者40px，即1 rem等於10px、20px 或者 40px ，以 1rem = 40px為例，則此時有：
40px = 40 * 100vw / 750 => 40px = 100vw / (750 /40) => 40px = 100vw / 18.75 即 1rem = 100vw / 18.75,所以設定 根元素字型大小為 calc(100vw / 18.75) 即可。
現在 750px的設計稿中有一個400*200的div元素，我們在樣式中如果寫
div {
width: 400px;
height: 200px;
}
那麼無論裝置的尺寸如何，這個元素的寬高始終都是固定的400*200，缺少靈活性，所以需要使用 rem 單位做自適應，現在設定文件根元素字型大小為 calc(100vw / 18.75) }，即 文件中 1rem = 100vw / 18.75 ，
div {
width: 10rem;
height: 5rem;
}
當螢幕尺寸為 750px時，該元素的寬為：
10rem = 10 * 100vw /18.75
=>10rem = 10 * 750px / 18.75
=>10rem = 10 * 750px / (750 / 40)
=>10rem = 400px
當螢幕尺寸為 375px時，該元素的寬為：
10rem = 10 * 100vw / 18.75
=>10rem = 10 * 375px / (750 / 40)
=>10rem = 200px
可以看到，元素尺寸隨著裝置尺寸的變化，同時發生了變化，這就是 rem 自適應的能力。
第一次看這個方法，會覺得有點繞，為什麼寫樣式的時候明明已經知道1rem等於多少px了，實際的rem卻不是我們寫樣式時用來換算的那個值呢？根據我的理解，寫樣式時換算用的1 rem = 40px，稱為基準值，先用這個基準值把設計稿的尺寸全部換算成單位為rem 的大小，然後當頁面渲染時，根元素的字型大小會決定樣式表生效時 1rem到底等於多少px，這時再把樣式中的尺寸換算成以px 為單位的值。而我們設定根元素的字型大小時假定的1rem = 40px，也是用於換算的基準值40px,並不是頁面渲染時1rem真的就等於 40px。
總結一下就是，在寫樣式時，我們不知道設計稿與實際顯示裝置的寬度關係，先假定設計稿與裝置同寬，此時我們需要一個基準值來將設計稿上元素的尺寸換算成rem,同時設定根元素字型大小時也使用該設計稿本身的寬和相同的基準值，即我們換算用40px,那麼在寫calc時也是40px，即：
100vw = 750px => 1px = 100vw / 750=> 40px = 40 * 100vw / 750
其中750是設計稿的寬，當設計稿是其它尺寸時，記得要換成設計稿對應的寬，如1920px。當裝置與設計稿不同寬時，通過rem會等比例變化元素的尺寸而自適應。
感覺自己懂了，但是寫出來又感覺沒講清楚，有待進一步學習。