媒体查询不隐藏图像

Question

我想为宽度低于 800 像素的屏幕隐藏我的网站。

<body>
...
<img id="elephC" src="img/eleph.gif" alt="img">
...
<div id='minW'>
qadenzaClub
<br>
<div id='minW_red'>min 800 px<br>screen width required</div>
</div>
...
</body>

css

@media only screen and (max-width:799px){
body * {
 display:none;
}
#minW, #minW div, #minW br{
    display:block;
}
}

在 799px 上调整窗口大小，body 标签内的所有内容都被隐藏，elephC 图像除外！ （动画 gif）。

minW 和子 div 正确显示。

我在 W3C 验证服务上测试了标记和 css - 没问题。

Answer 1

更新 1. !important 关键字防止其他规则覆盖display 属性。

  @media only screen and (max-width:799px){
            body *{
             display:none !important;
            }
      #minW, #minW div, #minW br{
        display:block !important;
      }
 }

它现在为你自己工作Look :)