如何在 wordpress 主题中隐藏移动设备上的图像答案

【问题标题】：How to hide an image on mobile in a wordpress theme如何在 wordpress 主题中隐藏移动设备上的图像
【发布时间】：2020-07-10 16:44:37
【问题描述】：

我正在使用OceanWP 免费的 WordPress 主题，但在移动设备上遇到了标题问题。我用于标题的图像在台式机上看起来不错，但在移动设备和平板电脑设备上会被文本遮挡。我决定最好的粗略做法是将图像完全隐藏在桌面以外的任何东西上。

我尝试在样式表的第 2621 行添加这个 code-sn-p：

#site-header {
background-image: none;
}

sn-p 放在@media 语句中：

@media only screen and (max-width: 959px) {
[...]
}

我也在缩小版中添加了它，但图像仍然显示。

谁能看到我做错了什么？或者有其他可行的解决方法？

【问题讨论】：

【解决方案1】：

在您的 style.min.css 中，转到该媒体查询并将 !important 添加到您的背景图像标签。

@media only screen and (max-width: 959px) {
 #site-header {
  background-image: none !important;
 }
}

另外，在开发网站时，尽量不要缩小你的 css & js。完成所有操作后执行此操作，这样可以更轻松地进行编码和调整。

【讨论】：

这就像一个魅力！太感谢了。 !important 有什么作用？供将来参考。
@MadsChristoffersen 很高兴它有所帮助。 !important 使特定代码具有更高的特异性。基本上，当您有其他规则说特定元素必须为 50px 宽度时，如果您设置宽度规则并将 !important 设置为它，它将覆盖它。通常，您尽量不使用 !important 并相应地创建类和样式，但有时当涉及到 WordPress 主题时，您最好给它!important，而不是更改和调整影响 1 个特定元素的一百万个类。跨度>

【解决方案2】：

您的主题样式正在覆盖您自己的 css 文件。尝试更改加载 CSS 的顺序或在 background-image:none 之后添加 !important。像这样：

@media only screen and (max-width: 959px) {
    #site-header {
        background-image: none !important;
    }
}

顺便说一句，您似乎没有使用子主题。如果您想在以后更新主主题时保留所有更改，您可能想要这样做。更多详情请查看this。

【讨论】：