em和rem的理解

最新推荐文章于 2025-06-29 18:11:31 发布

原创最新推荐文章于 2025-06-29 18:11:31 发布 · 573 阅读

0 ·

CC 4.0 BY-SA版权

本文为博主原创文章，转载请注明出处。

文章标签：

#rem #em

前端专栏收录该内容

72 篇文章

订阅专栏

之前对于这个内容有点模糊，现在总结一下。

em是根据父类的大小调整，根据代码举例说明

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		body{
			font-size: 100%;
		}
		#parent{
			font-size: 1.1em;
		}
		#child{
			font-size: 2em;
		}
		#div2{
			font-size: 2em;
		}
	</style>
</head>
<body>
	<div id="parent">
		parent
		<div id="child">child</div>
	</div>
	<div id="div2">div2</div>
</body>
</html>

我们设置body的字体为100%，也就是默认字体16px
parent的字体大小为1.1em，也就是默认字体的1.1倍大小

div2的字体大小为2em，也就是默认字体的2倍大小

对于child的字体大小，当然不是默认字体的2倍大小。因为em只是根据自己的父类调整，并不是祖先类。所以child的字体大小为父类的两倍，也就是2.2em。也就是默认字体的2.2倍大小。效果图如下：