CSS单位PX、EM、REM、%、VW 和 VH 有什么区别？

在 CSS 中，可以使用各种度量单位指定元素的大小或长度，如PX、EM、REM、%、VW 和 VH等，不过也许你还不十分了解，这些单位之间有什么区别？什么情况下该用什么单位？

 
CSS单位PX、EM、REM、%、VW 和 VH 有什么区别

了解不同单位的最重要方面是有些单位，例如 PX，是绝对单位，有些则是相对单位。

绝对单位

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

相对单位

EM : 相对于父元素

REM : 相对于根元素（HTML 标签）

% : 相对于父元素

VW：相对于视口的宽度

VH : 相对于视口的高度

与 PX 不同，%、EM 和 REM 等相对单位更适合响应式设计，也有助于满足可访问性标准。相对单位在不同设备上的缩放效果更好，因为它们可以根据另一个元素的大小进行缩放。

简单例子

让我们看一个简单的例子。

在大多数浏览器中，默认字体大小为 16px。相对单位以此基数计算大小。如果你通过 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

但是如果你或用户更改了默认大小怎么办？由于这些是相对单位，因此最终尺寸值将基于新的基本尺寸。尽管默认值为 16px，但如果你或用户将其更改为 14px，则计算出的大小最终将是：

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 进行大小调整的嵌套元素有时最终会达到你没有预料到的大小。如果你需要它来指定页面特定区域的大小，它确实为你提供了更细粒度的控制。

%、VW 和 VH 都是关于什么的？

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

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

更多关于 VW 和 VH

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

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

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%)。当然，你可以使用视口宽度的任意百分比来实现其他目标，例如宽度的一半为 50% 等。

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

%类似于 VW 和 VH，但它不是相对于视口的宽度或高度的长度。相反，它是父元素宽度或高度的百分比。例如，百分比单位通常可用于设置边距的宽度。