CSS 单位-优快云博客

本文链接：https://blog.youkuaiyun.com/PSG_li/article/details/130814813

这篇文章详细介绍了CSS中的长度单位，包括绝对长度单位如px、cm、in等，以及相对长度单位如em、rem、vw等。重点讨论了px、em和rem的区别，强调了px作为固定像素单位在不同设备上的表现，em的相对字体大小特性，以及rem作为根元素字体大小的相对单位在响应式设计中的优势。同时，提供了示例代码来展示如何使用这些单位进行字体大小的设置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章の目录

正文

CSS 单位

CSS 有几种表示长度的不同单位。

许多 CSS 属性接受“长度”值，诸如 width、margin、padding、font-size 等。

长度是一个后面跟着长度单位的数字，诸如 10px、2em 等。

注：

数字和单位之间不能出现空格。但是，如果值为 0，则可以省略单位。
对于某些 CSS 属性，允许使用负的长度。
长度单位有两种类型：绝对单位和相对单位。

绝对长度单位

绝对长度单位是固定的，用任何一个绝对长度表示的长度都将恰好显示为这个尺寸。

不建议在屏幕上使用绝对长度单位，因为屏幕尺寸变化很大。但是，如果已知输出介质，则可以使用它们，例如用于打印布局（print layout）。

绝对长度单位

cm —— 厘米
nm —— 毫米
in —— 英寸（1in = 96px = 2.54cm）
px —— 像素（1px = 1/96th of 1in）
pt —— 点（1pt = 1/72 of 1in）
pc —— 派卡（1pc = 12pt）

注：

像素（px）是相对于观看设备的。对于低 dpi 的设备，1px 是显示器的一个设备像素（点）。对于打印机和高分辨率屏幕，1px 表示多个设备像素。

相对长度单位

相对长度单位规定相对于另一个长度属性的长度。相对长度单位在不同渲染介质之间缩放表现得更好。

相对长度单位

em —— 相对于元素的字体大小（font-size）（2em 表示当前字体大小的 2 倍）
ex —— 相对于当前字体的 x-height（极少使用）
ch —— 相对于 “0”（零）的宽度
rem —— 相对于根元素的字体大小（font-size）
vw —— 相对于视口宽度的 1%
vh —— 相对于视口高度的 1%
vmin —— 相对于视口较小尺寸的 1%
vmax —— 相对于视口较大尺寸的 1%
% —— 相对于父元素

注：

em 和 rem 可用于创建完美的可扩展布局。
视口（VIewport）= 浏览器窗口的尺寸。如果视口宽 50 厘米，则 1vw = 0.5cm。

px、em、rem 的区别

px

px，即像素（pixel）。绝对长度单位，但是也可以看作相对长度单位。像素 px 是相对于显示器屏幕分辨率而言的。

px 特点

IE 无法调整那些使用 px 作为单位的字体大小
国外的大部分网站能够调整的原因在于其使用了 em 或 rem 作为字体单位
Firefox 能够调整 px 和 em、rem，但是 96% 以上的中国网民使用 IE 浏览器（或内核）。

em

em 是相对长度单位。相对于当前对象内文本的字体尺寸。如果当前对象内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。

em 特点

em 的值并不是固定的
em 会继承父级元素的字体大小

使用

任意浏览器的默认字体大小都是 16px。所有未经调整的浏览器都符合：1em = 16px。那么 12px = 0.75em，10px = 0.625em。

为了简化 font-size 的换算，需要在 css 中的 body 选择器中声明 font-size = 62.5%，这就使 em 值变为 16px * 62.5% = 10px，这样 12px = 1.2em，10px = 1em，也就是说只需要将原来的 px 数值除以 10，然后换上 em 作为单位就可以了。

所以在写 CSS 的时候，需要注意：

body 选择器中声明 font-size = 62.5%
将原来的 px 数值除以 10，然后换上 em 作为单位
重新计算那些被放大的字体的 em 数值。避免字体大小的重复声明

实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			body {
				font-size: 62.5%;
			}
			
			p {
				font-size: 1.2em;
			}
			
			p>span {
				font-size: 1.2em;
			}
		</style>
	</head>
	<body>
		<p>
			Hello <span>World</span>
		</p>
	</body>
</html>

要想 p 和 span 中的字体大小都为 12px：在 p 中声明了字体大小为 1.2 em，那么在声明 span 中的字体大小时就只能是 1em，而不是 1.2em，因为 span 因继承 p 的字体大小而变为了 1em = 12px（如果设置为 1.2em：12px * 1.2 = 14.4px）。

rem

rem 是 CSS3 新增的一个相对单位（root em，根em）。

使用 rem 为元素设定字体大小时，仍然是相对大小，但相对的只是 HTML 根元素。

rem 集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。

使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			html {
				font-size: 62.5%;
			}
			
			p {
				font-size: 1.2rem;
			}
			
			p>span {
				font-size: 1.2rem;
			}
		</style>
	</head>
	<body>
		<p>
			Hello <span>World</span>
		</p>
	</body>
</html>