em rem 相对单位

快乐的高兴的学习代码中

已于 2022-02-12 13:02:18 修改

阅读量353

点赞数

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

于 2021-06-27 21:42:45 首次发布

本文链接：https://blog.csdn.net/A123ppleQueen/article/details/118277414

版权

详细知识专栏收录该内容

45 篇文章 2 订阅

订阅专栏

绝对单位 px,就是说5px放在哪里都一样大。

1em=16px

但是em rem是相对单位，相对单位的值会根据外部因素发生变化。比如2em会根据它作用到的元素而变化。

因为网页响应式得特点，我们只能去学习css带来的抽象行

响应式

在css中指的是样式能根据浏览器窗口的大小有不同的响应

相对单位就是css用来解决这种抽象的工具。我们可以基于窗口大小来等比例的缩放字号，或者将网页山海关的任何元素都相对于基础字号来设置，然后只用更改一行代码就能缩放整个网页。

css长度单位

css支持几种绝对长度单位，最常见、最基础的是像素px.

不常见的绝对单位有mm毫米，cm厘米，in英寸，pt点（1/72英寸），pc(派卡，12点) 1in=25.4mm=2.54cm=6pc=72pt=96px 也就是说16px=12pt(16/96*72)

em是最常见的相对长度单位，适合基于特定的字号进行排版。在css中，1em等于当前元素的字号，其准确值为1em的div元素。

1em=16px

计算值

浏览器会根据相对单位的值计算出绝对值，称为计算值。

eg:这里设置内边距的值为1em,浏览器将其乘以字号，最终渲染为16px.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		.padded{
			font-size:16px;
			padding:1em;
			border:1px solid orange;
		}	
	</style>
	<body>
		<div class="padded">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis natus!</div>
	</body>
</html>

em定义一个元素的大小，然后只要改变字号就能整体缩放大小

练习2

当定义盒子的样式时，可以用em指定内边距和圆角。在指定字号，那么属性会随着字体一起缩放。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		.box{
			padding:1em;
			border-radius: 1em;
			background-color: lightblue;
			/* 设成行内块 */
		    display: inline-block; 	
		}	
		.box-small{
			font-size: 12px;
		}
		.box-large{
			font-size: 18px;
		}
	</style>
	<body>
		<!-- 注意：因为行内元素，所以设置宽高无效，margin设置左右有效，上下无效 -->
		<!-- 所以思路是把它变成块级元素，但是如果设成display:block ，那么它的样式会变 -->
		<!-- 所一设为行内块元素，既保持了原本的模样，又能让margin上下有效 -->
	<span class="box box-small">small</span>
	<span class="box box-large">large</span>
	</body>
</html>

font-size根据继承的字号来计算大小

em和font-size的大小转换

当两个大小要一致时，可以用x px/16=x em了

大多数浏览器默认字号为16px,准确的说，medium的关键字的值为16px

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		body{
			font-size: 20px;
		}
		.slogan{
			/* 计算方法 20/16=1.25em */
			font-size: 1.25em;
		}
	</style>
	<body>
		we love coffee
		<!-- 目标：slogan继承了body的字号 -->
		<p class="slogan">we love coffee</p>
	</body>
</html>

em的复杂之处：em同时用于字号和其他属性

这时，浏览器必须先计算字号，然后使用这个计算值去算出其余的属性值。这两类属性可以拥有一样的声明值，但是计算值不一样

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		body{
			font-size: 16px;
		}
		.slogan{
			/* 它的字体大小为19.2px ---计算值*/
			font-size:1.2em;
			/* 它的字体大小为23.04px  */
			/* 注意：这里的声明值算法是 1.2em=1.2*19.2=23.04px-----计算值 */
			padding:1.2em;
			background-color: #CCC;
		}
	</style>
	<body>
		we love coffee
		<!-- 目标：slogan继承了body的字号 -->
		<p class="slogan">we love coffee</p>
	</body>
</html>

字体缩小的问题

当em来指定多重嵌套的元素的字号时，就会产生意外的结果。

为了算出每个元素的准确值，需要知道继承的字号，如果这个值是在父元素上用em定义的，就需要知道父元素的继承值。以此内推，，就会沿着dom树一直往上查找。

当列表多级嵌套并且给每一级使用em定义字号时，就会发生文字缩小的现象。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		body{
			/* 字体基础大小32px */
			font-size: 32px;
		}
		ul{
			/* 注意.8为0.8 */
			/* 它的值应该是0.8乘以父元素的字号 */		
			font-size: .8em;
		}
	</style>
	<body>
		<ul>
			<!-- 他的字号为25.6px -----32*0.8-->
			<li>Top Level</li>
			<ul>
				<!-- 他的字号为20.48px -----25.6*0.8  -->
				<li>Second level</li>
				<!-- 他的字号 16.384px----  20.48*0.8  -->
				<ul>Third level</ul>
				<ul>
					<!-- 他的字号 16.384px----  20.48*0.8  -->
					<li>Fourth level</li>
				</ul>
			</ul>
		</ul>
	</body>
</html>

如果指定一个大于1em的字号，文字会逐渐增大。

如果指定一个等于1em的字号，这样顶部字号指定了，子级的字号时一样的

我们想要的是指定顶部的字号，然后保持子级的字号一致

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		body{
			font-size: 32px;
		}
		ul{
			font-size: .8em;
		}
		ul ul{
			font-size: 1em;
		}
	</style>
	<body>
		<ul>
			<!-- 25.6px  32*0.8-->
			<li>Top Level</li>
			<ul>
				<!-- 25.6px   32*0.8 -->
				<li>Second level</li>
				<!--25.6px   32*0.8 -->
				<ul>Third level</ul>
				<ul>
					<!-- 25.6px   32*0.8 -->
					<li>Fourth level</li>
				</ul>
			</ul>
		</ul>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		body{
			font-size: 32px;
		}
		ul{
			font-size: .8em;
		}
		ul ul{
			font-size: 2em;
		}
	</style>
	<body>
		<ul>
			<!-- 25.6px  32*0.8-->
			<li>Top Level</li>
			<ul>
				<!--51.2px   25.6*2-->
				<li>Second level</li>
				<!--102.4px  51.2*2 -->
				<ul>Third level</ul>
				<ul>
					<!-- 102.4px  51.2*2 -->
					<li>Fourth level</li>
				</ul>
			</ul>
		</ul>
	</body>
</html>

rem设置字号

当浏览器解析html文档时，会在内存中将页面的所有元素表示为Dom(文档对象模型)。它是一个树结构，其中每个元素都由一个节点表示。

元素是顶级（根）节点。它下面是子节点，

和再下面是逐渐嵌套的后代节点

在文档中，根节点是所有其他元素的祖先节点。根节点有一个伪类选择器（：root）,可以用来选中它自己。这个等价于类选择器html,但是html的优先级相当于一个类名，而不是一个标签。

rem是root em的缩写。rem不是相对于当前元素，而是相对于根元素的单位。不管在文档的什么位置使用rem,1.2rem都会有相同的计算值：1.2乘以根元素的字号。

因为相对根元素，所以所有字号始终一致，就算是嵌套列表也一样

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		:root{
			/* :root伪类等价于类型选择器html */
			/* 根元素的字号为浏览器默认的字号16px */
			/* 根元素上的em是相对于浏览器默认值的 */
			font-size:1em;
		}
		ul{
		
			font-size: .8rem;
		}
	</style>
	<body>
		<ul>
			<!-- 因为相对于根元素，所以所有字号始终一致，嵌套列表页也一样 -->
		<!-- 12.8px 0.8*16 -->
			<li>Top Level</li>
			<ul>
			<!-- 12.8px 0.8*16 -->
				<li>Second level</li>
				<!-- 12.8px 0.8*16 -->
				<ul>Third level</ul>
				<ul>
				<!-- 12.8px 0.8*16 -->
					<li>Fourth level</li>
				</ul>
			</ul>
		</ul>
	</body>
</html>

可访问性：对字号使用相对单位

有些浏览器给用户提供了两种方式来设置文字大小：缩放操作和设置默认字号。

按住ctrl+或ctrl-,用户可以缩放网页。

这种操作会缩放所有的字和图片，让网页整体放大或者缩小

在某些浏览器中，这种改变只会临时对当前标签页生效，不会将缩放设置带到新的标签页。

设置默认字号则不一样。不仅很难找到设置默认字号的地方（通常在浏览器的设置页），而且用这种方式改变字号会永久生效，除非用户再次修改默认值。

这种方式的缺点是，它不会影响用px或者其他绝对单位设置的字号。由于默认的字号对某些用户而言很重要，尤其是对视力受损的人，所以应该始终用相对单位或者百分比设置字号。

rem结合了px和em的优点，保存了相对单位的优势，又简单易用。

一般用rem设置字号，px设置边框，em设置其他大部分属性，尤其是内边距、外边距和圆角（不过我有时用百分比设置容器宽度）。

这样字号是可以预测的，同时还能在其他因素改变元素字号时，借助em缩放内外边距。

来自深入解析css