一、rem和px轉(zhuǎn)換原理：
1草娜、若元素的寬度使用rem為單位羞迷，該元素在瀏覽器頁面中的實際寬度單位為px号醉，寬度的值計算公式為：
比如：
最終在瀏覽器加載頁面后div的寬度為：20 * 0.5=10px
那么反過來，css中元素的rem值的計算公式也就是：
可以理解為css中元素rem的值實際就是瀏覽器頁面中元素的px值與html的font-size的px值的比例蚂斤。
2存捺、使用了rem為單位的元素都會根據(jù)html的font-size的值計算盒模型的尺寸（px單位），當(dāng)改變html的font-size曙蒸，所有使用了rem的元素的也跟著重新計算捌治。例如：原本頁面html的font-size大小為17.664px
在控制臺中直接將html的font-size設(shè)置為40px后，使用了rem的元素都重新計算纽窟，尺寸也變大肖油，對比上圖頁面樣式變化如下：
3、開發(fā)時臂港，UI稿上元素的px值森枪，在css中為多少rem？
假設(shè)：設(shè)計稿寬度為375px趋艘，設(shè)計稿上的元素尺寸為20px疲恢，屏幕寬度為375px（也就是設(shè)計稿與屏幕1:1），?
在css文件中若將html的font-size為37.5px瓷胧，那么根據(jù)第1點中提到的 rem計算公式显拳，到css文件中元素的寬度值為：20 / 37.5 rem。
但實際中手機屏幕寬度不只有375px這一個尺寸搓萧，那要怎么做的手機屏幕比較寬時杂数，元素的寬度按比例變寬呢宛畦？
4、根據(jù)屏幕的寬度與設(shè)計稿的比例揍移，計算不同寬度屏幕下html的font-size次和，屏幕寬度變大或者變小，html的font-size按比例變大變小那伐，使用了rem為單位的元素的寬度踏施，也會隨著html的font-size的變化而變化。
根據(jù)屏幕寬度與設(shè)計稿的比例罕邀，計算html的font-size
設(shè)計稿寬度px? /? 屏幕的寬度px? =? ?與設(shè)計稿等寬時的html的fontsize? /? x
與設(shè)計稿等寬時的html的fontsize：可以自己設(shè)定畅形，最好選擇比較好計算的37.5px
x ：就為 不同屏幕寬度對應(yīng)的html的font-size的值
js代碼：
二、問題情景：
加載頁面瞬間有一個縮放的過程诉探，問題出現(xiàn)的原因：
（1）首先瀏覽器加載css日熬，加入css中將html元素的fontsize設(shè)置為16px。
然后在去加載后面的dom元素肾胯，這時瀏覽器按照html的16px竖席，計算dom元素單位為rem的樣式屬性的px值，渲染一遍dom元素敬肚。
（2）瀏覽器執(zhí)行到我們加的計算html font-size的js代碼毕荐，綁定了DOMContentLoaded 事件，在dom加載完成觸發(fā)事件監(jiān)聽器又將html的font-size設(shè)置為22.08px帘皿。
瀏覽器會根據(jù)這個值又重新計算所有dom元素使用了rem的樣式屬性东跪，導(dǎo)致了重繪，才會有加載頁面瞬間縮放的現(xiàn)象鹰溜。
解決辦法
（1）在head中立即執(zhí)行將js計算html元素font-size的方法recalc
分析：加載完css文件虽填，css文件中將html元素的font-size設(shè)置為16px后，在head中立即執(zhí)行recalc方法（此時dom元素還沒有加載）曹动，將html元素的font-size設(shè)置為22.08px斋日，等到加載渲染dom元素時，是按照最終的22.08px計算單位為rem的樣式屬性墓陈，就不會在出現(xiàn)上面縮放現(xiàn)象恶守。
番外一：
如果仍保留在DOMContentLoaded事件中執(zhí)行recalc方法，但是把css文件中html的font-size設(shè)置為與UI稿中的大小相近（37.5px）贡必，縮放現(xiàn)象也會改善兔港，但是這樣只能保證與UI稿尺寸一致的屏幕。
番外二：
異步圖片仔拟，加上占位尺寸衫樊，否則會影響到后面的dom元素，圖片加載前、后科侈，圖片后面的元素會重新計算位置载佳，影響性能。
三臀栈、某些瀏覽器rem計算不準(zhǔn)確的問題
問題：存在部分安卓手機的部分瀏覽器（如小米qq蔫慧、魅族原裝、華為自帶瀏覽器等）存在rem計算有問題权薯，導(dǎo)致頁面元素整體寬度偏大與樣式不一致
解決方案一：
將寬度姑躲、邊距的rem修改為百分比或者考慮彈性盒布局，高度最好由被內(nèi)部元素?fù)伍_崭闲，否則也需要兼容高度的rem計算不準(zhǔn)確問題肋联。width: 5rem; 改為： width: 50%;
解決方案二：
根據(jù)不兼容的瀏覽器按照對應(yīng)比例縮小html 的font-size的大小，可以參考這篇文章的思路：
