viewport标签错误、媒体查询语法错误、css优先级覆盖、真机兼容性问题是媒体查询失效的四大主因，需依次检查clientwidth、html源码、devtools规则及选择器权重。
viewport 标签没写对或位置错了
媒体查询根本不会触发，90% 的情况是因为 <meta name="viewport"> 缺失、拼错、放错位置，或者属性不全。浏览器在移动端默认用 980px 宽度渲染页面，@media (max-width: 768px) 自然永远不匹配。
-
<meta name="viewport" content="width=device-width, initial-scale=1">必须出现在最顶部，且在所有<style></style>和<link rel="stylesheet">之前 - 常见拼写错误：
name="viewpoint"（少一个p）、content="width=device"（漏了-width）、content="width=320"（固定像素值，断点失效） - 真机调试时运行
document.documentElement.clientWidth：返回980或远大于设备逻辑宽度（如 390/414），就说明 viewport 没生效 - Next.js、UniApp 等框架可能自动生成 viewport，但你手动再加一条，后加载的会覆盖前一个——查最终 HTML 源码确认只有一条且内容正确
@media 语法写错导致整条规则被忽略
CSS 对媒体查询语法极其严格，一个字符错，整块规则直接被丢弃，控制台也不报错，你只会看到“没反应”。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 漏
and：@media screen (max-width: 768px)❌；必须写成@media screen and (max-width: 768px)✅ - 拼写错误：
max-with（不是max-width）、min-hieght（不是min-height） - 空格缺失：
@media only screenand(max-width: 768px)❌（screenand连一起）；应为@media only screen and (max-width: 768px)✅ - 括号不匹配或单位遗漏：
(width: 768)❌（缺单位）；(width: 768px)✅
样式被更高优先级规则覆盖
媒体查询“跑起来了”，但样式没体现出来，大概率是 CSS 层叠机制在起作用——不是断点没触发，而是你的规则被干掉了。
- 打开 DevTools → 选中目标元素 → 看对应属性旁有没有横线划掉：有，说明被其他规则覆盖
- 别急着加
!important：它只是临时探针，掩盖真实问题，且 Safari 中因解析顺序可能导致行为异常 - 提升选择器特异性更可靠：把
.nav-link改成.header .nav-link，或确保媒体查询内选择器与 HTML 结构完全一致（比如用body而不是.body） - 注意书写顺序：媒体查询块必须放在基础样式之后；否则同权重下，后声明的规则会覆盖前面的
安卓 WebView 和 Safari 的特殊坑
真机上失效但 DevTools 模拟正常？这几乎可以锁定是安卓 WebView 或 Safari 的兼容性细节在作祟。
- 安卓某些 WebView（如旧版 UC、X5 内核）会无视
initial-scale=1.0，可临时加minimum-scale=1.0, maximum-scale=1.0验证是否为 scale 导致（但不要长期保留，它禁用缩放） - Safari 对
*通配符在媒体查询中渲染异常，尤其和重置样式叠加时；改用明确选择器如body替代* - 部分安卓机型逻辑宽度碎片化严重，
max-width: 768px可能卡在设备实际视口宽度（如 360px 设备显示为 390px 逻辑宽）边缘；建议用max-width: 375px/max-width: 414px等更贴近主流机型的断点 - 微信、QQ 浏览器等内置 WebView 可能注入额外 viewport 标签，务必检查最终 HTML 源码
clientWidth，再查 DevTools 里规则是否出现，最后比对选择器权重，比堆 !important 有效得多。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
