媒体查询元素不消失

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 是可见的，就像它应该的那样，但在更大的显示器上它们都会出现，即使我添加了 !important，"poweredby-mob" 也没有获得 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;}
}

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

媒体查询元素不消失

Media query element does not disappear

css

media-queries

prestashop-1.6