angularjs - 如何使用 ng 样式的媒体查询

Question

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

我试过这个:

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

但它似乎不起作用。

有任何想法吗？

Answer 1

这个问题有个窍门

create another inner <div> in your outer <div>

它有效，因为您可以 反转效果您应用的样式，通过将值设置为 0 , none或 initial .
例子:
您想要的效果 <div>

IN TS:根据从父解析入的数据设置背景颜色。 (无法在 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

这将反转效果或将其设置为无，以便可以应用外部 div 颜色。
另外，请注意，超过 1024px 的内部 div 的 CSS 应该是您的默认网站主题背景，因此请更改为您的默认背景的任何内容。
因为他们在不同的 div外部 div 不能覆盖内部 div。