rem是怎么計算的

「rem」是指根元素（root element，html）的字體大小，從遙遠的 IE6 到版本到 Chrome 他們都約好了，根元素默認的 font-size 都是 16px。

rem是通過根元素進行適配的，網頁中的根元素指的是html我們通過設置html的字體大小就可以控制rem的大小；

所以1rem*16(這個是html的fontsize)=16px;

2rem*16=32px;

要想讓rem和px成100倍的關系，即1rem*100=100px；則html的字體大小就應該是100px；

所以我們一般在js中做判斷：

<script>
        (function(){var a=document.documentElement.clientWidth||document.body.clientWidth;if(a>460){a=460}else{if(a<320){a=320}}document.documentElement.style.fontSize=(a/7.5)*1+"px"})();
</script>

如果是750px的設計稿，但是手機是375px的屏幕：

對應750的設計稿                              視覺稿測量100px-->1rem

375屏幕手機（是750的一半）　　  頁面顯示為  50px-->1rem

所以1rem和px對應關系是 50倍 對於 ： 屏幕寬度/7.5=375/7.5=50px ；

這樣1rem*50=50px（50px是375屏幕上的長度，相當於750上的100px）；

============================================================

如果是375px的設計稿，手機是375px的屏幕：

對應375的設計稿                              視覺稿測量100px-->1rem

375屏幕手機                            　　  頁面顯示為 100px-->1rem

所以1rem和px對應關系是100倍 對於：  （屏幕寬度/7.5）*2=（375/7.5）*2=100px ；

這樣1rem*100=100px（100px是375屏幕上的長度，相當於350上的100px）；

============================================================

綜上所述，對於750的設計稿，375的手機和設計稿是50%的關系，所以設計稿上100px，

對應着375手機上的50px；也就是1rem對應着50px；

document.documentElement.style.fontSize=(a/7.5)*1+"px"

對於375的設計稿，375的手機和設計稿是100%的關系，所以設計稿上100px，

對應着375手機上的100px；也就是1rem對應着100px；

document.documentElement.style.fontSize=(a/7.5)*2+"px"