Rem布局的原理解析

什么是em

rem和em很容易混淆，其实两个都是css的单位，并且也都是相对单位，先有的em，css3才引入的rem，在介绍rem之前，我们先来了解下em

em作为font-size的单位时，其代表父元素的字体大小，em作为其他属性单位时，代表自身字体大小——MDN

举例说明：

<div class="p1">
    <div class="s1">1</div>
    <div class="s2">1</div>
</div>
<div class="p2">
    <div class="s5">1</div>
    <div class="s6">1</div>
</div> 

.p1 {font-size: 16px; line-height: 32px;}
.s1 {font-size: 2em;}
.s2 {font-size: 2em; line-height: 2em;}

.p2 {font-size: 16px; line-height: 2;}
.s5 {font-size: 2em;}
.s6 {font-size: 2em; line-height: 2em;} 

答案：

先来看第一组的答案

p1：font-size: 16px; line-height: 32px
s1：font-size: 32px; li