rem和em的区别

最新推荐文章于 2025-01-14 16:29:06 发布

原创最新推荐文章于 2025-01-14 16:29:06 发布 · 4.4k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#css3 #css

web前端知识专栏收录该内容

15 篇文章

订阅专栏

rem和em区别

在介绍两者区别前，先说一下rem具体是什么？有什么含义。

首先：rem全称（font size of the root element）（根元素的字体大小）
它是css3新增的尺寸（度量单位），根节点（html）的font-size决定了rem的尺寸单位，也就是所它是一个相对的单位。
rem是一个相对长度单位。相对于父元素的倍数来计算。
浏览器默认字体大小是16px,1rem就是16px.

rem可以应用到什么场景？

可以用来做web app屏幕适配，因为不同手机型号的屏幕大小不同，所以这时候我们就不能用px(固定单位)，rem是不同手机屏幕适配的一种方案。

具体演示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>rem和em的区别</title>
		<style type="text/css">
			html {
				font-size: 12px;
			}

			.p1{
				font-size: 16px;
			}
			.p2
			{
				font-size: 1.5rem;
			}
		</style>
	</head>
	<body>
		<p class="p1">
			我是文字大小是16px
		</p>
		<p class="p2">
			我是使用rem单位的文字  大小是1.5rem = 1.5 X 12 = 18px
		</p>
	</body>
</html>

在这里插入图片描述

下面在数一下em具体是什么

首先 em是相对于父元素的字体大小来变化的
2.跟rem相比em有局限性，因为em只能相对父级文字大小变化，而rem是相对于根元素大小变化的。

具体演示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>rem和em的区别</title>
		<style type="text/css">
			.father
			{
				font-size: 16px;
			}
			p
			{
				font-size: 2em;
			}
		</style>
	</head>
	<body>
		<div class="father">
			123
			<p>
				我是子元素,相对父元素大小就是2 X 16 = 32px
			</p>
		</div>
	</body>
</html>

在这里插入图片描述