响应式布局核心是结构先行、约束后置，必须添加并采用移动优先策略，用min-width断点、弹性布局、max-width:100%图片控制及内容驱动的断点设置。
响应式布局不是“加几个 @media 就完事”，核心在于结构先行、约束后置。没做对底层 HTML 和视口控制，光调 CSS 断点只会越调越乱。
必须加 <meta name="viewport">，否则移动端直接失效
这是所有响应式布局的启动开关。没有它，iOS Safari 和多数安卓浏览器会以桌面视口（通常 980px）渲染页面，导致文字极小、需双指放大才能阅读。
-
width=device-width让视口宽度等于设备物理宽度（非像素比） -
initial-scale=1.0确保不缩放，按原始比例显示 - 避免
user-scalable=no：WCAG 明确要求允许缩放到 200%，禁用会构成可访问性障碍
错误写法：<meta name="viewport" content="width=980"> —— 这等于没写。
移动优先（Mobile-First）不是口号，是代码顺序和默认值的选择
所谓“移动优先”，是指把最小屏（如 320px）的样式写在最前面，作为基础；大屏样式通过 @media (min-width: ...) 逐步增强。这样能天然规避“桌面样式覆盖不了小屏”的问题。
- 基础容器用
width: 100%或max-width: 100%，而非width: 960px - 字体用
rem或em，避免全篇px固定值 - Flexbox/Grid 的
flex-wrap: wrap、grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))))这类弹性声明，要写在默认样式里，而不是断点里
反例：.container { width: 1200px; } @media (max-width: 768px) { .container { width: 100%; } } —— 这是“桌面优先”，小屏靠覆盖，容易漏改、难维护。
图片和媒体必须带 max-width: 100%，否则溢出不可逆
哪怕用了 <picture></picture> 或 srcset，如果父容器变窄而图片没约束，依然会撑破布局、触发横向滚动条。
- 通用规则：
img, video, iframe { max-width: 100%; height: auto; } - 不要只信
width: 100%：它在某些嵌套场景下会失效，max-width才是兜底保障 -
<picture></picture>中的<source media></source>必须配合srcset，单写media不会自动切换资源
典型报错现象：Horizontal overflow on mobile，往往就卡在这行没加。
断点（breakpoint）不是猜尺寸，而是看内容何时“撑不开”
别硬背 768px / 1024px，这些只是常见设备参考值。真正该设断点的地方，是当文字换行异常、卡片挤压变形、按钮过小难点击时——也就是内容开始“难受”的临界点。
- 优先用
min-width而非max-width：更符合移动优先逻辑，也利于 cascade - 避免断点嵌套过深：超过 3 层
@media嵌套会让调试成本陡增 - 断点值建议统一定义为 CSS 变量（如
--bp-tablet: 768px），方便全局调整
最容易被忽略的一点：断点里的 font-size、padding、margin 往往比布局更早需要调整——手指点击区域至少 44×44px，这比“几列变几列”更影响可用性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
