css媒体查询在手机上失效，90%是viewport标签错误：必须位于最顶部、含width=device-width和initial-scale=1.0、且全页面唯一；@media语法需严格正确；真机用document.documentelement.clientwidth验证；样式覆盖和特异性问题也需排查。
你在Laravel项目中写了CSS媒体查询，页面在手机上却始终显示桌面样式，背景色没变、导航没折叠、字体也没缩小——这不是Laravel的问题，而是媒体查询根本没被浏览器执行。
检查Viewport标签是否生效
打开浏览器开发者工具 → 切换到「Elements」标签 → 展开
→ 找到标签。确认它存在且内容为：【content="width=device-width, initial-scale=1"】。缺了initial-scale=1或写成width=375，断点就全废。
再看它是否紧贴
开头：前面不能有JS注入、不能有注释、不能有Blade @section 或 @push 生成的占位符——Laravel模板里常因@yield('styles')位置靠后，把viewport挤到之后，Safari直接无视。真机验证最准：在手机浏览器控制台输入document.documentElement.clientWidth，返回值如果是980或远大于375（比如1280），说明viewport完全没起作用。
验证媒体查询语法是否合法
方法一：打开DevTools → 「Styles」面板 → 找到你的@media规则 → 如果整块呈灰色、不可编辑、右侧无“:hover”图标，说明语法错误被浏览器静默丢弃。
重点检查三处：【漏and关键字】——@media screen (max-width: 768px) ❌ 必须写成 @media screen and (max-width: 768px) ✅；括号外多空格、单位缺失（768而不是768px）、拼错max-width为max-with，都会导致整条规则失效。
方法二：临时删掉所有CSS，只保留一条极简规则：
@media screen and (max-width: 320px) { body { background: red !important; } }
如果此时页面变红，说明原CSS里有语法错误或加载失败。
排查Laravel构建与加载环节
第一步：查看网页源码（右键→查看页面源代码）→ 搜索.css文件路径 → 确认链接地址能正常访问 → 打开该CSS文件，确认里面确实包含你写的@media块。
第二步：检查Vite或Mix配置 —— 若使用vite-plugin-purgecss或Laravel Mix的purge选项，【媒体查询中的选择器若未在Blade中实际出现，会被误删】。例如你写了@media (max-width: 768px) {.nav-mobile { display: block; }}，但.blade.php里根本没用到class="nav-mobile"，PurgeCSS就会把它连同整个@media块一起干掉。
第三步：清空浏览器缓存并禁用服务端缓存：Laravel默认开启APP_DEBUG=false时，可能启用了HTTP缓存头，改完CSS不生效，其实是服务器返回了旧版本。加时间戳强制刷新：。
确认CSS层叠顺序与选择器权重
步骤一：在DevTools中选中目标元素 → 看右侧「Styles」面板 → 找到你期望生效的媒体查询样式 → 如果属性被横线划掉，说明被更高优先级规则覆盖。
步骤二：对比基础样式和媒体查询内的选择器。例如基础写的是.header-nav { display: flex; }，媒体查询里写.nav-toggle { display: block; }，两者选择器不匹配，自然不生效。
步骤三：把媒体查询块统一挪到CSS文件末尾；若用@import或多个CSS文件，确保响应式规则所在文件加载在最后。Laravel中常见错误是把bootstrap.css放在app.css后面，结果bootstrap的通用规则盖掉了你的@media。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
