viewport是第一道生死线，因手机浏览器默认按980px宽度渲染，必须用width=device-width和initial-scale=1.0确保按设备真实宽度显示且不缩放，缺一不可。
viewport 标签必须加，且必须写对——不加或写错，页面在手机上基本不可用。
为什么 viewport 是第一道生死线
手机浏览器默认按约 980px 宽度渲染页面，width=device-width 才能让它改用设备真实宽度；initial-scale=1.0 确保加载时不自动缩放。这两个参数缺一不可。
常见错误包括：
- 漏掉
initial-scale=1.0，导致 iPhone 上文字小到看不清 - 写成
width=375或width=414，安卓机直接失效 - 加了
user-scalable=no却没处理中老年用户双指缩放需求，引发投诉 - 把
meta标签放在 CSS<link>之后，部分 Android WebView 会先按默认 viewport 渲染再重排，闪屏明显
rem 和 vw 别混着用，选一个就到底
rem 依赖根字体大小，适合需要精细控制字号阶梯的场景（比如多端一致的 UI 组件库）；vw 是视口宽度百分比，写 font-size: 4.2vw 能让 750px 设计稿的 16px 字号在任意宽度下等比缩放，但小屏下可能过小、大屏下过大。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 用
rem就统一所有尺寸：字体、内边距、外边距、容器宽高全走rem，根字体用 JS 动态设（如document.documentElement.style.fontSize = `${window.innerWidth / 375 * 16}px`） - 用
vw就只用于字体和关键间距，避免width: 50vw这类写法——它不考虑父容器，容易撑破布局 - 别在同一个项目里既用媒体查询调
html的font-size，又用 JS 动态算rem基准，逻辑冲突难调试
图片和 canvas 不是加个 width: 100% 就完事
img 必须配 height: auto，否则拉伸变形；canvas 更麻烦：CSS 设为 100% 只控制显示尺寸，实际绘图像素（canvas.width/canvas.height）没变，结果就是模糊或压缩。
正确做法：
-
img：统一加max-width: 100%; height: auto; -
canvas：监听resize，用getBoundingClientRect()拿显示宽高，再乘以window.devicePixelRatio设置canvas.width和canvas.height - vivo、小米等新机型屏幕宽高比多变（如 21.5:9），仅按宽度缩放
canvas会导致黑边或拉伸，得结合object-fit: contain或手动计算缩放系数
Flexbox 和 Grid 的坑比想象中深
现代布局不是“用了就自适应”，而是“用对才自适应”。display: flex 默认不换行，flex-wrap: wrap 必须显式写；grid 的 fr 单位是剩余空间份数，不能和 px 混在 grid-template-columns 里写（比如 100px 1fr 200px 会导致第三列被压缩）。
关键细节：
- 移动端优先用
flex-direction: column，大屏再用媒体查询切回row -
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))比手写断点更可靠，但旧版 Android WebView（4.4）不支持gap，得用padding+margin模拟 - 别给 flex 容器设
width: 100%又加margin: 0 auto——它默认就占满父容器，多余代码反而干扰计算
真正卡住人的从来不是“怎么写”，而是 viewport 放错位置、canvas 忘设物理像素、或者以为 rem 和 vw 能共存——这些地方一错，整个适配链就断了。
