面试官：说说em/px/rem/vh/vw区别

这些单位在 CSS 中用于定义元素的尺寸和位置，它们各有特点和应用场景：

1. px（像素）：

   • 像素是最基本的长度单位，表示屏幕上的一个像素点。
   • px 是固定单位，不随着浏览器缩放而改变，适用于需要精确控制尺寸和位置的情况，如边框宽度、字体大小等。

2. em：

   • em 是相对长度单位，基于元素的字体大小，1em 等于元素的字体大小。
   • em 可以随着父元素的字体大小变化而变化，适用于需要相对于父元素字体大小进行缩放的情况，如段落文字大小、行高等。

3. rem：

   • rem 也是相对长度单位，但基于根元素（html）的字体大小。
   • rem 的值不受父元素字体大小的影响，只受根元素字体大小的影响，适用于需要全局统一字体大小的情况。

4. vh（视口高度单位）：

   • vh 表示视口高度的百分比，1vh 等于视口高度的 1%。
   • vh 是相对长度单位，随着视口大小的变化而变化，适用于需要根据视口大小进行布局的情况，如全屏背景、垂直居中等。

5. vw（视口宽度单位）：

   • vw 表示视口宽度的百分比，1vw 等于视口宽度的 1%。
   • vw 和 vh 类似，但是是相对于视口宽度的百分比，适用于需要根据视口大小进行水平布局的情况，如响应式设计、栅格布局等。