CSS之em、px、rem的区别

最新推荐文章于 2025-04-26 21:45:29 发布

原创最新推荐文章于 2025-04-26 21:45:29 发布 · 1k 阅读

CC 4.0 BY-SA版权

文章标签：

本文介绍了前端开发中常用的长度单位px、em和rem的区别及应用场景，强调了选择适当单位对设计和响应式布局的重要性。

作为一个前端开发工程师，关于这些长度单位还是得了解一下。虽然在日常的开发中px、%用的多些，也会用到vh、vw，其他的虽然用的少但也得了解，说不定就能解决你样式中的问题呢。

在css中计量单位分相对长度单位和绝对长度单位

今天就具体介绍一下其中的em、rem、px。其他的感兴趣的可以自己去了解。

em、px、和 rem 都是用于指定元素大小的单位，它们在 CSS 中有不同的用途和特性。

px（像素）：
- px 是最基本的长度单位，表示相对于显示器屏幕分辨率的一个点。1 像素等于屏幕上的一个点。
- px 是绝对单位，不受父元素的影响。当使用 px 时，元素的大小将始终相对于屏幕分辨率。
```
div {
  width: 100px;
  height: 50px;
  font-size: 16px;
}
```
em：
- em 是相对单位，它是相对于元素的字体大小来计算的。如果没有设置字体大小，则相对于父元素的字体大小。
- 例如，如果父元素的字体大小为 16px，设置子元素的 font-size: 2em，则子元素的字体大小为 2 * 16px = 32px。
```
body {
  font-size: 16px;
}

div {
  font-size: 2em; /* 相对于父元素字体大小，即 32px */
}
```
rem（根元素的相对单位）：
- rem 与 em 类似，但是相对的是根元素的字体大小。rem 是相对于文档的根元素（html 元素）的字体大小。
- 这使得 rem 更易于控制整个页面的大小。
```
html {
  font-size: 16px; /* 设置根元素字体大小 */
}

div {
  font-size: 2rem; /* 相对于根元素字体大小，即 32px */
}
```

选择使用哪个单位（px、em、rem）通常取决于的设计和开发需求。以下是一些建议：

使用 px：
- 当希望元素的大小在不受父元素字体大小影响的情况下保持固定。
- 对于一些固定大小的元素，如边框、间距等，通常使用 px 更为合适。
```
div {
  width: 100px;
  padding: 10px;
  border: 1px solid #000;
}
```
使用 em：
- 当希望元素的大小相对于其父元素的字体大小进行缩放。
- 对于一些相对尺寸（如文本大小）和相对布局的情况，em 可以提供更灵活的解决方案。
```
body {
  font-size: 16px;
}

div {
  font-size: 1.5em; /* 相对于父元素字体大小，即 24px */
  margin-bottom: 1em; /* 相对于父元素字体大小，即 16px */
}
```
使用 rem：
- 当希望元素的大小相对于根元素的字体大小进行缩放，这样可以更容易控制整个页面的大小。
- rem 通常用于设置全局的基础字体大小，然后其他元素使用 em 进行相对尺寸设置。
```
html {
  font-size: 16px; /* 设置根元素字体大小 */
}

div {
  font-size: 2rem; /* 相对于根元素字体大小，即 32px */
  margin-bottom: 1rem; /* 相对于根元素字体大小，即 16px */
}
```