css - 媒体查询元素不消失

Question

在 Prestashop 商店中，我有一个版权段落，我想将其显示在大型显示器的单行上，并在较小的显示器(即移动设备)上换行。 我为版权文本的两个版本创建了两个不同的 ID，如下所示:

    @media (max-width: 719px) {#poweredby {display: none;}}
      @media (min-width: 720px) {#poweredby {text-align: center;margin: -10px 0 -13px 0;display: block;}}
      @media (max-width: 719px) {#poweredby-mob {display: block;}}
      @media (min-width: 720px) {#poweredby-mob {display: none!important;}}

 <div id="poweredby" class="col-md-12 col-xs-12">
    COPY 1 - Single line
    </div>
    <div id="poweredby-mob" class="col-md-12 col-xs-12">
    COPY 2 - Two lines
    </div>  


  

虽然结果很奇怪: 在移动显示器上，只有“poweredby-mob”div 是可见的，就像它应该的那样，但在更大的显示器上，它们都出现了，“poweredby-mob”没有获得 display:none 属性，即使我添加了 !important 也是如此。

知道为什么这个简单的媒体查询不起作用吗？

Answer 1

媒体查询可能对您如何构建它们很挑剔。试试这个。

@media (max-width: 719px) {
    #poweredby {display: none;}
    #poweredby-mob {display: block;}
}
@media (min-width: 720px) {
    #poweredby {text-align: center;margin: -10px 0 -13px 0;display: block;}
    #poweredby-mob {display: none!important;}
}

另一件有用的事情是选择一个“默认值”，无论是移动设备还是非移动设备，并在任何媒体查询之外设置这些样式。然后仅在需要时使用媒体查询来覆盖。这减少了人为错误的可能性。