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
