媒体查询多重条件失效主因是逻辑冲突、语法错误或层叠顺序错乱；须规范使用and连接、避免非法运算符及纯height/width特性，确保各条件可同时满足。
媒体查询多重条件失效，核心不是“条件太多”，而是条件之间逻辑冲突、语法错误或层叠顺序错乱。解决关键在于理清匹配逻辑、规范写法、验证加载路径。
检查媒体条件是否合法且可同时满足
CSS 不支持 、>= 等运算符，也不支持纯 height 或 width 媒体特性（需用 max-height/min-width 等）。多个条件用 and 连接时，所有条件必须同时为真才触发：
- ❌ 错误：
@media (max-width: 768px) and (height —— <code> 非法，<code>height不是标准特性 - ✅ 正确：
@media (max-width: 768px) and (max-height: 600px) - ⚠️ 注意：
orientation: landscape和max-width: 400px在竖屏小手机上天然矛盾，永远不匹配
确认媒体查询规则是否被真正加载
浏览器对非法语法或不匹配的 <link media> 会静默忽略整条规则或整个文件：
Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转
下载
实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。
- 打开开发者工具 → Elements → 选中目标元素 → Styles 面板，看你的
@media块是否出现；若完全不显示，说明未解析 - 检查是否误把
@media写在<style></style>标签外、注释内，或混入中文标点（如全角冒号、括号） - 避免用
<link rel="stylesheet" media="max-width: 768px">—— 这会阻止整个 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 文件，还是被划掉失效
