【CSS】一文搞懂 em、px、rem、vh、vw 的区别！

前言

大家好，我是HoMeTown，今天聊一下CSS中em、px、rem、vh、vw这些单位都有什么区别，什么时候该用什么单位，如何正确使用。

What？

首先，在我们日常中的传统开发中，px作为一等公民，成为了我们使用最多的单位，其次是%以及em等单位，正常情况下，px可以适用于大部分项目的开发，并且，具有良好的兼容性，但是从CSS3开始，浏览器对这些计量单位的支持又提升到了一个新的高度，陆续推出了rem、vh、vw以及vm等一些新的计量单位，利用这些单位，友好的帮助我们解决了开发响应式页面的问题，使得我们开发出来的页面可以适配不同分辨率的设备。真香！

计量单位

在CSS的计量单位体系中，可以分为相对长度单位和绝对长度单位：

• 相对长度单位包括：em、ex、ch、rem、vw、vh、vmin、vmax、%
• 绝对长度单位包括：cm、mm、in、px、pt、pt、pc

px

即像素，由计算机基础或者设计基础的同学应该都比较了解，像素其实就是对应我们显示器上的一个个同等大小的点，因此，像素在计量单位体系中，属于绝对长度单位，之前看到过网上的一些争论关于px是否为绝对长度单位，我认为是属于绝对长度单位，因为即使在移动端中存在设备像素比，px实际大小不确定，但是从主观的角度出发，px的大小和元素与其他的属性无关。

特点：

• 兼容性好
• 使用方便

em

em属于相对长度单位。相对对象为当前对象内文本的字体size，如果当前行内文本的字体尺寸未设置，则相对对象为浏览器的默认字体尺寸1em = 16px。

一般情况下，为了简化font-size的换算，我们需要在css中的body选择器中声明font-size=62.5%，使得em值变为16px*62.5% = 10px，这样 12px = 1.2em, 10px = 1em, 也就是说只需要将你的原来的px 数值除以 10，然后换上 em作为单位即可。

特点：

• em 的值不固定
• em 会继承父级元素的字体尺寸
• em 是相对长度单位，相对当前行内对象的文本尺寸，如未设置，相对浏览器的默认字体尺寸

举个🌰

<div class="outside">
    我是14px=14.rem
    <div class="innerside">我是12px=1.2rem</div>
</div>

html {
    font-size: 10px;  /* 公式16px*62.5%=10px */ 
} 
.outside {
    font-size: 1.4rem
} 
.innerside{
    font-size: 1.2rem
}

此时，.outside的font-size为14px，而.innerside的font-size为16px，可以从图中明显看出来差异。

rem

rem是相对单位，与em不同的是，相对对象只是html根元素的font-size，与em同理，可以在根元素中写入font-size: 62.5%，来简化转化。

html {
    font-size: 62.%; /* 公式16px*62.5%=10px */
}

这样，在我们的页面中1rem = 10px、1.2rem = 12px，以此类推。

特点：

• rem单位有px & em 两者的优点

vh、vw

vw ，就是根据窗口的宽度，分成100等份，100vw就表示满宽，50vw就表示一半宽。（vw 始终是针对窗口的宽），同理，vh则为窗口的高度

这里的窗口分成几种情况：

• 在桌面端，指的是浏览器的可视区域
• 移动端指的就是布局视口

像vw、vh，比较容易混淆的一个单位是%，不过百分比宽泛的讲是相对于父元素：

• 对于普通定位元素就是我们理解的父元素
• 对于position: absolute;的元素是相对于已定位的父元素
• 对于position: fixed;的元素是相对于 ViewPort（可视窗口）

总结

px：绝对单位，页面按精确像素展示

em：相对单位，基准点为父节点字体的大小，如果自身定义了font-size按自身来计算，整个页面内1em不是一个固定的值

rem：相对单位，可理解为root em, 相对根节点html的字体大小来计算

vh、vw：主要用于页面视口大小布局，在页面布局上更加方便简单