响应式布局核心是视口、流式结构、断点三者闭环；viewport meta 标签错误会导致文字过小、横向滚动等；断点须按视口宽度而非设备类型设置；flex/grid 需配合流式单位；导航折叠应纯 css 实现；本质是适配信息密度与交互路径。
响应式布局不是“加几个媒体查询就完事”，核心是视口、流式结构、断点三者闭环。缺一环，哪怕 CSS 写得再漂亮，iOS 上文字照样小到看不见，安卓上按钮照样点不中。
viewport meta 标签写错等于没做响应式
几乎所有移动端显示异常——文字极小、横向滚动条、点击区域偏移——都源于这行缺失或参数错误：<meta name="viewport" content="width=device-width, initial-scale=1">。它不是装饰，是现代浏览器渲染的开关。
- 别写
width=1200或user-scalable=no，前者锁死宽度，后者破坏可访问性 -
initial-scale=1必须显式声明；iOS Safari 在某些 zoom 状态下会忽略隐式值 - 如果用 Webview（如 Cordova、WKWebView），还需检查原生层是否禁用了 viewport 缩放策略
@media 断点必须按视口宽度设，而非设备类型
写 @media (max-width: 768px) 是对的；写 @media (max-device-width: 768px) 是错的。后者匹配的是设备物理分辨率，不是当前视口宽度，会导致 iPad 横屏时样式失效、折叠屏展开后仍走移动端逻辑。
- 断点数值应基于真实设计稿分界（如 480px/768px/1024px/1440px），而非“iPhone 宽度”这种模糊概念
- 避免嵌套过多媒体查询；优先用移动优先写法：
.box { width: 100%; } @media (min-width: 768px) { .box { width: 50%; } } - 不要用
device-pixel-ratio做布局判断——它只该用于图片资源切换，和布局无关
flex / grid 必须配合流式单位，不能混用固定像素
用 display: flex 却给子项写 width: 200px，等于白搭。响应式布局里，尺寸控制权必须交给容器和媒体查询，而不是元素自身。
- 主容器用
max-width+margin: 0 auto，内部项用flex: 1或flex-basis: 300px（非width） - gap 比 margin 更可靠，但 IE11 不支持，需降级：
.item:not(:last-child) { margin-right: 1rem; } - 避免在 flex 项上同时写
width和flex，浏览器计算优先级混乱，尤其在 Safari 15.6+ 中易出错
导航栏折叠必须用 checkbox + ~ 选择器，别依赖 JS
纯 HTML 无法响应式，但纯 CSS 可以实现汉堡菜单开合——前提是结构合规、选择器可用。JS 加载失败时，用户就卡在无菜单状态，这是真实线上事故高发点。
- HTML 结构必须是：
<input type="checkbox" id="nav-toggle"><label for="nav-toggle"></label><ul class="nav-menu">...</ul> - CSS 触发靠：
input:checked ~ .nav-menu { max-height: 300px; }，不能用display: none（过渡无效） -
max-height值要略大于所有子项总高；若菜单项动态增减，预估值比fit-content更稳（后者在多数浏览器中不触发动画）
最常被忽略的一点：响应式不是“让页面变小”，而是让信息密度、操作路径、焦点顺序在不同视口下依然合理。一个在桌面端完美的三列网格，到了手机上如果只是强行堆成一列，而没重排 tab 键序、没压缩交互层级、没隐藏非关键入口，那它只是“能看”，不是“可用”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
