面试官：px和rem和em的区别是什么

暑假实习面试被问到了这个，rem和em记反了，现在重温一下

px

px是像素，显示器上呈现画面的像素，是绝对长度单位

em

em是相对单位，相对于父元素的字体尺寸(如果父元素没有设置font-size默认1em=16px)，如果父元素没有就在body

为了更方便计算，可以在body里面声明font-size=62.5% 。这样16*62.5%=10

body {
  font-size: 62.5%;/* 根元素的 font-size */
}

em还会形成一个层层嵌套的效果。（如果还有孙子就20×2×…）

.parent{
  font-size: 20px;
}

.child{
  font-size: 2em;
}

<div class="parent">
  I'm parent div set to 20px
  <div class="child">
    I'm the child div set to 2em, i.e 40px.
  </div>
</div>

rem

rem 是相对单位，相对于html根元素font-size的值(r开头root，可以这样记忆)，默认1rem=16px，rem围绕html根元素

html{ font-size: 30px; } 
.child-2{ font-size: 2rem; // 30*2 = 60 }