Wordpress 网站没有响应媒体查询的背景变化？迪维主题答案

【问题标题】：Wordpress site not responding to background changes from media queries? Divi themeWordpress 网站没有响应媒体查询的背景变化？迪维主题
【发布时间】：2023-03-18 10:03:01
【问题描述】：

我正在开发我的个人 WordPress 网站，当在 WordPress 主题定制器中使用媒体查询时，我的网站没有响应我对后台所做的更改。

我正在运行 Divi 主题，并使用 Chrome 的检查元素来查找我需要更改的类。

    @media only screen and (max-width: 768px) {
    .et_cover_background {
        background: url(https://echelon.enterprises/wp-content/uploads/2019/05/mobile-floor.jpg) repeat-y;
background-size:100vw;
    }
}
@media only screen and (min-width: 769) {
    .et_cover_background {
        background: url(https://echelon.enterprises/wp-content/uploads/2019/03/echelon-enterprises.jpg) repeat-y;
    }
}

我希望每个页面的背景在桌面上更改为“echelon-enterprises.jpg”，并根据屏幕尺寸更改为“mobile-floor.jpg”。我在这里做错了什么？我只是针对错误的班级吗？我也试过“et-main-area”类，还是不行。

【问题讨论】：

您的 CSS 看起来不错，但如果您不列出相关的 HTML，我们无法判断您的选择器是否无效。您也可能只需要清除缓存。试试CTRL + SHIFT + R。
@ObsidianAge 您应该能够从“查看页面源代码”中看到 HTML 对吧？ Here 是。我曾尝试清除缓存并以隐身模式打开（就像我在测试网站时通常所做的那样），但仍然没有成功。
(min-width: 769) 应该是 (min-width: 769px)
你能提供一个minimal reproducible example 来证明这个问题吗？我很难在您的实际网站上找到此处提到的 CSS。

标签： css wordpress divi-theme

【解决方案1】：

第二个声明缺少 px

 @media only screen and (max-width: 768px) {
     body.et_cover_background {
         background: url(https://echelon.enterprises/wp-content/uploads/2019/05/mobile-floor.jpg) repeat-y;
         background-size:100vw;
    }
}
 @media only screen and (min-width: 769px) {
     body.et_cover_background {
         background: url(https://echelon.enterprises/wp-content/uploads/2019/03/echelon-enterprises.jpg) repeat-y;
    }
}

【讨论】：