WordPress html5blank主题媒体查询服务器端失效问题求助

嘿，我之前用html5blank主题开发WordPress站点时，也碰到过媒体查询本地正常、上线失效的坑！给你几个实用的排查和解决方向：

1. 先检查Viewport元标签有没有加 #

这是最容易踩的坑！移动端媒体查询生效的前提是浏览器知道要适配设备宽度。你打开header.php看看<head>里有没有这段代码：

<meta name="viewport" content="width=device-width, initial-scale=1">

要是没有，赶紧把它加到CSS链接之前——没有viewport的话，移动端浏览器会强行把页面按桌面宽度渲染，媒体查询根本触发不了。

2. 排查CSS优先级被覆盖的问题 #

哪怕你把媒体查询放在style.css最后，主题自带的样式也可能因为选择器更具体，把你的样式覆盖了。可以先做个测试：给媒体查询里的样式加个!important（测试完记得去掉，改用更具体的选择器）：

@media screen and (max-width: 768px) {
  body .your-target-element {
    background-color: red !important; /* 先验证是否生效 */
  }
}

如果生效了，就说明是优先级问题，后续把选择器写得更具体（比如结合父元素的类名），替代!important。

3. 清空缓存！本地和线上缓存不一样 #

本地环境没缓存，但WordPress站点大概率有缓存插件（比如WP Rocket、W3 Total Cache），或者浏览器缓存了旧的style.css。试试这几个操作：

• 按Ctrl+Shift+R（Windows）或Cmd+Shift+R（Mac）强制刷新页面，跳过浏览器缓存
• 如果你装了缓存插件，去插件后台清空所有缓存
• 给style.css加个动态版本号，确保每次修改都加载最新文件：把header.php里的CSS链接改成这样：

<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>?v=<?php echo time(); ?>">

4. 再确认媒体查询的语法是否正确 #

哪怕你说只留了测试查询，也再检查一遍语法细节：有没有漏掉screen and？括号、大括号有没有配对？比如正确的测试写法应该是：

@media screen and (max-width: 600px) {
  body {
    background-color: blue;
  }
}

语法错误的话，浏览器会直接忽略这段CSS。

5. 确认style.css是否真的被加载了 #

打开浏览器开发者工具（按F12），切换到「网络」标签，刷新页面后搜索style.css，看它的状态码是不是200（成功加载）。如果没加载，检查header.php里的CSS链接是不是用了get_stylesheet_uri()——html5blank主题默认用这个函数调用style.css，要是写错了路径，CSS加载失败，媒体查询自然没用。

6. 检查有没有其他CSS文件后来居上 #

有些主题会加载额外的响应式CSS文件，要是这些文件在你的style.css之后加载，就会覆盖你的媒体查询。你可以用开发者工具的「元素」标签，选中要修改的元素，看样式面板里你的媒体查询样式是不是被划掉了（表示被覆盖），找到覆盖它的样式来源，再调整自己的选择器优先级。

内容的提问来源于stack exchange，提问作者Josue