你不容错过的前端CSS高频面试题：em/px/rem/vh/vw的区别

前端开发中的单位大盘点：px、em、rem、vh、vw

作为一名前端开发工程师，驾驭各种单位是至关重要的。从像素到视口尺寸，每个单位都在特定的场景下发挥着独特的作用。本文将深入探讨 px、em、rem、vh 和 vw，帮助你彻底掌握这些单位的特性和应用。

像素（px）：精确控制的绝对单位

像素是屏幕上的最小显示单位，它的数量决定了分辨率。px 单位的尺寸不受浏览器设置的影响，因此它最适合用于需要精确尺寸的元素，如按钮、图标和输入框。

示例代码：

.button {
  width: 100px;
  height: 50px;
}

Em（em）：相对父元素字体大小

em 单位相对于其父元素的字体大小。换句话说，1em 等于父元素字体大小的 1 倍。这使其成为调整字体大小的理想选择，因为父元素的字体大小通常可以通过浏览器设置进行调整。

示例代码：

p {
  font-size: 16px;
}

.paragraph {
  font-size: 1.5em;
}

Rem（rem）：相对根元素字体大小

rem 与 em 类似，但它相对于根元素（通常是 html 元素）的字体大小。这使其非常适合创建根据根元素字体大小调整尺寸的布局，例如侧边栏和页脚。

示例代码：

html {
  font-size: 16px;
}

.sidebar {
  width: 25rem;
}

视口高度（vh）：基于视口高度的百分比

vh 单位是视口高度的百分比，视口高度是指浏览器窗口除去工具栏和状态栏的高度。这使其适用于需要根据视口高度调整尺寸的元素，例如全屏背景和导航栏。

示例代码：

.hero-banner {
  height: 100vh;
}

视口宽度（vw）：基于视口宽度的百分比

与 vh 类似，vw 单位是视口宽度的百分比。这使其适用于需要根据视口宽度调整尺寸的元素，例如侧边栏和页脚。

示例代码：

.sidebar {
  width: 25vw;
}

总结表：

单位	类型	受浏览器设置影响	兼容性	继承性	响应性
px	绝对	否	好	否	否
em	相对	是	好	是	是
rem	根相对	是	好	是	是
vh	视口高度	是	好	否	是
vw	视口宽度	是	好	否	是

应用场景：

• px： 精确尺寸、固定元素
• em： 调整字体大小、响应字体设置
• rem： 基于根元素字体大小调整布局
• vh： 根据视口高度调整元素高度
• vw： 根据视口宽度调整元素宽度

常见问题解答：

1. 什么时候应该使用 px？

   • 当需要精确控制元素尺寸时。

2. em 和 rem 有什么区别？

   • em 相对于父元素字体大小，而 rem 相对于根元素字体大小。

3. vh 和 vw 单位是响应式的吗？

   • 是的，它们会根据浏览器窗口大小自动调整。

4. 在选择单位时，应该考虑哪些因素？

   • 元素的预期尺寸、响应性需求和浏览器设置的潜在影响。

5. 为什么 px 通常是首选单位？

   • 因为它是一个绝对单位，不会受到浏览器设置的影响，从而确保了元素的精确尺寸。