了解px、rpx、em、rem、%、vw、vh、vm这些的区别，减少兼容bug
一、背景介绍 随着Web的发展，对新的解决方案的需求也会继续增大，对网页的要求更高。网页设计单位是涉及到我们布局的效果，使用不同的单位会对最终的demo，会有影响。而且现在都是要求响应式设计，需要适配各种设备，电脑，手机，平板。如果单位不合适，可能在这个设备显示良好，那个设备就会打乱布局。所以需要我们选择合适的单位来进行开发，设计。 二、知识剖析 1、px 1）px就是pixel的缩写， 意为像素 。 2）px就是设备或者图片最小的一个点，比如常常听到的电脑像素是1024x768的，表示的是水平方向是1024个像素点，垂直方向是768个像素点。 3）px是我们网页设计常用的单位，也是基本单位。 4）通过px可以设置固定的布局或者元素大小。 5）缺点：没有弹性。 2、rpx 1）rpx 是微信小程序解决自适应屏幕尺寸的尺寸单位。 2）rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。 3）微信小程序规定屏幕的宽度为750rpx。 4）解释：例如宽度，相当于把屏幕宽度分为750份，1份就是1rpx。高度类似~ 3、em 1）参考物是父元素的font-size，具有继承的特点。 2）如果自身定义了font-size按自身来计算（浏览器默认字体是16px），整个页面内1em不是一个固定的值。 3）特点是1. em的值并不是固定的； 2. em会继承父级元素的字体大小