响应式布局成功的关键是：必须在开头正确声明viewport标签，合理选择flex（一维）或grid（二维）布局工具，并确保内容不撑破容器。
新手做响应式布局，最常卡在「写了 CSS 却没效果」——大概率是 viewport 标签漏了、写错位置，或混用了 flex 和 grid 导致行为不可控。真正能跑通的最小闭环就三件事：正确声明 viewport、选对一维/二维布局工具、让内容不撑破容器。
viewport 标签必须放在
它不是“锦上添花”，而是浏览器渲染响应式的开关。漏掉或放错位置，后续所有 CSS 都白写。
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">必须出现在里，且在<meta charset>之后、任何 CSS/JS 之前 - 动态用 JS 插入（比如
document.head.appendChild()）完全无效，iOS Safari 和多数安卓 WebView 直接忽略 - 多个
viewport标签并存时，浏览器只取第一个，其余静默丢弃 - 别加
maximum-scale=1或user-scalable=no——这会禁用双指缩放，违反可访问性要求，还可能触发 iOS 输入框强制放大
flexbox 和 grid 别混在同一个容器里
新手容易把导航栏用 flex、内容区又套一层 grid，结果小屏下塌陷、错位、高度算不准。这不是 bug，是规范限制。
-
flex适合一维排列：比如手机竖排导航 → 平板横排导航；左侧简介 + 右侧经历的两段式履历页 -
grid适合二维区域划分：比如卡片画廊、后台仪表盘、带侧边栏的内容页 - 不要在
display: flex容器里直接设子元素为display: grid做主布局——语义混乱，Android 4.4 WebView 等旧环境可能直接忽略gap或flex-wrap - 真机测试时注意：iOS Safari 10 以下不支持
vw单位用于font-size，若用4.266667vw设根字体，需 fallback 到 JS 动态设置
卡片画廊用 grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) 就够了
这行代码能自动适配从 iPhone SE 到折叠屏展开的各种宽度，但前提是卡片内部不做死撑行为。
-
minmax(280px, 1fr)中的280px是最小列宽底线，不是随便写的：内容少可压到240px，但标题+描述稍多就建议起步值设为280px - 必须用
auto-fit，不是auto-fill：前者收缩空轨道，后者保留空列占位——小屏下auto-fill会让三张卡片被硬塞进一屏，文字挤成两行还看不清 -
标签必须加
max-width: 100%和height: auto，否则按原始尺寸渲染，直接撑破网格项 - 文字过长要用
overflow-wrap: break-word或word-break: break-word，别只靠text-overflow: ellipsis（它需要固定高）
本地双击打开 HTML 看不到响应效果？不是代码问题，是协议限制
Chrome/Firefox 直接双击打开 file:// 协议的 HTML 文件时，@supports 检测、部分 vh 计算、甚至模拟器 viewport 行为都会异常。这不是你写错了，是浏览器本身不支持。
- 正确做法：用 VS Code 装 Live Server 插件，右键 → “Open with Live Server”，起一个本地
http://127.0.0.1:5500服务 - 验证是否生效：Chrome DevTools 切 iPhone 模拟器 → Elements 面板看
的clientWidth—— iPhone 13 应接近390，不是980 - 微信内置浏览器等 X5 内核对
viewport更敏感，如果嵌在微信中白屏或横向滚动，先检查是否写了width=1024这类固定值
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
