如何在ng-style中使用媒体查询

Question

我想使用ng-style和媒体查询来设置元素的宽度。

我试过这个：

    {'width' : @media (max-width: 480px)  ? '70%' : '90%' , 'border-radius': '6px', 'background':'#F5F2ED'}

但它似乎不起作用。

有什么想法吗？

Answer 1

让我们看看这个指令来源：

var ngStyleDirective = ngDirective(function(scope, element, attr) {
  scope.$watch(attr.ngStyle, function ngStyleWatchAction(newStyles, oldStyles) {
    if (oldStyles && (newStyles !== oldStyles)) {
      forEach(oldStyles, function(val, style) { element.css(style, '');});
    }
    if (newStyles) element.css(newStyles);
  }, true);
});

没有任何东西可以支持此功能。

Answer 2

这个问题有一个技巧，

  

在您的外部<div>

中创建另一个内部<div>

它之所以有效，是因为您可以通过将值设置为0，none或initial来撤消所应用样式的效果。

实施例

您想要的<div> 效果         

            
• IN TS：根据从父解析的数据设置 background-color 。 （无法用CSS做）
            
• IN CSS：无背景当屏幕宽度大于1024px时（您不希望检查宽度在TS中相应更改）
        

您遇到的问题是： 使用[ngStyle]设置样式时，对于大于1024像素的设备，将覆盖您的媒体查询。

解决方法是：您创建内部div并将css设置为：

    outer div | color according to the data parsed in, use [ngStyle]
    max-width |       more than 1024       |       less than 1024 
    inner div |  background-color : white  |  background-color : initial

在您的HTML

中

 <div [ngStyle]="'background-color':color[2]">
        <div class="inner">
            some component
        </div>
    </div>

在CSS中

 .inner{
   background-color: white;
  }

   @media (max-width:1024px){
      background-color: initial;
  }

在您的TS

中

     @Input() color

这将反转效果或将其设置为none，以便可以应用外部div颜色。

另外，请注意，内部div的CSS超过1024px应该是您的默认网站主题背景，因此请更改为您的默认背景。

因为它们位于不同的div外部div不能覆盖内部div。