如何使用@media隐藏元素？

Question

我在CSS中使用@media查询，如何为特定的@media大小设置display：none并覆盖所有引导程序媒体设置？

我的HTML：

<div id="top" class="navbar navbar-fixed-top" role="navigation">
        <div class="container"> 
         Menu
        </div>
    </div>

我的css：

@media only screen and (max-width: 768px){
#top{
    dislay:none;
    }
}

我哪里错了？

Answer 1

你的css中的错字错误取代display:none

@media only screen and (max-width: 768px){
  #top{
    display:none;
  }
}

Answer 2

你刚写错了。它是display，而不是dislay。

如果将结构保留在对象所在的位置，但没有显示，请考虑使用visibility:hidden代替display:none。