em与rem的区别

1 em

em简介

em一般是当前元素设置的字体大小的倍数
例如一个p段落设置font-size为16px, 那么 n em 就是 n*16 px

注意上述词语是一般
而如果设置当前font-size时也使用em
那么使用的是父元素的font-size

html标签如果设置font-size使用em
则使用的基准为浏览器默认字体大小

em的不足

考虑如下情况:

// html
<div id="father">
	<div id="son"></div>
</div>

// CSS
<style>
#father {
	font-size: 16px;
}

#son {
	font-size: 2em;
	padding: 2em;
}
</style>

那么son标签的padding为多少px?

答案是64px
先根据father的font-size(16px)确定son的font-size为2em(32px),
然后padding再依据son的font-size(32px)确定padding为2em(64px)

所以em在这种情况下使用容易导致混淆基准值
最好将使用了em的font-size写在首行并在旁边注释等价于多少px

再考虑下面情况:

<p>
    <div>
        <div>
            <div></div>
        </div>
    </div>
</p>
    

p {
    font-size: 16px;
}
div {
    font-size: 1.5em;
}

上面的div与p的font-size各自是多少呢?

<p>		16px
    <div>	24px
        <div>	36px
            <div>	54px
            </div>
        </div>
    </div>
</p>

对于这种直接对标签选择器且font-size中使用em的行为
当代码量多起来了的时候非常难以确定font-size的大小到底为多少
所以应当尽量避免这种写法

rem

为了弥补em的不足之处
设置了rem
rem即为 root em
顾名思义就是以根节点为基准然后乘以多少倍
解决了font-size使用em时以父节点的font-size为基准造成的问题

可以对根节点标签也就是html设置其font-size为多少em
然后后续使用相对的rem时就是按照html的font-size来计算