响应式布局需从viewport元标签开始构建完整机制，必须设置box-sizing:border-box、正确声明flex/grid容器、控制图片父容器宽度、按内容设媒体查询断点。
响应式布局不是“加个媒体查询就完事”，而是从 <meta name="viewport"> 开始的一整套约束与协作机制。漏掉任意一环，比如忘了设 box-sizing: border-box 或误用 float 混搭 flex，都会在小屏上出现内容溢出、换行错乱或 gap 失效等问题。
必须写对的 viewport 元标签
这个标签不是可选项，是移动端渲染的开关。写错或遗漏会导致页面被缩放成“迷你版”，用户得双指放大才能看清文字。
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">是唯一推荐写法；user-scalable=no会损害可访问性，别加 - 必须放在
<head>内，且在所有 CSS 加载前——如果用 JS 动态插入，已经晚了 - 某些 CMS（如 WordPress）可能默认注入额外 viewport 标签，导致冲突；检查最终 HTML 源码里是否只有一条
flex 和 grid 的容器声明不能省
很多人以为写了 display: flex 就万事大吉，其实子元素不会自动“响应”；真正起作用的是容器本身的 display 声明和子项的 flex/grid 属性配合。
- 对
<nav>或自定义标签如<my-grid>，必须显式写nav { display: flex; }，否则它仍是display: inline，不占满父容器 -
flex-wrap: wrap要主动加，否则子项超出容器宽度时会被裁剪或溢出，而不是换行 - 用
grid时，grid-template-columns必须写在容器上，不是子元素上；常见错误是把repeat(auto-fit, minmax(240px, 1fr)))写在div.card上，结果完全无效
图片和容器的尺寸控制要分层处理
一张图片在响应式布局里出问题，90% 不是因为它自己，而是它所在的容器没设好约束边界。
立即学习“前端免费学习笔记（深入）”；
- 图片本身：统一加
img { max-width: 100%; height: auto; }，禁用width: 100%（会拉伸变形） - 图片父容器：必须有明确宽度来源，比如
.card { width: 100%; }或.grid-item { flex: 1; }；如果父容器是display: inline或未设宽，max-width: 100%就失去参照 - 盒模型陷阱：默认
box-sizing: content-box，当同时设padding和width: 100%时，实际宽度 = 100% + padding，必然溢出；务必全局或至少对布局容器加box-sizing: border-box
媒体查询断点别硬编码，要按内容而非设备
所谓 “768px 是平板断点” 是经验参考，不是铁律。真实项目里，断点应由内容撑开的临界点决定——比如一个卡片在 620px 宽度下开始换行，那 @media (max-width: 620px) 才是合理断点。
- 移动优先写法更可靠：
.container { width: 100%; }作为基础样式，再用@media (min-width: 769px)逐步增强，避免覆盖逻辑混乱 - 别在 JS 里动态改
style.gridTemplateColumns；媒体查询规则应全部由 CSS 管理，JS 只负责交互状态（如菜单展开） - 多个组件共用同一断点时，统一写在根级 CSS，不要每个组件都重复写一遍
@media块，维护成本高且易冲突
最常被跳过的其实是 box-sizing: border-box 和容器 display 声明——它们不出错时不显眼，一出错就全盘崩，而且很难定位到根源。
