Angular 5: используйте ngClass для переключения классов для мобильных и настольных ПК

Question

Мое приложение использует следующие классы: " большой экран " для просмотра на рабочем столе и " маленький экран " для просмотра на мобильном устройстве. Я пытаюсь использовать ngClass , чтобы я мог переключаться между этими классами в контейнере или оболочке div для различных компонентов, но все мои реализации, похоже, не работают.

Требуется переключиться на «большой экран» для просмотра на рабочем столе и переключиться на «маленький экран» для просмотра на мобильном устройстве. Ниже приведены медиазапросы, которые уже созданы.

@media only screen and (max-width: 415px) {
  .large-screen {
    display: none;
  }
}
@media only screen and (min-width: 415px) {
  .small-screen {
    display: none;
  }
}

Если бы кто-то мог предложить что-то другое, было бы очень признательно.

Answer 1

Этого можно добиться простым медиа-запросом и атрибутом класса HTML. Не нужно переходить на ngClass.

CSS

@media only screen and (max-width: 415px) {
  .small-screen {
    display: block;
  }
  .large-screen {
    display: none;
  }
}
@media only screen and (min-width: 415px) {
  .small-screen {
    display: none;
  }
  .large-screen {
    display: block;
  }
}

HTML

<div class="small-screen large-screen"></div>

Answer 2

Вы можете создать только 1 класс и изменить его атрибуты в зависимости от медиа-запросов, например:

@media only screen and (max-width: 415px) {
  .class-name {
    background-color: blue;
  }    
}
@media only screen and (min-width: 415px) {
  .class-name {
    background-color: red;
  }
}

В противном случае вам потребуется display:none классов в медиа-запросах, которые вы не хотите, чтобы они появлялись, например:

@media only screen and (max-width: 415px) {
  .small-screen {
    display: block;
  }
  .large-screen {
    display: none;
  }    
}
@media only screen and (min-width: 415px) {
  .small-screen {
    display: none;
  }
  .large-screen {
    display: block;
  }
}

Таким образом, вы должны будете использовать их оба во всех ваших div, которые вы хотите работать на обоих устройствах:

<div class="small-screen large-screen"></div>

Если вы хотите использовать в зависимости от значения переменной, тогда ngClass имеет смысл, вы можете использовать так:

<div [ngClass]="{'small-screen': isMobile, 'large-screen': !isMobile}></div>