Angular动态设置媒体查询

Question

我正在编写此代码以根据分辨率隐藏一些图标：

@mixin hide-by-index($index) {
  @media (max-width: 1000px - $index * 70px) {
    display: none;
  }
}

@for $i from 0 through 20 {
  .icon-#{$i} {
    @include hide-by-index($i);
  }
}

.more-icon {
  @media (min-width: 1000px) {
    display: none;
  }
}

从1000像素开始，当宽度每减小70像素时，图标将一一隐藏。当屏幕宽度小于1000px时，将显示“更多”图标。该代码有效。

我唯一的问题是，我想从javascript端动态更改基本分辨率1000px。因为如果我有5个图标，那么我要开始从1000px开始隐藏第一个图标，并为10个图标隐藏1350px。图标的数量基于数据。

我正在使用Angular。

谢谢。