这次我好像才真的明白了CSS Rem字体计算的原理

背景

如何按照设计稿中标注的尺寸，直接写页面的样式，不再需要px2rem这样的工具或者人工转换 ? 只要你明白了rem的计算原理，这个问题的答案超级简单。

根字体大小计算核心原理

设备的根字体大小 * 全屏比例值 =  设备的宽度

设计稿的根字体大小 * 全屏比例值 = 设计稿的宽度

这两个等式中的全屏比例值相等的条件下，在真实设备上可以高保真地还原设计稿。

实战一下

找了一个蓝湖的设计稿，蓝湖的设计稿宽度是750px,默认根字体大小是50px。

50px * 全屏比例值 = 750px，这个全屏比例值是15rem

看一段项目中真实设备的根字体计算代码。真实设备的屏幕宽度是375px,  该公式假设的设计稿根字体大小是100px, 为什么取100px, 可能是为了计算方便,   按照这样的前提，计算出来当真实设备根字体大小是50px的时候，能高保真还原宽度是750px,根字体大小是100px的设计稿

window.scale = document.documentElement.clientWidth / 750;
// 动态设置html的font-size
document.querySelector('html').style.fontSize = `${parseInt(100 * window.scale, 10)}px`;

按照上面我们总结的公式，50px * 全屏比例值 = 375px  真实设备的全屏比例值是7.5rem，而设计稿全屏比例值是15rem,  全屏比例值不相等。所以在写页面的样式的时候，没法直接按照设计稿上标注的尺寸写。

如何调整?

按照根字体大小计算公式，要么设计稿的根字体大小适配代码中的设定的设计稿根字体, 要么代码中的设定的设计稿根字体适配设计稿中的根字体。两者不能脱节。相对而言，调整设计稿的根字体大小更合理，频繁修改代码中预设的根字体大小，不可取。

提炼

如果真实设备的全屏尺寸不是375px, 而是下面这些，那么真实设备的根字体如何计算。以320px宽度的设备为例，

设备根字体大小 * 同等全屏比例值 = 320px

设计稿的根字体大小 * 同等全屏比例值 = 750px       

设计稿的根字体大小是100px，全屏比例值计算出来是7.5

那么320px的设备，根字体大小应该为 320 ÷ 7.5 ≈ 42.66px

 由计算原理可知，只要针对某一种机型做好设计稿的适配， 在其它机型上，设计稿肯定也是按等比例展示的。推荐使用375px的设备宽度与设计稿进行适配，计算方便。

容易混淆的地方

1.不理解代码中计算真实设备的根字体大小时，为什么要乘以100，对于根字体计算预设的条件，不明原理。

2.容易跟dpr(设备像素比)混淆在一起，牵强地解释根字体的计算，有碍对根字体计算的理解。dpr是逻辑像素和真实物理设备像素之间的对应关系，dpr引发的问题是在css中明明写的边距宽度是1px, 在设备上看起来比较粗，好像有2~3px那么宽。可通过脚本设置dpr或者transform: scale+伪元素的方式修正。