rem和em的区别之面试题解析

最新推荐文章于 2022-09-24 19:59:01 发布

玛已

最新推荐文章于 2022-09-24 19:59:01 发布

阅读量241

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_41028148/article/details/108448800

版权

前端专栏收录该内容

22 篇文章 1 订阅

订阅专栏

rem和em的区别之面试题解析

前言
rem和em的区别

前言

现在的项目大多需要多端应用，故而传统的pc端网页应用若是应用到移动端面临的主要问题就是自适应；通常布局自适应解决方案有很多种；flex布局是目前应用最为广泛的布局，然后就是字体的大小也需要根据终端分辨率的大小来进行改变，css3出来之前使用的字体单位是px和em，css3中引入的rem则为移动端字体自适应带来了极大的便利

rem和em的区别

em是相对长度单位，相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸，会继承父元素的字体大小
例如：

	<div id="parent" style="font-size:12px;">
		<div id="child" style="font-size:2em"></div>
	</div>
	
	则child的font-size为24px

rem是css3中的新属性，是相对长度单位，是相对于HTML根元素
优点：rem可以通过只修改根元素的字体大小就可以调整所有元素的字体大小
例如：

<html style="10px">
	<body id="root" style="12px">
		<div id="parent" style="font-size:14px;">
			<div id="child" style="font-size:2rem"></div>
		</div>
	</body>
</html>

	则child的font-size为20px