rem与em的区别及rem的js算法

来源：互联网发布：剑三男神脸数据花哥编辑：程序博客网时间：2024/06/15 16:25

1.rem与em的区别

em 是一个参照自身字体的是一个单位，先去找自身的字体大小，如果自身没有字体大小，找父元素；rem是一个参照html字体大小的一个单位。

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>html {font-size: 20px;}.box {font-size: 10px;}span {font-size: 2rem;  /*font-size: 2em;*/width: 2rem;      /*width: 2em;*/display: block;}</style></head><body><div class="box"><span>say lalalalalalalala</span></div></body></html>

上述代码中，当span的font-size和width的单位是rem时，参照的是html字体大小，故其值为2*20px；当span的font-size和width的单位是em时，参照的是父元素box字体大小，故其值为2*10px。

2.rem的js算法

比例公式：设计图的宽度/自己针对这个设计自定义的font值 = 不断变化的屏幕宽度/这个屏幕对应的font值；

阅读全文

0 0