如何使用 ng 风格的媒体查询

Question

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

我试过这个：

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

但它似乎不起作用。

有什么想法吗？

Answer 1

这个问题有个窍门，

在你的外部<div> 中创建另一个内部<div>

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

示例：

你想要的效果你的<div>

• IN TS：根据从父级解析的数据设置背景色。 （在 CSS 中无法做到）
• 在 CSS 中：无背景当屏幕宽度大于 1024 像素时（您不想在 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

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

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

因为他们在不同的div外层div不能覆盖内层div。

Answer 2

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

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

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