必须加<meta name="viewport">，否则所有响应式代码失效；标准写法为<meta name="viewport" content="width=device-width, initial-scale=1">，须置于<head>最开头且唯一，漏写、错位、动态插入或多标签均导致移动端按980px渲染、文字过小、横向滚动及点击延迟。
必须加 <meta name="viewport"> 否则白做
不加这行，移动端浏览器会以桌面模式渲染页面，缩放成小字、横向滚动条全出来，用户第一眼就放弃。它不是可选项，是硬性前置条件。
正确写法只有一种主流组合：<meta name="viewport" content="width=device-width, initial-scale=1.0">。别加 maximum-scale=1.0 或 user-scalable=no——前者让阅读困难，后者违反 WCAG 可访问性要求，iOS Safari 甚至已部分忽略这类限制。
常见错误：
- 漏写或写在
<body>里（必须在<head>） - 写成
width=320这类固定值（失去响应意义） - 用
target-densitydpi（仅旧版 Android 支持，已废弃）
用 flex 或 grid 替代浮动和固定宽度
浮动布局（float）和像素级宽度（width: 200px）在移动端会直接导致溢出或错位。现代响应式布局只依赖两类 CSS 模块：Flexbox 用于一维排列（如导航栏、卡片列表），Grid 用于二维结构（如首页多模块网格）。
立即学习“前端免费学习笔记（深入）”；
推荐写法示例：
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 1rem;
}
这个写法意味着：每列最小 300px，最大均分剩余空间，自动换行；gap 保证间距统一，不随缩放崩塌。
注意点：
- 避免
width: 100%+padding组合（未设box-sizing: border-box时会撑破容器） - 慎用
flex: 1套嵌过深——某些安卓 WebView 会计算错误，优先用flex-grow显式控制 - Grid 的
auto-fit和auto-fill行为不同：auto-fit会合并空轨道，auto-fill保留空位，日常用auto-fit更稳妥
图片和文字必须设“弹性上限”
图片默认按原始尺寸渲染，文字默认用 px 字号，在窄屏上必然溢出或过小。这两类内容最容易暴露响应式缺陷。
基础防护措施：
- 所有
<img>必须加max-width: 100%; height: auto;（防止横向滚动） - 正文文字用
rem或em，标题可搭配clamp()实现流体字号：font-size: clamp(1rem, 2.5vw, 1.5rem); - 禁用
font-size: small这类绝对关键字——它们在 iOS 上实际渲染大小不可控 - 大段文本容器加
word-break: break-word;，防长英文单词撑破布局
别信“图片用 % 就够了”——width: 100% 不解决原始图过大问题，max-width 才是关键。
媒体查询断点别硬套 Bootstrap 数值
Bootstrap 的 768px、992px 是 2012 年平板兴起时的产物，现在大量手机屏幕宽度已超 900px（比如 Pixel 8 Pro 宽度 412px @2x → 视口宽度 412px，但很多国产机开启“桌面模式”后视口达 1280px）。照搬会导致小屏误判为桌面、样式错乱。
更务实的做法：
- 移动优先：先写无媒体查询的基础样式（适配 ≤480px）
- 用内容驱动断点：比如某段文字在 520px 开始换行难看，就设
@media (min-width: 520px) - 最多设 2–3 个断点，优先用
min-width（层叠安全，避免覆盖冲突） - 避免嵌套媒体查询——CSS 文件体积和维护成本陡增，用单独规则块更清晰
真正难的不是写多少断点，而是判断“哪里该变”。盯着真机调试比背数值重要得多。
