为什么媒体查询不适用于移动设备？

Question

我有以下代码

.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; 
    }
}

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

Answer 1

@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 所述，用逗号分隔 class 标识符。

此外，由于您的工作看起来像是网站优先方法，因此您不必同时包含这两个屏幕查询。第一个就可以了。

为什么媒体查询不适用于移动设备？

Why media queries don't work for mobile corectly?

css

sass

media-queries