前端PX, EM, REM, %, VW, VH啥区别

PX、EM、REM、%、VW 或 VH 这些CSS单位有什么区别？什么时候该用哪个？今天我们来了解一下。

让我们从基础开始，在CSS中，您可以使用各种度量单位指定元素的大小或长度，有些是绝对单位，有些是相对单位。

绝对单位：

PX：像素 (px) 被视为绝对单位，尽管它们与查看设备的 DPI 和分辨率有关。 但是在设备本身上，PX 单元是固定的，不会基于任何其他元素而改变。 对于响应式站点来说，使用 PX 可能会有问题，但它们对于保持某些元素的大小一致很有用。 如果您有不应该调整大小的元素，那么使用 PX 是一个不错的选择。

相对单位：

EM：相对于父元素
REM：相对于根元素（HTML 标签）
%：相对于父元素
VW：相对于视口的宽度
VH：相对于视口的高度
与 PX 不同，%、EM 和 REM 等相对单位更适合响应式设计。相对单位在不同的设备上可以更好地缩放，因为它们可以根据另一个元素的大小进行缩放。

让我们来看个例子

在大多数浏览器中，默认字体大小为 16 像素。 相对单位从这个基础计算大小。 如果您通过 CSS 为 HTML 标记设置基本尺寸来更改该基本尺寸，那么更改的尺寸将成为计算整个页面其余部分的相对单位的基础。 同样，如果用户调整了她的字体大小，那么这将成为计算相对单位的基础。那么在处理默认的 16px 时，这些单位是什么意思呢？

1em = 16px (1 * 16)
2em = 32px (2 * 16)
.5em = 8px (.5 * 16)

1rem = 16px
2rem = 32px
.5rem = 8px

100% = 16px
200% = 32px
50% = 8px

但是如果您或用户更改了默认大小怎么办？ 因为这些是相对单位，所以最终尺寸值将基于新的基本尺寸。 虽然默认值为 16 像素，但如果您或用户将其更改为 14 像素，则计算出的尺寸最终将是：

1em = 14px (1 * 14)
2em = 28px (2 * 14)
.5em = 7px (.5 * 14)

1rem = 14px
2rem = 28px
.5rem = 7px

100% = 14px
200% = 28px
50% = 7px
这使用户可以自由调整其默认浏览器字体大小，同时仍保持您指定的每个元素的相对比例。

EM 和 REM有什么区别?

查看上面的图表，它显示 EM 和 REM 看起来完全一样。 那么它们有什么不同呢？

简而言之，它们因继承而异。 如前所述，REM 基于根元素 (HTML)。 然后，每个使用 REM 的子元素都将使用 HTML 根大小作为其计算点，而不管父元素是否指定了任何不同的大小。

另一方面，EM 基于父元素的字体大小。 如果父元素的大小与根元素的大小不同，则 EM 计算将基于父元素，而不是根元素。 这意味着使用 EM 进行大小调整的嵌套元素有时最终会达到您未预料到的大小。 另一方面，如果您需要它来指定页面特定区域的大小，它确实为您提供了更细粒度的控制。

看下面的例子，如果parent没有指定任何字体，那么，他们都将根据相同的字体来计算长度，所以所有rem em都相等。

而如果给parent设置了不同的字体大小，情况就不同了，em会根据新的字体大小计算长度。在parent外面的p不受影响，如下图。

什么是VW和VH？

虽然 PX、EM 和 REM 主要用于字体大小，但 %、VW 和 VH 主要用于边距、填充、间距和宽度/高度。

重申一下，VH 代表“视口高度”，即可视屏幕的高度。 100VH 表示视口高度的 100%，或屏幕的整个高度。当然，VW 代表“视口宽度”，即可视屏幕的宽度。 100VW 表示视口宽度的 100%，或屏幕的整个宽度。 % 反映了父元素大小的百分比，与视口的大小无关。

视口单位表示当前浏览器视口（当前浏览器大小）的百分比。虽然类似于 % 单位，但还是有区别的。 视口单位计算为浏览器当前视口大小的百分比。 另一方面，百分比单位计算为父元素的百分比，这可能与视口大小不同。

让我们考虑一个 480px x 800px 的移动屏幕视口示例。

1 VW = 视口宽度的 1%（或 4.8px）
50 VW = 视口宽度的 50%（或 240px）
1 VH = 视口高度的 1%（或 8px）
50 VH = 视口高度的 50%（或 400px）

如果视口大小发生变化，元素的大小也会相应变化。

结论：

什么时候改用什么单位呢？

归根结底，这个问题没有完美的答案。一般来说，通常最好选择相对单位之一而不是 PX，这样您的网页就有机会呈现出精美的响应式设计。但是，如果您需要确保元素永远不会在任何断点处调整大小并且无论用户是否选择了不同的默认大小都保持不变，请选择 PX。 PX 即使显示不理想，也能确保一致的结果。

EM 是相对于父元素的字体大小的，所以如果你想根据父元素的大小来缩放元素的大小，请使用 EM。

REM 是相对于根 (HTML) 字体大小的，因此如果您希望根据根大小缩放元素的大小，无论父大小是什么，都使用 REM。如果您使用过 EM，并且由于大量嵌套元素而发现大小问题，那么 REM 可能是更好的选择。

VW 对于创建填充整个视口宽度的全宽元素 (100%) 很有用。当然，您可以使用视口宽度的任何百分比来实现其他目标，例如一半宽度的 50VW 等。

VH 对于创建填充整个视口高度的全高元素 (100%) 很有用。当然，您可以使用视口高度的任意百分比来实现其他目标，例如一半高度的 50VH 等。

% 类似于 VW 和 VH，但它不是相对于视口宽度或高度的长度。相反，它是父元素宽度或高度的百分比。