文章内容
2022/8/4 18:47:25,作 者: 黄兵
css rem 理解
最近编写前端组件的时候，由于组件的字体大小使用的是 rem，导致组件在不同模板之间显示的样式不一样。
之后详细了解了 rem 单位，总结如下：
概括地说，rem 单位的意思是“根元素的字体大小”。
概括地说，在排版属性中 em 单位的意思是“父元素的字体大小”。
也就是 rem 是从 <html> 获取字体的大小，而 em 是从父元素获取字体的大小。
下面是做的一个示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
html {
font-size: 16px;
}
.container p {
font-size: 1.5rem;
}
.container-em {
font-size: 12px;
}
.container-em p {
font-size: 1.5em;
}
</style>
</head>
<body>
<div class="container">
<p>这是 24 px 字体大小。</p>
</div>
<div class="container-em">
<p>这是 18px 字体大小。</p>
</div>
</body>
</html>
我们看一下执行效果：
通过👆动图可以看出第一行字体大小是 24px，而第二行字体大小是18px。
首先定义了 <html> 字体大小是：16px，而 container 里面的 p 是 1.5rem，则：16x1.5=24，所以是 24px 大小。
container-em 定义字体大小是 12px，container-em p 的大小是：12x1.5=18，所以是 18px。
总结
rem 字体的大小是根据 <html>字体大小计算得来，而 em 是根据父元素字体大小计算得来。
黄兵个人博客原创。
转载请注明出处：黄兵个人博客 - css rem 理解
评论列表