px、em、rem、%、vw、vh单位

1 、px

px就是pixel（像素）的缩写。但是在设备本身上，PX 单元是固定的，不会根据任何其他元素进行更改。对于响应式站点，使用 PX 可能会出现问题，但它们对于保持某些元素的大小一致很有用。如果你有不应调整大小的元素，那么使用 PX 是一个不错的选择。

2、em

参考物是父元素的font-size，具有继承的特点。浏览器默认字体是16px，整个页面内1em不是一个固定的值。

字体大小同样都是1.5em，但是效果却截然不同，按照W3C提供的公式，我们可以计算下： class为id1的div字体大小继承自父元素body：16px*1.5em = 24px class为id2的div字体大小继承自父元素id1：24px*1.5em = 36px class为id3的div字体大小继承自父元素id2：36px*1.5em = 54px

3、rem

rem是CSS3新增的一个相对单位，但相对的只是HTML根元素。通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。

4、%

% 百分比，相对长度单位，相对于父元素的百分比值

元素宽高与字体大小使用区别：

（1）尽量使用相对尺寸单位

使用相对尺寸单位计量，则在调整页面的布局的时候，不需要遍历所有的内部DOM结构，重新设置内部子元素的尺寸大小。如果是随着父容器或者是整体页面布局而改变尺寸，则使用%更好，如元素的高度和宽度设置。

（2）字体尺寸尽量使用em、rem

为了字体大小的可维护性和伸缩性，推荐使用em，如果存在3层以及3层以上的字体相对尺寸的设置，可以考虑使用rem。

5、vw和vh

vm、vh、vmin、vmax是一种视窗单位，也是相对单位。它相对的不是父节点或者页面的根节点。而是由视窗（Viewport）大小来决定的，单位 1，代表类似于 1%。 视窗(Viewport)是你的浏览器实际显示内容的区域—，换句话说是你的不包括工具栏和按钮的网页浏览器。

具体描述如下：

vw：视窗宽度的百分比（1vw 代表视窗的宽度为 1%）
vh：视窗高度的百分比
vmin：取当前Vw和Vh中较小的那一个值
vmax：取当前Vw和Vh中较大的那一个值

vh和vw相对于视口的高度和宽度， 1vh 等于1/100的视口高度，1vw 等于1/100的视口宽度 比如：浏览器高度900px，宽度为750px, 1 vh = 900px/100 = 9 px，1vw = 750px/100 = 7.5 px， 很容易实现与同屏幕等高的框。

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，但它不是相对于视口的宽度或高度的长度。相反，它是父元素宽度或高度的百分比。例如，百分比单位通常可用于设置边距的宽度。

转载地址：http://www.webkaka.com/tutorial/html/2021/0707125/