px适合固定尺寸但响应式差，rem适配字体间距，百分比适配容器宽度，实际项目推荐rem+百分比+px组合使用。
px 适合固定尺寸，但响应式里容易卡死
px 是绝对单位，浏览器直接按像素渲染，不随父元素或根字体变化。做图标、边框这类需要严格对齐的元素时很稳，但一到响应式布局就暴露问题：缩放页面或切换设备时，16px 始终是 16 像素，不会变大变小。
- 移动端横屏时，
320px宽的容器可能撑满屏幕，但文字还是14px，肉眼看着小得费劲 - 用户系统设置“更大字体”后，
px文字不跟随放大，可访问性直接掉线 - 媒体查询里写一堆
@media (max-width: 768px)+px值，维护成本高，改一个尺寸要扫全文件
em 和 rem 的核心区别在“参照物”
em 看父元素的 font-size，rem 只看根元素（html）的 font-size。这导致嵌套时行为完全不同：
-
em：子元素设font-size: 1.2em，如果父是16px，它就是19.2px；但父再套一层1.2em，就变成1.2 × 1.2 × 16px—— 容易指数级失控 -
rem：不管嵌多深，1.5rem永远是1.5 × html font-size，所以更适合统一缩放整站字号和间距 - 常见误用：
line-height: 1.5em在em下会继承计算，建议直接用无单位值（line-height: 1.5），它本身是相对于当前字体大小的倍数，不依赖 em/rem
百分比在宽度/高度上更贴近“流体布局”本质
百分比是相对于父容器的宽高计算的，天生适合做自适应容器，比如侧栏+主内容的两栏布局：
-
width: 70%的主区 +width: 30%的侧栏，拉伸窗口时自动等比缩放 - 但慎用于字体：
font-size: 120%实际等于1.2 × 父元素 font-size，和em行为一致，嵌套多了照样难控 - 高度用百分比需警惕：父容器若没设
height（或min-height），height: 80%会算出0—— 这是 css 渲染规则，不是 bug
实际项目推荐组合：rem 做字体/间距 + 百分比做容器 + px 做微调
没有银弹，但有经过验证的分工逻辑：
立即学习“前端免费学习笔记（深入）”；
- 根元素
html用 js 或媒体查询动态设font-size（如16px→18px→20px），后续所有rem值自动响应 - 卡片、列表项、栅格列宽用
%或flex/grid，避免硬写px宽度 - 边框、阴影、图标尺寸仍可用
px，因为它们本就不该随文本缩放（比如border: 1px solid #ccc细了才清晰） - 别在
rem上套calc()搞复杂公式，像width: calc(100% - 2rem)看似灵活，实则增加调试难度，多数时候直接用padding或margin更直白
真正麻烦的不是选哪个单位，而是同一类样式（比如按钮内边距）在不同组件里混用 px、rem、%，最后谁也说不清为什么点一下按钮它就“跳了一下”。