关于rem和em的理解

Posted 2021-02-02 xiao-xiang77

rem是基于html定义的字体大小而决定，而em则根据使用它的元素的大小决定，很多人错误认为是根据父类元素，实际上是使用它的元素继承了父类的属性才会产生的错觉。

如何运用rem？

例如：在项目的公共样式文件初始化设置（屏幕大小对应的字体大小可以自行设置）

html {

font-size:16px;

}

@media(max-width:320px){

html{font-size:12px;}

}

@media(min-width:365px){

html{font-size:20px;}

}

 

然后在下面比如设置p标签的字体大小：

p{

font-size:2rem;

}

如果移动端屏幕最大是320px，那么p标签的字体大小就是12*2=24px；如果移动屏幕最小是365px，那么p标签的字体大小是20*2=40px

 

如何使用em？

em单位转为像素值，取决于他们使用的字体大小。此字体大小受父元素继承过来的字体大小，除非显式重写一个具体单位。

当使用em单位是，像素值将是em值乘以使用em单位的元素的字体大小。

例如：一个div有18px字体大小，10em将等同于180px；如果这个div包裹着p标签，设置p标签的字体大小是1.25em，那么该p标签的字体大小是18*1.25=22.5px。如果不想继承父级元素，可以显式设置p标签字体大小或者间距的固定值去覆盖。

如果没有设置HTML字体大小，那会直接用浏览器默认的字体大小。

 

总结：

不要在多列布局中使用em和rem，改用%；

不要使用em或rem，如果缩放会不可避免地导致打破布局元素；

媒体查询时使用rem