移动端适配用 vw 配合 calc()，核心是按设计稿宽度比例换算并混合固定值；需避开滚动条、iOS vh 跳变等坑，可与 rem 共存。
移动端用 vw 配合 calc() 做适配，核心是把设计稿尺寸按比例映射到视口单位，再用 calc() 补足固定值或做精细调整。关键不在“全盘替换”，而在“该缩的缩，该稳的稳”。
按设计稿宽度换算 vw 值
假设设计稿宽 750px，某按钮宽 150px、高 44px、字号 28px：
直接换算为 vw 单位：
width: calc(150 / 750 * 100vw) = 20vw;height: calc(44 / 750 * 100vw) = 5.8667vw;font-size: calc(28 / 750 * 100vw) = 3.7333vw;
实际写时可四舍五入到小数点后 3 位，不影响视觉精度。
用 calc() 混合固定值，解决“不能全靠缩放”的问题
纯 vw 容易在横屏时文字过大、边框过粗、间距失衡。这时要保留部分固定值：
- 导航栏高度固定 48px，内容区占满剩余高度：
height: calc(100vh - 48px); - 卡片内边距需兼顾小屏阅读与大屏留白：
padding: calc(12px + 0.5vw); - 字体既要随屏缩放，又不能小于 14px 或大于 20px：
font-size: clamp(14px, 3.6vmin, 20px);（注意这里用vmin更稳）
避开常见坑：滚动条、iOS 地址栏、box-sizing
100vw 不等于屏幕物理宽度——它包含滚动条占位（通常 16px），直接用于容器宽易触发横向滚动条：
- 内容区域优先用
width: 100%;，不是100vw - 全屏遮罩、背景图等真正要撑满视口的场景，才用
width: 100vw; height: 100vh; - iOS Safari 中
vh在地址栏展开/收起时不重算，导致布局跳动；可用 JS 动态注入 CSS 变量：document.documentElement.style.setProperty('--vh', `${window.innerHeight * 0.01}px`);
然后 CSS 写：height: calc(var(--vh, 1vh) * 100); - 用
calc(100vh - 60px)时，若父元素有border: 1px solid或padding: 1rem，记得一并减掉：calc(100vh - 60px - 2px - 1rem)
和 rem 方案不冲突，可以共存
不是非此即彼。比如：
- 根字体仍用 rem 基准（如
html { font-size: calc(100vw / 37.5); }对应 375px 设计稿），保证 JS 能读取和控制 - 图标、头像、按钮等需要严格等比缩放的元素，用
vw直接定义宽高 - 文字、行高、外边距等对可读性敏感的属性，改用
rem或clamp()控制上下限
