响应式布局核心三件事：写对viewport标签、用grid/flex替代固定宽高、所有尺寸单位避免px。viewport必须为且置于head中，禁用user-scalable=no；grid推荐repeat(auto-fit, minmax(280px, 1fr)))；图片需设max-width:100%和height:auto；gap宜用px而非rem以防缩放失衡。
直接上手就能跑通的响应式布局，核心就三件事：写对 <meta name="viewport">、用 grid 或 flex 替代固定宽高、所有尺寸单位别硬写 px。
viewport 标签漏写或写错，页面在手机上就废了一半
这不是可选项，是强制前置条件。没有它，浏览器默认按 980px 渲染，再好的 CSS 也白搭。
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">必须放在里，且不能拼错单词（比如把device-width写成device_width） - 别加
user-scalable=no—— 现代无障碍规范要求用户能缩放文字，禁用会触发 WCAG 检查失败 - 如果用了
initial-scale=1.0却没设width=device-width，iOS Safari 仍可能按桌面视口渲染
grid-template-columns: repeat(auto-fit, minmax()) 是新手最稳的起点
比 flex-wrap 少操心换行逻辑，比 float 不用清浮，语义和调试都更直给。
- 写死
repeat(4, 1fr)只适合固定四栏场景；真要响应式，必须用repeat(auto-fit, minmax(280px, 1fr))) -
280px是经过 iPhone SE（375px 宽）验证的安全下限，再小会导致文字挤成两行、按钮点击区过窄 - 别在父容器上同时写
max-width: 1200px和width: 100%—— 这会让1fr在小屏下算出负值，Grid 自动塌缩 - 子项内部必须约束图片：
img { max-width: 100%; height: auto; object-fit: cover; }，否则原始尺寸会撑破网格轨道
gap 比 margin 更干净，但用错单位照样崩
很多人以为加了 gap 就万事大吉，结果在 Safari 或小屏上出现间隙抖动、卡片叠在一起——问题常出在单位和兼容性上。
- 用
gap: 16px，别用gap: 1rem——rem随根字体缩放，会破坏网格节奏，尤其在用户调大系统字体时 - 旧版 Safari（gap 在
inline-grid上生效，容器必须是display: grid - 绝对不要一边写
gap: 16px，一边又给子项加margin: 8px—— 间距会翻倍，且auto-fit动态重排时行为不可预测 - 如果需兼容 IE11，可用
grid-column-gap和grid-row-gap替代，但别为它妥协现代写法
卡片高度不一致时，align-items: stretch 不是 bug，是默认行为
Grid 默认拉伸子项填满行高，导致短卡片被撑高、文字位置飘忽——这不是 Grid 的缺陷，而是你没主动控制对齐方式。
- 加
align-items: start到 Grid 容器上，让所有卡片顶部对齐 - 卡片内部用
display: flex; flex-direction: column; height: 100%，再用flex: 1给内容区吸底空间，margin-top: auto固定底部按钮 - 长单词（如 URL、技术名词）必须加
overflow-wrap: break-word，否则溢出容器，整个网格“无缝感”从这里撕裂 - Flex 子项默认有
min-width: auto，若卡片内嵌 Flex，得显式写min-width: 0防止拉伸
真正难的不是写出那行 repeat(auto-fit, minmax())，而是每张卡片里的 img、每个标题的 overflow-wrap、甚至 gap 的单位选择，全都得守规矩。漏掉任意一环，网格就在那个点开始错位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
