前言

• 在开发中，我们经常使用px,%,em,rem,vx,vh这些长度单位，那么它们之间又有什么区别呢？

px

• px 是 pixel 的缩写，它的含义是像素的意思，在指定字体大小和元素的宽高的时候使用。
• 像素是相对于显示器屏幕分辨率而言的(它是绝对单位)，一个像素就是屏幕上的一个点，即屏幕分辨率的最小单位。
• 绝对单位，页面按精确像素展示

%

• 是相对于父元素计算的

em

• em是相对长度单位。相对于元素的字体大小（font-size）
• 如果当前标签字体尺寸未被人为设置，当前标签内font-size的大小会相对父标签的字体大小。
• 通常1em = 16px

rem

• rem是一种长度单位，是而且仅是根据根元素html改变的长度单位
• 动态修改html的font-size适配
• 1rem = 16px

vw

• css3新单位，view width的简写，相对于视口的宽度。视口被均分为100单位的vw(即浏览器可视区) 100vw = 可视区宽度
• 1vw = 视口宽度的1%

vh

• css3新单位，view height的简写，相对于视口的高度。视口被均分为100单位的vh (即浏览器可视区) 100vh  = 可视区高度
• 1vh = 视口高度的1%

总结：每一个单位我们可以根据不同的情况来使用！