vw/vh 适配方案的工作原理是什么？它与 rem 适配有哪些不同？

回答思路

1. 【回答框架 1】vw/vh 是视口单位，vw 等于视口宽度的 1%，vh 等于视口高度的 1%。适配方案中，布局尺寸直接使用 vw/vh 表示，元素大小随视口尺寸等比变化，无需依赖根元素字体大小。
2. 【回答框架 2】rem 是相对单位，基于根元素 html 的 font-size。适配时通常通过脚本或媒体查询动态调整根元素字体大小，页面中所有 rem 值随之等比缩放。rem 的缩放依据是根字体，而不是视口本身。
3. 【回答框架 3】两者核心区别在于参考基准不同：vw/vh 直接以视口为基准，天然实时响应视口变化；rem 以根元素字体为中间层，需要额外设置根字体，且根字体变化可能受用户浏览器字号设置影响，导致缩放比例与视口不完全一致。
4. 【回答框架 4】vw/vh 在布局中更直观，适合对尺寸精确等比要求的场景；rem 在统一控制字号或与 px 混合使用时更灵活。实际项目中可结合两者，如使用 rem 保证整体缩放，局部细节用 vw/vh 精确控制。
5. 【关键点 1】vw/vh 直接基于视口尺寸，rem 基于根元素字体大小
6. 【关键点 2】vw/vh 无需依赖根字体，rem 需要动态设置根字体
7. 【关键点 3】vw/vh 响应视口变化更直接，rem 受根字体设置影响
8. 【易错点 1】vw/vh 在移动端可能受滚动条宽度影响，导致宽度计算偏差
9. 【易错点 2】rem 适配需处理根字体与浏览器默认字号的关系，避免缩放异常