1、px

• 1、px就是pixel的缩写，意为像素。
• 2、px就是设备或者图片最小的一个点，比如常常听到的电脑像素是1024x768的，表示的是水平方向是1024个像素点，垂直方向是768个像素点。
• 3、px是我们网页设计常用的单位，也是基本单位。
• 4、通过px可以设置固定的布局或者元素大小。
• 5、缺点：没有弹性，屏幕大小发生变动大小不适配。

2、em

• 1、参考物是父元素的font-size，具有继承的特点。
• 2、如果自身定义了font-size按自身来计算（浏览器默认字体是16px），整个页面内1em不是一个固定的值。
• 3、1em=1倍父元素font-size的值，2em=2倍父元素font-size的值，以此类推……

3、rem

• 1、rem是相对于根元素html，这样就意味着，我们只需要在根元素确定一个参考值，可以设计HTML为大小为10px，设置1.2rem就是12px.以此类推。
• 2、优点：只需要设置根目录的大小就可以把整个页面的成比例的调好。

4、%

• 1、一般来说就是相对于父元素；
• 2、对于普通定位元素就是我们理解的父元素；
• 3、对于position: absolute;的元素是相对于已定位的父元素；
• 4、对于position: fixed;的元素是相对于ViewPort（可视窗口）。

5、vw

• 1、css3新单位，指可视窗口的宽度。假如宽度是1200px的话。那100vw就是1200px,10vw就是120px，以此类推……
• 2、举个例子：浏览器宽度1200px, 1 vw = 1200px/100 = 12 px。

6、vh

• 1、css3新单位，指可视窗口的高度。假如高度是1200px的话。那100vh就是1200px，10vh就是120px，以此类推……
• 2、举个例子：浏览器高度900px, 1 vh = 900px/100 = 9 px。

7、rpx

• 1、rpx 是微信小程序解决自适应屏幕尺寸的尺寸单位。
• 2、rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。
• 3、微信小程序规定屏幕的宽度为750rpx。
• 4、解释：例如宽度，相当于把屏幕宽度分为750份，1份就是1rpx。