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属性，即使我添加了！重要的是它。

为什么这个简单的媒体查询无效？

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

另一件可以帮助的事情是选择＆＃34;默认＆＃34;，无论是移动还是非移动，并在任何媒体查询之外设置这些风格。然后仅使用媒体查询在需要时覆盖。这减少了人为错误的可能性。

媒体查询元素不会消失

1 个答案: