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

Posted 2023-03-06

【中文标题】为啥媒体查询不适用于移动设备？

【英文标题】：Why media queries don't work for mobile corectly?为什么媒体查询不适用于移动设备？

【发布时间】：2021-08-14 03:51:55

【问题描述】：

У меня есть следующий код

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

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

【问题讨论】：

我认为您可能希望在您的媒体查询中使用介于 .bg-if-premium 和 .bg-if-free 之间的 ,，因为我猜一次只有其中一个处于活动状态。

【参考方案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 所说，用逗号分隔类标识符。

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