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會等比例變化元素的尺寸而自適應。