TIP

css中计量单位那么多，但是它们之间有什么区别呢？

在传统的项目中px, %, em这几个单位是经常用到的，并且兼容效果还不错；自从css3开始，计量单位就逐渐增加rem, vw, vh等；

计量单位那么多，在项目如何使用，并且它们是有什么区别呢？

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

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

px

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

有些人会把 px 认为是相对长度，原因在于在移动端中存在设备像素比，px 实际显示的大小是不确定的

这里之所以认为 px 为绝对单位，在于 px 的大小和元素的其他属性无关

em

em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸（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 是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸
• 任意浏览器的默认字体高都是 16px

下面有个例子：

rem

rem，相对单位，相对的只是HTML根元素font-size的值,常用于移动端开发

例子如下：

根元素html的字体大小为10px，那么2rem = 2 * 10px = 20px

vw, vw, %

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

例子如下：