共计 1660 个字符，预计需要花费 5 分钟才能阅读完成。
前言
大家好，我是 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：次要用于页面视口大小布局，在页面布局上更加不便简略
