这些单位分别是什么意思
px 是 CSS 像素，也叫设备无关像素，是所有换算的基准。rem 相对于根元素 html 的字号，浏览器默认是 16px，所以 1rem 默认等于 16px，24px 等于 1.5rem。em 相对于当前元素继承到的字号，会层层叠加：父元素 20px 时子元素的 1.5em 是 30px，孙元素再写 1.5em 就变成 45px，这是 em 最容易失控的地方。pt 是印刷的磅，CSS 规定 1in 等于 96px 也等于 72pt，所以 1pt 固定等于 1.333px，12pt 正好是 16px。vw 是视口宽度的百分之一，1920px 宽的窗口里 1vw 等于 19.2px。
实际项目里怎么选
字号建议用 rem：用户在系统或浏览器里把默认字号调大时，整站会跟着放大，这是无障碍的基本要求；写死 px 会让视力不佳的用户无法调整。内边距、外边距和圆角可以用 px，保证在任何字号下视觉一致；边框尤其应该用 px，否则会出现小数像素导致的模糊。图标和行高常用 em，让它们跟随所在文本的字号自动缩放。
有人为了心算方便把 html 的字号设成 62.5%，即 10px，这样 1.2rem 就是 12px；但这会打乱依赖默认字号的第三方组件，现在更推荐保留 16px，用构建工具或本页表格换算。vw 适合做大标题和全屏布局，缺点是窗口很窄时字会小到看不清，很宽时又过大，实践中常用 clamp 限制上下限，例如 font-size: clamp(16px, 2.5vw, 28px)。移动端设计稿常按 375px 宽绘制，表格中特意列出了按 375px 折算的 vw 值，方便把设计稿尺寸直接转成等比缩放的样式。