Угловая динамическая настройка медиазапроса - PullRequest
Новая
       8

Угловая динамическая настройка медиазапроса

0 голосов
/ 28 июня 2018

Я пишу этот код, чтобы скрыть некоторые значки в зависимости от разрешения: 

@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 пикселей. И значок «Еще» появится, когда ширина экрана будет меньше 1000 пикселей. Этот код работает.

Моя единственная проблема в том, что я хотел бы динамически изменить базовое разрешение 1000 пикселей со стороны JavaScript. Потому что, если у меня 5 значков, я хочу начать скрывать первый значок от 1000 пикселей и 1350 пикселей за 10 значков. А количество значков основано на данных.

Я использую Angular.

Спасибо.

...