rem

• rem相对于根元素html的font-size大小

• 如下demo所示：html声明font-size,title和content的字体大小都是相对于html

<div class="item">
      <div class="title">title</div>
      <div class="content">content</div>
</div>

html {
  font-size: 40px;
}
.title {
  font-size: 1rem;
}
.content {
  font-size: 1.5rem;
}

效果截图如下

image

em

• em项目对于当前对象字体大小，行内元素字体大小继承父元素
• 如下demo:

<div class="item">
      <div class="title">
        title
        <span class="child">child</span>
      </div>
      <div class="content">
        content
        <div class="sub_child">sub_child</div>
      </div>
</div>

.item {
  font-size: 40px;
}
.title {
  /* font-size: 20px; */
  font-size: 20px;
}
.child {
  font-size: 0.5em;
}
.content {
  font-size: 1em;
}
.sub_child {
  font-size: 2em;
}

截图如下

image.png