如何在WordPress附加CSS中调用@media媒体查询？

嘿，我太懂这种调样式时桌面端完美、移动端却死活不生效的憋屈了！大概率是你的媒体查询写法、优先级或者代码顺序出了问题，咱们一步步来搞定：

1. 先确认媒体查询的基础语法是否正确 #

很多时候是断点写错或者大括号没闭合导致的。建议用桌面优先的写法：先写默认的桌面端样式，再在后面写移动端的媒体查询规则，这样更符合CSS层叠逻辑。示例代码如下：

/* 桌面端默认样式（屏幕宽度大于768px时生效） */
.footer-widgets {
  margin: 40px 20px;
  padding: 30px;
}

/* 移动端媒体查询（屏幕宽度小于等于768px时触发） */
@media (max-width: 768px) {
  .footer-widgets {
    margin: 20px 10px; /* 缩小边距适配移动端 */
    padding: 15px;
  }
}

注：768px是常见的移动端断点，你可以根据自己主题的设计调整，比如改成600px或者375px

2. 排查CSS优先级冲突 #

WordPress主题自带的CSS可能用了更具体的选择器，比如.site-footer .footer-widgets，这时候你只写.footer-widgets就会被主题样式覆盖。解决方法：

• 用更具体的选择器，比如body .site-footer .footer-widgets
• 万不得已时可以加!important（尽量少用，避免后续样式混乱）

示例：

@media (max-width: 768px) {
  body .site-footer .footer-widgets {
    margin: 20px 10px;
    padding: 15px;
  }
}

3. 检查代码顺序 #

一定要把媒体查询写在桌面端样式的后面！因为CSS是从上到下解析的，如果把媒体查询放在桌面样式前面，后面的桌面样式会覆盖掉移动端规则，导致移动端不生效。

4. 清除浏览器缓存 #

移动端浏览器经常会缓存旧的CSS文件，导致新修改的样式不显示。你可以：

• 用浏览器的无痕模式打开网站
• 在移动端浏览器里下拉强制刷新
• 或者在WordPress后台的「设置-常规」里随便改个站点标题再改回来，触发缓存更新

5. 确认选择器是否匹配 #

有时候你用的类名和主题实际的类名不匹配！打开浏览器开发者工具（F12），切换到移动端模式，选中页脚小部件，查看它的真实类名（比如可能是.footer-sidebar或者.widget-area-footer），确保你的CSS选择器和它一致。

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