REM方案总结

Posted 2021-02-10 xieqian

flexible.js方案

1、设置根元素字体大小为屏幕宽度的十分之一。
2、即根元素字体大小与屏幕宽度的比例为：1/10。

jQuery.weui的rem设计方案

1、以屏幕宽度375px为基础，根元素字体大小为20px。
2、大于375px的屏幕宽度，根元素字体大小等比例放大。
3、即根元素字体大小与屏幕宽度的比例为：20/375。

结合设计稿

由以上可总结得出计算设计稿rem值的通用公式：
REM方案根元素字体大小与屏幕宽度的比例 * 设计稿的宽度

结合Sass方案

可得出一个通用的计算函数：
~sass
@function px2rem($px) {
@return $px/(REM方案比例 * 设计稿宽度) * 1rem;
}
~