媒体查询多重条件失效主因是逻辑冲突、语法错误或层叠顺序错乱；须规范使用and连接、避免非法运算符及纯height/width特性，确保各条件可同时满足。

媒体查询多重条件失效，核心不是“条件太多”，而是条件之间逻辑冲突、语法错误或层叠顺序错乱。解决关键在于理清匹配逻辑、规范写法、验证加载路径。

检查媒体条件是否合法且可同时满足

CSS 不支持 、>= 等运算符，也不支持纯 height 或 width 媒体特性（需用 max-height/min-width 等）。多个条件用 and 连接时，所有条件必须同时为真才触发：

• ❌ 错误：@media (max-width: 768px) and (height —— 非法，height 不是标准特性
• ✅ 正确：@media (max-width: 768px) and (max-height: 600px)
• ⚠️ 注意：orientation: landscape 和 max-width: 400px 在竖屏小手机上天然矛盾，永远不匹配

确认媒体查询规则是否被真正加载

浏览器对非法语法或不匹配的 会静默忽略整条规则或整个文件：

Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转

实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。

下载

• 打开开发者工具 → Elements → 选中目标元素 → Styles 面板，看你的 @media 块是否出现；若完全不显示，说明未解析
• 检查是否误把 @media 写在 标签外、注释内，或混入中文标点（如全角冒号、括号）
• 避免用 —— 这会阻止整个 CSS 文件加载，不是“条件应用”，而是“条件不下载”

避免多重条件被更高优先级样式覆盖

即使媒体查询成功匹配，也可能因 CSS 层叠机制被覆盖：

• 确保媒体查询块写在对应的基础样式 之后，否则后声明的基础样式会覆盖前面的媒体规则
• 内联样式（style="..."）或框架注入的动态 style（如 Vue 的 :style、React 的 style={{}}）特异性为 (1,0,0,0)，高于任何外部选择器，!important 也无效
• 若无法移除内联样式，可用属性选择器提权：@media (max-width: 768px) { [style] .target { color: red !important; } }

调试建议：快速定位失效环节

不要逐行猜，用实证方式分段排除：

• 临时改成 @media all { ... }，看样式是否立刻生效 → 若生效，问题一定出在媒体条件本身
• 在控制台执行 matchMedia("(max-width: 768px)").matches，直接查看当前视口是否匹配
• 用 Computed 面板查目标属性最终值来源，确认是来自 element.style、某 CSS 文件，还是被划掉失效

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！