vw 适配方案
vw 适配直接用视口单位写字号：32px 字号在 375 设计稿上等于 8.53vw，写成 font-size: 8.53vw 后字号随屏幕等比变化，无需任何 JS。
与 rem 方案一样是等比缩放，但纯 CSS 实现、零脚本。通常配合 SCSS 函数 px2vw 自动换算。
- 1vw = 视口 1%，换算：目标 px / 设计稿宽 × 100
- 纯 CSS 方案，无需 JS
- 有同样的大屏放大问题，需配合 min()/max() 限幅
CSS
/* 设计稿 375px：32px 字号 = 32/375*100vw ≈ 8.53vw */ .title { font-size: 8.53vw; } /* 卡片 padding 16px -> 4.27vw */ .card { padding: 4.27vw; } /* 限幅：屏幕超过 750px 后字号不再变大 */ .page { max-width: 750px; margin: 0 auto; }
本节要点vw 适配是“缩放型”的纯 CSS 版本；为了大屏体验，务必给页面限宽。
