【CSS 面经】px、em、rem 的区别及使用场景

在 CSS 中，px、em 和 rem 是常用的三种单位，它们各自有不同的特性和适用场景。理解这些单位的区别，能够帮助我们在开发中做出更合适的选择，提高页面的可控性、适配性和响应式设计能力。本文将详细探讨这三种单位的区别，并介绍它们的最佳使用场景。

一、px 单位：像素

px 是最常见的 CSS 单位，表示屏幕上的物理像素。每个 px 代表一个显示设备上的单一像素。它是一个绝对单位，意味着其值不会随着浏览器的缩放或视口的变化而改变。

特点：

• 固定大小：px 单位的大小是固定的，不会根据父元素或其他外部因素发生变化。
• 适用于具体设计：使用 px 时，设计师可以精确控制元素的尺寸，适用于需要高度精确的布局。

使用场景：

• 精确控制：当需要对页面中的元素进行精确控制时，例如按钮的尺寸、图片的大小、表单的输入框高度等。
• 固定设计：如果页面设计需要保持固定大小（例如某些静态页面设计），使用 px 可以确保元素大小不受其他因素影响。

示例：

.container {
    width: 600px;
    height: 400px;
}

.button {
    width: 120px;
    height: 40px;
}

在这个例子中，.container 的宽度和高度被固定为 600px 和 400px，.button 的尺寸也是固定的 120px x 40px。

二、em 单位：相对于父元素的字体大小

em 是相对单位，表示相对于当前元素的字体大小。当设置元素的 font-size 为 em 时，它会基于其父元素的字体大小来计算。这意味着，如果父元素的字体大小发生变化，使用 em 的子元素的尺寸也会随之变化。

特点：

• 继承性：em 的值是相对于当前元素的字体大小来计算的，因此，em 会继承父元素的字体大小。
• 层级关系影响：在深层嵌套的元素中，em 会依赖于父元素的字体大小，可能会出现意外的结果。例如，如果父元素的字体大小已经是 2em，那么子元素的字体大小将是 2em 的 2 倍。

使用场景：

• 相对字体大小：em 适用于需要根据父元素的字体大小调整子元素的尺寸（如字体大小、边距、内边距等）。
• 局部调整：当你希望在某个特定的元素内进行相对调整时，em 是很合适的选择。

示例：

.container {
    font-size: 16px;
}

.text {
    font-size: 2em; /* 32px */
}

.button {
    font-size: 1.5em; /* 48px */
}

在这个例子中，.text 和 .button 的字体大小是相对于 .container 的字体大小进行计算的。由于 .container 的字体大小是 16px，所以 .text 是 32px，.button 是 48px。

三、rem 单位：相对根元素的字体大小

rem 也是一个相对单位，与 em 类似，但与 rem 的计算基准不同。rem 是相对于根元素（即 html 元素）的字体大小进行计算的。与 em 不同，rem 不会受到父元素字体大小的影响，而是始终相对于根元素的字体大小。

特点：

• 统一基准：rem 总是基于根元素的字体大小（通常是 html 标签上的 font-size）来计算，因此它可以保证一致性，避免了层级嵌套导致的尺寸累积问题。
• 更易维护：因为 rem 使用的是根元素的字体大小作为基准，所以在响应式设计中，通过修改根元素的字体大小就能统一调整整个页面的布局和字体大小。

使用场景：

• 全局布局调整：rem 适用于全局样式设置，特别是在响应式设计中，修改根元素的字体大小即可调整页面所有元素的尺寸，方便统一管理。
• 响应式字体：当你希望页面的字体在不同设备下能够自适应时，rem 是理想的选择。

示例：

html {
    font-size: 16px; /* 1rem = 16px */
}

.container {
    font-size: 2rem; /* 32px */
}

.text {
    font-size: 1.5rem; /* 24px */
}

在这个例子中，.container 和 .text 的字体大小是基于根元素的 font-size （即 16px）计算的，确保页面字体的统一性和灵活性。

四、px、em、rem 的区别总结

五、最佳使用建议

1. 使用 px：

• 当需要精确控制元素的尺寸时使用 px。
• 在设计固定宽度的元素时（如按钮、图标、输入框等），px 是最合适的选择。

2. 使用 em：

• 当你希望某个元素的尺寸相对于父元素动态调整时，使用 em。
• em 常用于字体大小、边距、内边距等属性的相对设置，特别是在组件或模块内部。

3. 使用 rem：

• 当你需要全局统一调整页面的字体和布局时，使用 rem。
• rem 在响应式设计中非常有效，通过调整根元素的字体大小来轻松调整整个页面的比例。

推荐：

• JavaScript
• react
• vue