title: AngularJS: Using css media query for screen resize
body: <p>I have an existing <code>CSS</code>, it does media query and displays a message box when the screen is resize to a certain size.  I want the message box to disappear after 5 seconds.</p>
  
  <p>Any idea how to do it in <code>AngluarJs</code>?</p>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>@media all and (max-width: 1024px), all and (max-height: 760px) {
    div#bestview {
      display: block;
      position:fixed;
      z-index: 9999; /* above everything else */
      top:0;
      left:0;
      bottom:0;
      right:0;
      background-image: url(../img/transpBlack75.png);
    }
  }
  </code></pre>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div id="bestview"&gt;The selected browser size is not optimal for.....&lt;/div&gt;
  </code></pre>