Добавить к существующему классу CSS второй класс при смене ширины экрана

Question

<div class="class1"><!--flex--->
  <div>Ячейка 1</div>
  <div>Ячейка 2</div>
  <div>Ячейка 3</div>
</div>

Как сделать чтоб к стилю ".class1" при ширине экрана 760px или меньше, добавлялся второй стиль ".class2".

<div class="class1 class2"><!--flex--->
  <div>Ячейка 1</div>
  <div>Ячейка 2</div>
  <div>Ячейка 3</div>
</div>

И при ширине экрана больше 760px добавленный ".class2" отключался.

Answer 1

Нужно подписаться на событие изменения размера окна: window.onresize

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

window.addEventListener('resize', ()=>{
    if (window.innerWidth <=760) {
        document.querySelector('class1').classList.add('class2')
    }else{
        document.querySelector('class1').classList.remove('class2')
    }
})

Answer 2

Лучше для этого использовать медиа-выражения.

/* обычные правила */
.class1 {
  background: aliceblue;
}

@media (max-width: 760px) {
  /* правила когда ширина экрана меньше 760px
     вставьте сюда свои правила из .class2 */
  .class1 {
    background: beige;
  }
}

<div class="class1"><!--flex--->

  <div>Ячейка 1</div>

  <div>Ячейка 2</div>

  <div>Ячейка 3</div>

</div>

БЛОГ НА HUSL

Добавить к существующему классу CSS второй класс при смене ширины экрана

Ответы (2 шт):