持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第30天，点击查看活动详情

在css3中新增了rem、vh、vw、vm等计量单位，大大丰富了我们的长度选择，使用这些新的单位可以更好的帮我们开发出响应式的页面适应更多不同分辨率的客户端，达到更好的用户使用体验。

px

px，表示像素，所谓像素就是呈现在我们显示器上的一个个小点，每个像素点都是大小等同的，所以像素为计量单位被分在了绝对长度单位中，有些人会把px认为是相对长度，原因在于在移动端中存在设备像素比，px实际显示的大小是不确定的这里之所以认为px为绝对单位，在于px的大小和元素的其他属性无关。在微信小程序开发的时候有个rpx这个才是相对单位，其可以实现自适应的开发，在宽度为375px的设计稿中，1px=2rpx，通过这样设计的微信小程序就可以达到响应式的效果，可以说是很方便了。

em

这是一个相对单位，其相对的目标是当前对象中的字体大小，如果当前对象的字体大小并没有人进行设置，那么其就会是默认值16px(1em=16px),可以发现这不是一个较整的计算，所以我们一般为了简化它的计算在body选择器中加入font-size=62.5%这样就可以使得我们的默认1em=16×62.5%=10px，方便我们对设计稿进行响应的转化，其中的原理就是样式的继承性，body中的设置会被body中的所有对象所继承，从而实现我们的需求。

rem

和rem类似，这个也是一个相对的计量单位，多了一个r是表示root的意思，即相对的是HTML的根元素的font-size,那么如果也要进行相对简单的换算我们就可以在根元素加上font-size=62.5%，rem可以说是集相对大小和绝对大小的有点于一身，我们不用担心里面对象的其他font-size改变了大小从而影响了rem的值，我们只需要关注HTML中font-size的大小即可很好的确定我们的rem到底等于多少px。

vh、vw

v在这里是view视口的意思，h和w就是对应的height和width，很显然这个就是相对于视口大小的计量单位，一个相对于视口的高度一个是视口的宽度。vw ，根据窗口的宽度，分成100等份，100vw就表示满宽，50vw就表示一半宽。（vw 始终是针对窗口的宽），同理，vh则为窗口的高度。注意在桌面端的时候，其是指浏览器的可视区域，如果你拖拽浏览器的大小那么其就会响应的改变，在移动端则是指布局的视口，注意这里和%的区别，%相对的是父元素的大小。

总结

• px：绝对单位，页面按精确像素展示，在不同设备不同的原因主要是分辨率的影响，小程序的rpx才是相对的。

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

• rem：相对单位，可理解为root em, 相对根节点html的字体大小来计算，相对目标唯一比较好确定。

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