📖 CSS单位知识

绝对单位

• px（像素）：屏幕最基础的单位，1px 在标准屏幕上约为 0.26mm
• pt（点）：印刷单位，1pt = 1/72 英寸 ≈ 1.333px（96dpi 下）

相对单位

• rem：相对于根元素（html）字体大小。默认 1rem = 16px，利于全局缩放
• em：相对于当前元素的字体大小，嵌套时会累乘，需谨慎使用
• vw：视口宽度的 1%，100vw = 浏览器窗口宽度
• vh：视口高度的 1%，100vh = 浏览器窗口高度
• %：相对于父元素的对应属性值（宽度/字体大小等）

选择建议

• 字体大小优先使用 rem，方便用户缩放
• 间距（padding/margin）可用 rem 或 px
• 全屏布局、视差效果使用 vw/vh
• 组件内部尺寸可用 em，随字体自动缩放
• 边框、阴影等精细值建议用 px

px 与 pt 换算

在 96dpi 标准屏幕下：1pt = 96/72 px ≈ 1.333px，即 12pt = 16px。印刷通常使用 72dpi，此时 1pt = 1px。