创建响应式屏幕时如何在 CSS 中删除/隐藏类广告

Question

当屏幕小于某个尺寸时，我试图隐藏添加。

相关的html部分是：

<div id="content">
  <div id="articles">
    <h2>Article</h2>
    <p>Some article text.  Yadda yadda yadda yadda yadda.</p>
    <h2>Another Article</h2>
    <p>Some more article text.  Yadda yadda yadda yadda yadda...</p>
    <img src="ad.jpg" class="bannerad">
  </div>

我现在的 css 是：

@media screen and (max-width:480px)
 {
    #menu 
      {
       background-color: green;
      }
    #menu li
      {
       display:block;
       padding:15px;
       margin:0px;
      }
    #header 
      {
       color:green;
       font-style:italic;
       text-transform: uppercase;
      }
    #content h2{color:green};
    .bannerad {display:none};
}

如何设置横幅广告部分的格式以隐藏广告？

Answer 1

@media screen and (max-width:480px) {
    #menu {
        background-color: green;
    }

    #menu li {
        display:block;
        padding:15px;
        margin:0px;
    }

    #header {
        color:green;
        font-style:italic;
        text-transform: uppercase;
    }

    #content h2 {
        color: green;
    }

    .bannerad {
        display: none;
    }
}