Question

JavaScript

Пожалуйста, напишите скрипт, который задаёт определённый класс элементу в зависимости от размеров экрана.
Например: ширина экрана не больше 1024 px, высота - не больше 768 px - элементу задаётся class="A", при большей ширине или высоте class="B".
В том числе, классы должны меняться при изменении размеров экрана.

Answer 1

function chooseClassByWindowWidth() {
  let el = ...; // элемент, на который надо навешивать класс, например, document.querySelector('img.resizeable')
  let width = window.innerWidth, height = window.innerHeight; // innerWidth, innerHeight измеряют внутренние размеры, если нужны внешние, с учетом тулбаров, строк заголовка и т.п. – нужно inner поменять на outer
  if (width <= 1024 && height <= 768) {
    el.classList.add('A');
    el.classList.remove('B');
  } else {
    el.classList.add('B');
    el.classList.remove('A');
  }
}

Чтобы функция выполнялась при изменении размеров, нужно добавить её как обработчик события resize: 
window.onresize = chooseClassByWindowWidth;
или
window.addEventListener("resize", chooseClassByWindowWidth);