Css 为什么媒体查询不适用于手机？

УМцццццццц

.bg-if-premium {
    background-image: url(photo_2021-05-22_20-40-40.jpg);
    background-size: 100% 100% !important;
    background-position: fixed;
    background-attachment: fixed;
}

.bg-if-free {
    background-image: url(photo_2021-04-16_16-43-00.jpg);
    background-size: 100% 100%;
    background-position: fixed;
    background-attachment: fixed;
}

@media (max-width: 767px) {
    .bg-if-premium .bg-if-free {
        background-image: none; 
    }
}

@media (max-width: 480px) {
    .bg-if-premium .bg-if-free {
        background-image: none; 
    }
}

但在移动设备上，背景仍然存在。如何解决这个问题

@media screen and (max-width: 767px) {
  .bg-if-premium, 
  .bg-if-free {
        background-image: none; 
    }
}

@media screen and (max-width: 480px) {
  .bg-if-premium, 
  .bg-if-free {
        background-image: none; 
    }
}

包括@media屏幕和所需宽度，如Mordred所述，用逗号分隔类标识符

另外，因为它看起来像是从网站优先的方法开始工作，所以您不应该同时包含这两个屏幕查询。第一个就可以了。

我想你在媒体查询中可能需要一个介于.bg（如果是高级）和.bg（如果是免费）之间的，因为我猜一次只有一个是活动的。