在拿到设计稿后，你会采用哪些具体方案来实现移动端页面的适配？请说明不同方案的适用场景与取舍。
考察说明
考查候选人对移动端适配方案的理解深度及实际选型能力。
回答思路
- 【回答框架 1】移动端适配的核心目标是让页面在不同屏幕尺寸和分辨率下保持合理的布局与可读性。常见方案包括：viewport 视口设置、rem 动态根字号、vw/vh 单位、flex 弹性布局、grid 网格布局以及媒体查询。
- 【回答框架 2】viewport 方案：通过 meta 标签设置 width=device-width、initial-scale=1，使页面按设备宽度渲染，配合 CSS 像素与物理像素的换算，是适配的基础。
- 【回答框架 3】rem 方案：以根元素 font-size 为基准，通过 JS 动态计算根字号（如按屏幕宽度除以设计稿宽度乘以基准值），页面内尺寸用 rem 表示，实现等比缩放。优点是可整体缩放，缺点是字体和间距可能失真。
- 【回答框架 4】vw/vh 方案：直接使用视口单位，1vw 等于视口宽度的 1%，无需 JS 计算，但存在小屏下元素过小、大屏下过大的问题，常与 clamp() 或媒体查询结合。
- 【回答框架 5】flex 和 grid 用于布局层面的自适应，媒体查询用于断点调整，通常与上述单位方案组合使用。实际项目中常采用 rem 或 vw 为主，配合媒体查询处理极端尺寸。
- 【关键点 1】viewport 设置是适配基础，必须设置 width=device-width。
- 【关键点 2】rem 方案通过动态根字号实现等比缩放，适合固定设计稿。
- 【关键点 3】vw/vh 直接基于视口，无需 JS，但需配合 clamp 或媒体查询。
- 【关键点 4】flex/grid 负责布局自适应，媒体查询处理断点。
- 【关键点 5】实际项目常组合使用，并需真机验证。
- 【易错点 1】rem 方案依赖 JS 计算，可能造成首屏闪烁或计算延迟。
- 【易错点 2】vw 方案在极端屏幕（如横屏、超大屏）下元素尺寸失控。
- 【易错点 3】过度使用媒体查询导致维护成本高，且无法覆盖所有设备。