CSS响应式不触发的主因是viewport meta标签缺失或错误，导致移动端以桌面视口渲染；其次为@media语法不规范、断点不合理、样式优先级冲突或加载顺序不当。
CSS响应式样式不触发，多数时候不是代码写错了，而是关键环节被忽略了。核心问题往往出在设备识别、断点设置或加载逻辑上，而不是@media本身失效。
检查 viewport meta 标签是否缺失或错误
这是最常见也最容易被跳过的一步。没有它，移动端浏览器会以桌面视口（通常是980px左右）渲染页面，导致所有 max-width: 768px 类的媒体查询永远不匹配。
必须确保 HTML <head> 中有这行：
<meta name="viewport" content="width=device-width, initial-scale=1">注意：content 属性值里不能有空格或换行，也不能漏掉等号或引号；有些项目还会加 user-scalable=no，但建议保留缩放能力，尤其对可读性要求高的内容。
立即学习“前端免费学习笔记（深入）”；
@media 查询写法与生效条件
媒体查询不是“只要写了就自动适配”，它依赖两个前提：条件成立 + 样式未被更高优先级覆盖。
-
语法必须规范：and 前后都要有空格，括号完整，不能加分号，比如
@media screen and (max-width: 768px)✅，而@mediascreenand(max-width:768px)❌ - 断点要符合设备逻辑宽度：iPhone 14 Pro 的逻辑宽度是 390px，但某些安卓机可能是 412px 或 360px。别死守 400px，常用断点推荐 576px、768px、992px、1200px（Bootstrap 级别），更稳妥的是用 min-width 配合移动优先策略
- 样式位置很重要：把 @media 规则写在常规样式之后，否则容易被前面的宽屏样式覆盖；如果用外部 CSS 文件，确保它没被 !important 或内联 style 强行锁死
link 标签的 media 属性作用有限但有用
<link rel="stylesheet" media="..."> 是 HTML 层面的媒体条件，用于控制整个样式表是否加载，和 CSS 内部的 @media 不同。
- 它只做“开关”：比如
<link rel="stylesheet" href="print.css" media="print">表示仅在打印时加载该文件 - 它不参与样式计算过程，也不会像 @media 那样动态切换——一旦不匹配，整个文件都不下载，也就没有后续样式可谈
- 移动端基本不用它做响应式，因为无法响应屏幕缩放或横竖屏切换；真正需要响应式时，还是得靠 CSS 内部的 @media + viewport
快速验证与调试方法
别猜，直接看：
- 按 Ctrl+Shift+M（Chrome/Edge）进入设备模拟模式，选真实机型（如 iPhone SE、Pixel 5），观察元素尺寸和 computed width
- 打开 Elements 面板，选中目标元素，在 Styles 右侧找你的 @media 规则——如果被划掉，说明没命中；如果根本没出现，说明语法错误或未加载
- 在 Console 面板里搜 “Invalid CSS property” 或警告信息，有时一个错位的括号会让整段 @media 失效
- 临时加一条测试样式，比如
@media (max-width: 768px) { body { background: red !important; } }，看背景是否变红，快速定位是否生效
基本上就这些。不复杂，但容易忽略 viewport 或空格这种小细节。
