css - AngularJS:使用 css 媒体查询调整屏幕大小

Question

我有一个现有的 CSS，它会执行媒体查询并在屏幕调整到特定大小时显示消息框。我希望消息框在 5 秒后消失。

知道如何在 AngluarJs 中做到这一点吗？

CSS:

@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);
  }
}

HTML:

<div id="bestview">The selected browser size is not optimal for.....</div>

Answer 1

你可以这样做:

    // make a directive in your app : 

    youApp.directive('hideme',function(){
       return{
          restrict:'A',
          link:function(scope,elem,att){
             var timeout = att.hideme*1; // *1 to convert it to integer:(
             setTimeout(function(){
                 elem.addClass('hidden');
              },timeout);
          }
       }
     });

     // in your css : 

       .hidden{
         display:none
     }

     // in your html:

     <div hideme="5000" id="bestview">The selected browser size is not optimal for.....</div>