px、em 和 rem 的区别：深入理解 CSS 中的单位

文章目录

- 前言
- 一、`px` - 像素 (Pixel)
- 二、`em` - 相对父元素字体大小 (Ems)
- 三、`rem` - 相对于根元素字体大小 (Root Ems)
- 四、综合比较
- 结语

前言

在CSS中，px、em和rem是三种用于定义尺寸（如宽度、高度、边距、填充等）的长度单位。它们各自有不同的特性，适用于不同的场景。接下来我们将更详细地探讨这三种单位。

一、`px` - 像素 (Pixel)

定义：
- px代表像素，是一个绝对单位，它的大小固定且与设备无关，通常表示屏幕上一个点的大小。
计算方式：
- 在大多数现代显示器上，1px等于屏幕上的一个物理像素点。然而，在高分辨率显示器（例如Retina显示屏）上，1px可能对应多个物理像素以保持视觉清晰度。
适用场景：
- 当你需要精确控制元素的尺寸或位置时，比如设计图标或需要对齐的图形元素。
- 对于需要保证一致性的布局部分，如导航栏的高度或按钮的尺寸。
使用方法：
- 直接为属性赋值，无需考虑上下文环境的影响。
```
/* 设置一个div的宽度为200像素 */
div {
	width: 200px;
}
```
注意事项：
- 使用px可能会限制页面的响应性和可访问性，因为用户无法通过浏览器设置轻松调整文本大小。
- 在移动设备上，固定的px值可能不适合所有屏幕尺寸，影响用户体验。

二、`em` - 相对父元素字体大小 (Ems)

定义：
- em是一种相对单位，其值基于当前元素的字体大小。如果未特别指定，则默认为继承自父元素的字体大小。1em等于当前元素的字体大小。
计算方式：
- 如果一个元素没有明确指定字体大小，它会从最近的非静态定位的祖先元素继承字体大小。因此，em的值依赖于上下文环境中的字体大小设定。
适用场景：
- 适合创建可以随着父元素变化而自动调整的灵活布局。
- 可以用作字体大小的单位，使整个文档树能够根据根元素的比例缩放。

使用方法：

em的值是相对于直接父元素的字体大小。对于嵌套的元素，子元素的em值会累积，即子元素的尺寸是基于父元素的em值计算的。

/* 如果html的字体大小是16px，默认情况下，下面的p标签将有32px的字体大小 */
p {
	font-size: 2em; /* 2 * 父元素的字体大小 */
}

/* 子元素的em值会累积 */
.parent {
	font-size: 2em;
}
.parent .child {
	font-size: 1.5em; /* 1.5 * parent的字体大小 = 3em = 48px */
}

注意事项：
- 因为em是相对于父元素的字体大小，所以在嵌套结构中，每个子元素的em值都是基于其直接父元素的字体大小，这可能导致尺寸累积效应，增加计算复杂度。
- 如果不注意，这种累积效应可能会导致难以预料的结果，特别是在深层次嵌套的情况下。

三、`rem` - 相对于根元素字体大小 (Root Ems)

定义：
- rem也是一种相对单位，但它不是相对于父元素，而是相对于HTML文档的根元素（即<html>标签）的字体大小。这意味着无论元素位于DOM树的哪个位置，rem的值都是一致的。
计算方式：
- 1rem等于HTML根元素的字体大小。如果未指定，则默认为浏览器的默认字体大小，通常是16px。
使用场景：
- 创建完全独立于任何特定父元素的响应式设计，确保所有元素按照相同的基准进行缩放。
- 简化了复杂的嵌套结构中的尺寸管理问题，因为不需要考虑父元素的影响。

使用方法：

rem的值是相对于根元素的字体大小。你可以通过改变根元素的字体大小来统一调整整个页面的尺寸。

/* 设定根元素的字体大小 */
html {
	font-size: 62.5%; /* 默认16px -> 10px */
}

/* 根据根元素字体大小设定其他元素 */
body {
	font-size: 1.4rem; /* 1.4 * 10px = 14px */
}

h1 {
	font-size: 2.4rem; /* 2.4 * 10px = 24px */
}

/* 修改根元素字体大小会影响所有rem单位 */
@media (min-width: 768px) {
	html {
    	font-size: 75%; /* 新的1rem = 12px */
	}
}

注意事项：
- 要想让rem生效，最好是在全局样式表中设定根元素的字体大小。例如，可以通过html { font-size: 62.5%; }将默认字体大小设置为10px，使得后续的rem计算更加直观。
  在一些旧版本的浏览器中可能存在兼容性问题，但目前主流浏览器都已经支持rem。

四、综合比较

特性/单位	`px`	`em`	`rem`
类型	绝对单位	相对单位	相对单位
参考点	屏幕像素	父元素字体大小	根元素字体大小
适用场景	需要精确控制的元素	深层次嵌套结构	全局响应式设计
优点	精确、易于预测	灵活、适应性强	易维护、一致性好
缺点	不利于响应式设计	计算复杂、易出错	可能需要额外配置