css: px转rem换算方法

设计图一般采用画布宽度为375px/750px/1125px三种尺寸，分别对应iOS下的@1x/@2x/@3x屏幕分辨率。

rem是根据html节点下的font-size定制的尺寸。

如果html{font-size: 16px},则1rem = 16px，假如设计图上有一个长宽都是100px的图片，
<img src='image.png' style={{width: 100px, height: 100px}}/>

将这张图片展示到宽度为375px的手机屏幕下，如果设计图尺寸越大，转换后的rem值越小

• 设计图为375px尺寸下，该图片转换为rem应该是<img src='image.png' style={{width: 6.25rem, height: 6.25rem}}/>

• 设计图750px尺寸下，该图片转换为rem应该是<img src='image.png' style={{width: 3.125rem, height: 3.125rem}}/>

• 设计图1150px尺寸下，该图片转换为rem应该是<img src='image.png' style={{width: 2.08333rem, height: 2.08333rem}}/>

总结换算方法：

rem值 = width / fontSize / 画布倍数

例如上面的例子

• 375px尺寸，width = 100px / 16px / 1
• 750pxpx尺寸，width = 100px / 16px / 2
• 1150px尺寸，width = 100px / 16px / 3

注意：

我们一般不会将html的font-size固定为16px,而是选择html{ font-size: 62.5%; }

因为一般浏览器将font-size定义为16px，可以计算得 16px * 62.5% = 10px

这样就可以使用十进制进行px-rem换算了，

例如上面的例子，如果设计稿是750px尺寸，则rem值= 100px / 10 / 2,结果为5rem

如何适配不同的尺寸

根据上面的计算方法我们得出适配方法，我们得出iOS屏幕宽度与fontSize的比值为23.4375(其实就是375px / 16px)

我们假设，屏幕尺寸宽度为W,屏幕宽度与字号比值23.4375,

为了便于设计稿转换rem值，我们需要将浏览器默认的font-size: 16px改为font-size: 10px，就要乘以0.625倍

因此要设置html的fontSize为fontSize = W / 23.4375 * 0.625

在js中添加如下方法即可

<script>
    document.documentElement.style.fontSize = (document.documentElement.offsetWidth / 23.4375 * 0.625) +'px';
</script>

参考文献：

• 移动端rem 适配方案