结论：vw布局在iPhone上不生效，根本原因是viewport meta标签缺失或错误导致layout viewport未对齐物理宽度（如默认980px），使1vw=9.8px而非预期3.75px；必须设置且置于head最顶部。
直接说结论：别只盯着“自适应”三个字，先确保 viewport meta 标签写对，否则后面所有 CSS 都可能白调。
为什么 vw 布局在 iPhone 上不生效？
不是浏览器不支持 vw（Safari 6.1+、Chrome 20+ 都支持），而是 layout viewport 没对齐物理宽度。比如 iPhone X 默认 layout viewport 宽度是 980px，此时 1vw = 9.8px，远大于设计稿预期的 1vw ≈ 3.75px（按 375px 屏宽算）。
- 必须加
- 避免同时设
maximum-scale或user-scalable=no，它们会干扰 layout viewport 初始化 - 微信 X5 内核老版本有 bug：未触发 layout viewport 重置时，
vw仍按 980px 计算，可加window.dispatchEvent(new Event('resize'))强制刷新
用 vw 换算 px 时最常踩的坑
设计稿基准宽度通常是 750px，换算公式是：vw = (px × 100) / 750。但手算容易出错：
- 100px →
(100 × 100) / 750 = 13.333...vw，应保留两位小数写成13.33vw，不能四舍五入成13vw（在 375px 屏上差约 1.2px，文字/边框易模糊） - 推荐用 Sass 自动计算：
@function px2vw($px) { @return ($px / 750) * 100vw; } - 不要用
vw直接设border或font-size后就不管——小屏下1px可能缩成 0.27vw ≈ 0.8px，渲染发虚，需配合min-width或媒体查询兜底
flex 布局做九宫格时，最后一行为啥总偏移？
单纯写 display: flex; flex-wrap: wrap; 不够，justify-content: space-between 在最后一行子项不足时会让左右留白不均，视觉明显错位。
- 用
gap替代 margin 控制间距，更稳定且不影响对齐：.grid-container { gap: 10px; } - 子项宽度必须用
calc()扣掉 gap：3 列时写width: calc(33.333% - 6.666px)（10px gap → 每边占 5px） - 禁用
:nth-child(3n)清右距这种老办法，现代浏览器优先用gap；若要兼容 IE，则必须加overflow: hidden防子项溢出 - 响应式切列数（如从 3 列切到 2 列）时，
gap值不变，但calc()里的减项必须同步改，否则整体撑开或压缩
真正卡住人的从来不是“怎么写”，而是 viewport 是否生效、vw 小数精度是否丢失、flex 的 gap 和 calc 是否协同——这些点漏一个，页面就在真机上飘。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
