rem是怎么计算的

时间：2024-08-17 23:35:08

「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"

相关文章