px、em、rem、%、vw、vh、vm等単位有什么区别？

大家好，我是IT修真院的学员，一枚正直纯洁善良的web前端程序员

今天给大家分享一下px、em、rem、%、vw、vh、vm等単位有什么区别？

1.背景介绍

传统的项目开发中，我们只会用到px、%、em这几个单位，它可以适用于大部分的项目开发，并且拥有比较良好的兼容性。但是从css3开始，浏览器对逻辑单位的支持又提升到了另外一个境界，增加了rem、vh、vw、vm等一些新的长度单位，我们可以利用这些新的单位开发出比较良好的响应式页面，随之覆盖多种不同分辨率的终端，包括移动设备等。现在让我们来看下这些长度单位有什么区别。

2.知识剖析

1.px

px就是pixel的缩写啦，pixel即像素，它不是自然界的长度单位。 px是就是一张图片中最小的点，一张位图就是由这些点构成的。 1024px就是1024像素，最简单的你可以在windows桌面属性里的“设置”看到，如果是1024×768，也就是说水平方向上有1024个点，垂直方向上有768个点。可以画的很小，也可以很大。如果点很小，那画面就清晰，我们称它为“分辨率高”，反之，就是“分辨率低”。所以，像素的大小是会“变”的，也称为“相对长度”。

2.em

参考物是父元素的font-size，具有继承的特点。如果自身定义了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：W3C官网是这样描述的“fontsize of the root element”， root element就是指的根元素html 前面说到的em是相对于其父元素来设置字体大小的，这样就会存在一个问题，进行任何元素设置，都必须知道父元素的字体大小，在多次使用中往往会给我们带来无法预知的错误风险。而rem是相对于根元素html不会像em那样，依赖于父元素的字体大小，而造成混乱。

4.%

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

5.vh和vw

vh和vw相对于视口的高度和宽度，而不是父元素的（CSS百分比是相对于包含它的最近的父元素的高度和宽度） 1vh 等于1/100的视口高度，1vw 等于1/100的视口宽度比如：浏览器高度900px，宽度为750px, 1 vh = 900px/100 = 9 px，1vw = 750px/100 = 7.5 px。很容易实现与同屏幕等高的框：设置一个和屏幕同宽的标题，那标题的字体大小就会自动根据浏览器的宽度进行缩放，以达到字体和viewport大小同步的效果。

3.常见问题

问题一：

为什么一开始在css样式中给body设置font-size：62.5%？

问题二：

在谷歌浏览器运行以下代码，1em是显示多大的字体？

4.解决方案

答案一：

Font-size=62.5%这就使em值变为16px*62.5%=10px。这样1em=10px，1.2em=12px利于我们进行换算。

答案二：

谷歌浏览器强制最小字体为12号，即使设置成 10px 最终都会显示成 12px，当把html的font-size设置成10px,子节点rem的计算还是以12px为基准。

5.编码实战

6.扩展思考