漏掉标签，其他所有响应式代码都白写；它不是可选优化，而是移动端渲染开关，缺失或写错（如拼成viewpoint、用固定宽度）会导致@media不触发、页面缩放显示。
漏掉 ，其他所有响应式代码都白写——这是最常被跳过的硬性前提。
viewport 标签必须加，且不能写错
它不是“可选优化”，而是移动端浏览器渲染页面的开关。没它，@media 规则根本不会触发，手机上看到的永远是缩放后的桌面版。
-
name="viewport"拼错成viewpoint或漏写，整个标签失效 -
content="width=device-width, initial-scale=1"是唯一可靠写法；width=1200这类固定值直接废掉响应能力 - 放在
最前面，避免页面闪动或重排；Vue/React 项目要手动检查public/index.html是否被模板覆盖 - 别加
maximum-scale或user-scalable=no，除非是 Kiosk 场景，否则破坏可访问性
图片和替换元素不设 max-width: 100% 就会溢出
默认情况下，、 不随容器缩放，哪怕父容器用了 flex 或 grid。
- 必须同时写：
max-width: 100%; height: auto;—— 少一个height: auto，图片就会拉伸变形 - SVG 需额外加
preserveAspectRatio="xMidYMid meet"，否则在不同宽高比设备上可能被裁切 - 如果父容器用了
display: flex，检查子元素是否被flex-shrink: 0锁死，导致max-width失效
断点别套“手机/平板/桌面”，按内容撑开临界点设
用 @media (max-width: 768px) 这类通用断点，很容易在折叠屏、高 DPR 平板或小屏笔记本上出问题。
- 打开 Chrome DevTools 的
Toggle device toolbar，拖动宽度，观察文字换行、按钮重叠、导航栏挤不下的那个像素值（比如624px），就用它 - 优先用移动优先：基础样式写默认态，再用
@media (min-width: ...)逐步增强，避免min-width和max-width套叠引发层叠冲突 - 横屏 iPad 上内容被截断？加
@media (min-width: 768px) and (orientation: landscape)单独处理，别只盯宽度
Flex/Grid 在老安卓 WebView 里会静默失败
Android 4.4 系统 WebView（Chromium 30）对 flex-wrap、gap、grid-template-areas 支持极差，但控制台不报错，只会回退到块级布局，现场看起来就是“样式丢了”。
- 关键业务需兼容老安卓时，用
float+ 百分比做降级方案，或引入autoprefixer补全前缀 - 测试不能只靠 DevTools 模拟器；真机上用
window.devicePixelRatio看真实 DPR，模拟器容易误判 -
max-device-width已废弃，一律用max-width（查的是视口宽度，不是设备物理宽度）
真正卡住人的往往不是技术本身，而是 viewport 标签位置不对、图片没加 height: auto、断点凭经验瞎填、或者在老安卓上连 flex-wrap 都不生效却还在调 CSS —— 这些地方一错，整页响应逻辑就断了链。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
