我要隐藏宽度小于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-没关系。
最佳答案
更新
1. !important
关键字可防止另一个规则覆盖display
属性。
@media only screen and (max-width:799px){
body *{
display:none !important;
}
#minW, #minW div, #minW br{
display:block !important;
}
}
它现在为自己工作Look :)