CSS3 的单位是响应式布局的基础，不同的单位计算方式不同，对多设备下的页面效果有很大影响。在开发过程中选错了单位就会造成布局混乱，往往要花很多时间去排查，系统梳理各种单位的适用场景可以提高样式代码的可维护性。
px是基础绝对单位，也就是逻辑像素，不受浏览器根字号、父元素属性的影响。边框宽度、小图标大小、圆角、阴影等需要固定视觉精度的地方，应该用px来代替，防止页面缩放时出现粗细、比例不一致的情况。
em 是相对单位，根据当前元素的 font-size 来计算，如果没有显式设置的话就会继承父级字号。该单位适用于组件内部等比适配，例如按钮的内边距、圆角随文字大小一起变化。多层嵌套的情况下 em 会逐层累加，字号、间距容易出现超出预期的放大效果，复杂的层级布局要谨慎使用。
rem以根元素html的font-size为唯一参照，完全避免了em嵌套累积的问题。全局字体、容器间距、布局宽度等需要统一适配的样式，使用rem配合媒体查询调整根字号，可以实现全站元素等比缩放，是响应式全局适配的首选方案。
百分比单位所参照的对象会随着属性的不同而发生变化，width、height 参照的是父元素的对应尺寸，padding、margin 参照的是父元素的宽度，font-size 参照的是父元素的字号。该单位一般用来构建自适应容器，在嵌套使用时要清楚层级比例关系，防止布局失真。
vw、vh 是视口相对单位，1vw 等于视口宽度的 1%，1vh 等于视口高度的 1%。全屏横幅、弹窗、英雄区等需要完全贴合浏览器可视区域的场景适配效率很高，配合 clamp 函数可以实现流体排版，动态限制字号的上下限，防止小屏、大屏下出现字号过大或者过小的情况。
在实际的项目中不需要局限于一个单位，根据各种不同的属性来组合选择，就可以同时满足布局的精确性和响应式的灵活性。
