CSS中px，em，rem的区别

在CSS中，px，em，rem都是单位，用于表示长度（如宽度、高度、字体大小等）。它们之间的区别主要在于相对性和使用场景。

px（像素）：

绝对单位，但相对于显示设备而言。在屏幕上，一个像素通常对应屏幕上的一个点。

不同设备像素密度不同，因此同样px大小的元素在不同设备上看起来可能大小不同（例如在高DPI设备上，一个CSS像素可能对应多个物理像素）。

固定单位，不会因为其他元素的变化而变化。

css 复制代码

.container {
  font-size: 16px;  /* 始终是16像素 */
  padding: 10px;     /* 始终是10像素 */
}

em：

相对单位，相对于当前元素的字体大小（font-size）。如果没有设置，则继承父元素的字体大小，直至根元素。

常用于实现相对于当前字体大小的缩放。例如，设置margin或padding为2em，表示两倍于当前字体大小。

当嵌套多个元素时，如果每个元素都使用em单位，并且设置了不同的字体大小，那么它们之间的相对计算会逐层复合，可能导致意想不到的效果。

css 复制代码

.parent {
  font-size: 16px;
}

.child {
  font-size: 2em;    /* 32px (16 × 2) */
  margin: 1.5em;     /* 48px (32 × 1.5) */
}

rem：

相对单位，相对于根元素（html）的字体大小。如果没有设置，浏览器默认的根元素字体大小通常是16px。

由于是相对于根元素，所以不会受到父元素字体大小的影响，避免了em单位嵌套带来的问题。

在响应式设计中，通过改变根元素的字体大小，可以轻松调整整个页面的缩放比例。

css 复制代码

html {
  font-size: 16px;   /* 默认通常是16px */
}

.element {
  font-size: 2rem;   /* 32px (16 × 2) */
  padding: 1.5rem;   /* 24px (16 × 1.5) */
}

总结

使用px时，大小固定，适合需要精确控制的情况，但不利于响应式设计。

使用em时，相对于当前元素字体大小，适合组件内部的相对缩放，但需注意嵌套问题。

使用rem时，相对于根元素字体大小，适合全局的响应式缩放，易于维护。