005-em/px/rem/vh/vw 区别?

前言

px、em、% 这几个单位比较常用，因为它们兼容性较好，适用于大部分开发场景。

从 CSS3 开始，新增了 rem、vw、vh、vm 等计量单位，使得前端能够更好的开发出响应式页面，以及适应不同分辨率屏幕的设备。

单位

绝对长度单位：cm、mm、Q、in、pc、pt、px。

相对长度单位：em、ex、ch、rem、lh、vw、vh、vmin、vmax。

这里我们主要讲述 px、em、rem、vh、vw。

px

所谓像素就是呈现在我们显示器上的一个个小点，每个像素点都是大小等同的，所以像素为计量单位被分在了绝对长度单位中。

em

相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸（1em = 16px）。

为了简化 font-size 的换算，我们需要在 css 中的 body 选择器中声明 font-size = 62.5%，这就使 em 值变为 16px*62.5% = 10px。因此现在只要把我们的像素值除以 10 就得出对应的 em 单位值。例如：10px = 1em、18px = 1.8em。

特点：

• em 值并非固定。
• em 会继承父级元素的字体大小。
• 相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。
• 任意浏览器的默认字体高都是 16px。

rem

相对的只是 HTML 根元素 font-size 的值。我们为了简化转换，可以设置根元素的字体大小为 62.5%。

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

/*
* 1rem = 10px
* 1.2rem = 12px
*/

特点：

• rem 单位可谓集相对大小和绝对大小的优点于一身。
• 和 em 不同的是 rem 总是相对于根元素，而不像 em 一样使用级联的方式来计算尺寸。

vw 和 vh

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

窗口指的是：浏览器的可视区域、移动端的布局视口。

总结

• px：绝对单位，页面按精确像素展示；
• em：相对单位，基准点为父节点字体的大小，如果自身定义了 font-size 按自身来计算，整个页面内 1em 不是一个固定的值；
• rem：相对单位，相对根节点html的字体大小来计算；
• vh、vw：主要用于页面视口大小布局，在页面布局上更加方便简单；

部分答案整理自网络资源