viewport标签缺失或错误是响应式失效的首要原因；必须使用width=device-width，禁用user-scalable=no，断点应按内容而非设备设定，优先采用min-width写法，容器、字体、图片需用相对单位和弹性属性配合。
viewport 标签写错，@media 就全白搭——这是响应式失效最常见、也最容易被忽略的起点。
为什么加了 @media 但手机上还是缩成一团？
根本原因几乎总是：<meta name="viewport" content="width=device-width, initial-scale=1.0"> 缺失、拼错，或被写成 width=375、maximum-scale=1.0 这类硬编码值。
-
width=device-width必须原样写，不能替换成具体像素（比如width=768） -
user-scalable=no会禁用双击放大，违反可访问性要求，iOS Safari 下还可能让字体渲染异常 - 如果项目用了构建工具（如 Vite、Webpack），检查 HTML 模板是否被插件覆盖或注入了错误的
meta
@media 断点该按设备尺寸设，还是按内容设？
按内容设。所谓“内容撑开后开始难看”的那个宽度，才是真实断点。
- 先写桌面样式，再逐步缩小浏览器窗口，观察文字换行、卡片错位、图片裁切的位置——记下这个宽度，就是你的第一个断点
- 推荐用
min-width写法，符合移动优先逻辑：@media (min-width: 768px) { ... }，而不是max-width堆叠 - 3–4 个断点足够：480px（小屏）、768px（平板竖屏）、1024px（横屏/小桌面）、1200px（宽屏）；别为了“覆盖所有 iPhone 型号”硬加 390px、430px 等细碎断点
容器、字体、图片怎么配合 @media 才不翻车？
固定像素单位（px）是响应式的天敌。哪怕媒体查询写得再准，width: 320px 或 font-size: 16px 也会让适配前功尽弃。
立即学习“前端免费学习笔记（深入）”；
- 容器宽度优先用
%或max-width+margin: 0 auto；避免width: 100%套死父级导致溢出 - 字体用
rem：根元素font-size可随视口动态改，例如html { font-size: 16px; }，再在@media里调整为14px - 图片必须加
max-width: 100%; height: auto;；禁用固定height，否则拉伸变形
Flex/Grid 和 @media 怎么协同，而不是互相打架？
Flex/Grid 是布局骨架，@media 是切换开关。关键在于：不要在每个断点里重写整套布局，只改必要属性。
- 用
flex-wrap: wrap+flex-basis控制换行时机，比在每个断点里写display: block更干净 - Grid 推荐用
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))，它本身就有响应能力，@media只需微调间距或列数 - 调试时临时删掉所有
@media块，看基础流式结构是否可用——如果不可用，问题不在媒体查询，而在 HTML 结构或基础 CSS
真正卡住人的从来不是“怎么写断点”，而是忘了 viewport 标签要手敲、容器要用相对单位、图片要设 max-width——这些细节不落实，@media 写得再漂亮也没用。
