媒体查询元素不会消失

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”即使我添加了 !important 也没有获得 display:none 属性。

任何想法为什么这个简单的媒体查询不起作用？

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

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