请阐述 CSS 中 px、em、rem、vw/vh 这几种长度单位的差异，以及在实际项目中应根据哪些场景或条件选择使用它们？

回答思路

1. 【回答框架 1】px 是绝对单位，表示屏幕上的固定像素点，不受父级或根元素字体大小影响，常用于精确控制边框、阴影、1px 线条等，但高 DPI 屏幕上物理尺寸可能不一致。
2. 【回答框架 2】em 是相对单位，相对于当前元素的 font-size（若自身未设置则继承父级），因此会随上下文嵌套层级变化，容易产生累积效应，适合模块内局部缩放，但难以全局控制。
3. 【回答框架 3】rem 相对于根元素 html 的 font-size，只受根元素影响，无累积问题，便于全局统一调整，常结合媒体查询改变根字体大小实现整站缩放，是移动端适配的常用单位。
4. 【回答框架 4】vw/vh 相对于视口宽度和高度（1vw=视口宽度的1%），与元素父级无关，适合全屏布局、视口大小相关的组件（如轮播图高度），但注意移动端浏览器 URL 栏会造成 vh 变化，需结合 vh/100 或媒体查询处理。
5. 【回答框架 5】选择原则：项目若需响应式适配，优先 rem 结合根字体或媒体查询；组件内部等比缩放用 em；固定尺寸用 px；视口相关场景用 vw/vh。具体还应考虑浏览器兼容性、设计师习惯和团队约定。
6. 【关键点 1】px 是绝对单位，em 相对父级字体，rem 相对根字体，vw/vh 相对视口。
7. 【关键点 2】rem 避免 em 的嵌套累积问题，利于全局控制。
8. 【关键点 3】vw/vh 适合视口驱动布局，但移动端浏览器动态栏会影响 vh 实际值。
9. 【关键点 4】选型需结合项目需求：响应式优先 rem，局部缩放用 em，固定精确用 px。
10. 【易错点 1】误以为 em 永远等于父级字体大小，实际是当前元素自身字体大小（继承或显式设置）。
11. 【易错点 2】忽略 rem 依赖根字体大小，若动态修改 html 的 font-size 会引发全局变动，需注意性能。
12. 【易错点 3】在移动端直接使用 vh 可能因浏览器地址栏收起/展开导致布局跳动，需使用稳定视口单位或计算。