WordPress移动端取消图片灰度效果及媒体查询适用性咨询

一、让移动端不应用灰度效果的方法 #

因为移动端没有鼠标hover触发的交互，原来的样式会让图片一直保持灰度状态。你可以通过媒体查询给移动端单独设置样式，取消灰度效果：

保留原有的桌面端样式，再添加这段代码：

/* 移动端取消图片灰度效果 */
@media only screen and (max-width: 767px) {
    .course-hover .x-bg>.x-bg-layer-lower-image {
        filter: grayscale(0);
        /* 可选：如果不需要过渡动画，可改成transition: none; */
        transition: all .3s ease-in-out;
    }
    /* 移动端无hover状态，覆盖原有hover样式避免冲突 */
    .course-hover:hover .x-bg>.x-bg-layer-lower-image {
        filter: grayscale(0);
    }
}

你可以根据需求调整max-width的值，比如换成你提到的500px，或者用767px覆盖大部分手机屏幕尺寸。

二、关于媒体查询写法的可行性 #

你看到的那种媒体查询写法在WordPress样式表里完全可行。不管是直接写在主题的style.css文件中，还是通过WordPress后台「外观→自定义→额外CSS」功能添加，标准的媒体查询语法都能正常生效——WordPress对标准CSS完全支持，没有特殊限制。

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