必须添加且写对<meta name="viewport">标签，否则@media等响应式代码失效；标准写法为<meta name="viewport" content="width=device-width, initial-scale=1">，需置于<head>最前。
漏掉 <meta name="viewport">，其他所有响应式代码都白写。 它不是“锦上添花”，而是移动端渲染的开关——没有它，@media 规则根本不会触发，Flex/Grid 会按桌面宽度（通常是 980px）强行渲染，页面直接变小缩略图。
为什么 <meta name="viewport"> 必须加、且必须写对
常见错误现象包括：手机打开页面后文字极小、左右滑动才能看全、点击区域错位。这些八成是 viewport 标签缺失或参数拼错导致的。
-
name="viewport"拼成name="viewpoint"或漏写，浏览器直接忽略 -
content="width=1200"这类固定值，让页面永远以 1200px 渲染，失去响应能力 - 加了
user-scalable=no却没意识到它禁用双指缩放，影响可访问性 - 在 Vue/React 等构建工具中，
public/index.html被模板覆盖，实际没生效
标准写法只有一行，且必须放在 <head> 最靠前位置：
<meta name="viewport" content="width=device-width, initial-scale=1">
@media 断点别硬套 768px / 992px
断点不是设备分类，而是内容撑开的临界点。写死 @media (max-width: 768px) 会导致折叠屏、高 DPR 平板、小屏笔记本等场景失效。
立即学习“前端免费学习笔记（深入）”；
- 用 Chrome DevTools 的 “Toggle device toolbar” 拖动宽度，观察导航文字何时换行、卡片何时重叠、按钮是否被截断
- 记下那个具体像素值（比如 624px），再写
@media (max-width: 624px) - 避免嵌套媒体查询：
@media (min-width: 768px) { @media (orientation: landscape) { ... } }在部分浏览器中不解析 - 需要横竖屏区分时，直接写
@media (min-width: 768px) and (orientation: landscape)
图片和容器尺寸必须配对约束
img、video、iframe 这类替换元素默认不随父容器缩放。只设 width: 100% 会拉伸变形；只设 max-width: 100% 又可能在大屏下过小。
- 标准组合是：
img, video, iframe { max-width: 100%; height: auto; } -
height: auto必须加，否则等比缩放失效 - 如果父容器用了
display: flex，检查子元素的flex-shrink是否为 0 —— 它会阻止max-width生效 - SVG 需额外加
preserveAspectRatio="xMidYMid meet"，否则可能被裁切
Flexbox 和 Grid 在老安卓 WebView 里容易静默失败
Android 4.4 系统 WebView（基于 Chromium 30）对 flex-wrap、gap、grid-template-areas 支持极差，但控制台不报错，只会回退到块级流布局，导致结构错乱。
- 关键布局别只依赖 Flex/Grid：用
flex: 1分配空间时，补一句min-width: 0防止溢出 - Grid 列数自适应推荐写法：
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))，兼容性比auto-fill更稳 - 测试阶段必须真机跑 Android 4.4+，不能只信模拟器
最易被忽略的是 viewport 标签的位置和拼写——它不在 CSS 里，不报错，却决定整个响应式逻辑能否启动。写完第一件事，是打开手机浏览器，看页面是不是“自然铺满”屏幕，而不是被缩成一团再让你手动放大。
