rem和em的区别

最新推荐文章于 2023-08-17 02:07:31 发布

枫叶在飘呀

最新推荐文章于 2023-08-17 02:07:31 发布

阅读量4.1k

点赞数 6

分类专栏： web前端知识文章标签： css3 css

本文链接：https://blog.csdn.net/ld16631069828/article/details/119078593

版权

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

15 篇文章 2 订阅

订阅专栏

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>

在这里插入图片描述

枫叶在飘呀

关注

6
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
rem和em的区别

rem和em区别在介绍两者区别前，先说一下rem具体是什么？有什么含义。首先：rem全称（font size of the root element）（根元素的字体大小）它是css3新增的尺寸（度量单位），根节点（html）的font-size决定了rem的尺寸单位，也就是所它是一个相对的单位。rem是一个相对长度单位。相对于父元素的倍数来计算。浏览器默认字体大小是16px,1rem就是16px.rem可以应用到什么场景？可以用来做web app屏幕适配，因为不同手机型号的屏
复制链接

扫一扫