AngularJS：使用 css 媒体查询来调整屏幕大小

Posted 2023-03-06

【中文标题】AngularJS：使用 css 媒体查询来调整屏幕大小

【英文标题】：AngularJS: Using css media query for screen resize

【发布时间】：2014-08-05 20:53:42

【问题描述】：

我有一个现有的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>

【参考方案1】：

我做的与xe4me给出的答案略有不同。我想我仍然会在这里发布我所做的：

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

AngularJS：

app.directive('bestView', function($timeout) 
  return 
    restrict: 'A',
    link: function(scope, elem, attr, ctrl) 
      scope.$watch(
        function() 
          return elem.is(':visible');
        ,
        function(newval) 
          if(newval == true) 
            $timeout(function() 
              elem.remove();
            , 5000); //disappear after 5 seconds
          
        
      );
    
  ;
);

html：

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

【参考方案2】：

你可以这样做：

    // 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>

【讨论】：

我会测试这个解决方案。