02-em&rem

七色的天空

已于 2023-11-30 02:38:38 修改

阅读量329

点赞数 4

分类专栏： 07_移动端文章标签：移动端

于 2023-11-30 02:27:04 首次发布

本文链接：https://blog.csdn.net/q506174602/article/details/134702606

版权

07_移动端专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>rem</title>
	<style type="text/css">
		html, body {
			font-size: 62.5%;
		}
		.wrap {
			position: absolute;
			/*width: 200px;
			height: 200px;*/
			top: 0;
			left: 0;
			bottom: 0;
			right: 0;
			background-color: orange;
		}
		.title {
			width: 100%;
			height: 9.8rem;
			font-size: 3.2rem;
			line-height: 9.8rem;
			text-align: center;
			background-color: red;
		}
		.title span {
			font-size: 3.2rem;
		}


		
		.content {
			font-size: 1.2em;
		}
		.content p {
			/* 1.2 * 1.2 = 1.44 */
			font-size: 1em;
		}
	</style>
</head>
<body>
	<!--  
		css中常用的长度单位: px em rem
		--px: 是固定的像素, 一旦设置了就无法因为适应页面大小而改变
		--em: 是相对长度单位,相对于当前对象内文本的字体尺寸
			em的值并不是固定的,会继承父级元素的字体大小.
			任意的浏览器默认字体高都是16px;
			[所有未经调整]的浏览器都符合: 1em=16px; 12px === 0.75em; 10px === 0.625em;
			为了简化font-size的换算, 需在css中的body选择器中声明 font-size=62.5%
			16px * 62.5% = 10px; 12px=1.2em; 10px=1em;
			将原来的px数值除以10,然后换上em作为单位就行了.
		--rem: 是css3中新增的一个相对单位 (root em 根em)
			与em的区别?区域在于使用rem为元素设定字体大小时,仍然是相对大小,且相对的只是HTML根元素.(>IE8)
			好处: 既可以做到只修改根元素就能成比例的调整所有字体大小, 又可以避免字体大小被逐层符合产生的连锁反应
	-->
	<div class="content">
		<p></p>
	</div>


	<div class="wrap">
		<div class="title">
			首页
			<span>首页</span>
		</div>
	</div>
</body>
</html>

em 和 rem 都是用于设置字体大小的单位，但它们之间有一些区别。

em 单位是相对于其父元素的字体大小来计算的。例如，如果一个段落的字体大小为 16 像素，而其中的某个子元素设置了 1.5em 的字体大小，则该子元素的实际字体大小将为 24 像素（1.5 * 16）。

rem 单位是相对于根元素（通常是 <html> 元素）的字体大小来计算的。这意味着无论嵌套层级如何变化，rem 单位始终参考的是相同的基准字体大小。例如，如果根元素的字体大小为 16 像素，一个元素设置了 1.5rem 的字体大小，则该元素的实际字体大小将为 24 像素（1.5 * 16）。

因为 em 单位是相对于父元素的字体大小来计算的，所以在存在多层嵌套的情况下可能会导致字体大小累加或递减的问题。而 rem 单位则避免了这个问题，因为它始终参考的是根元素的字体大小。

使用 rem 单位可以更方便地调整整个页面的字体大小。只需要改变根元素的字体大小，页面中所有使用 rem 单位设置的字体大小都会按比例改变。这对于响应式设计和可访问性非常有用。

所以，总结一下，em 和 rem 都是相对单位，但 em 是相对于父元素字体大小计算的，而 rem 是相对于根元素字体大小计算的，并且 rem 更适用于响应式布局和全局字体大小调整。