Javascript , напишите скрипт, который задаёт определённый класс элементу в зависимости от размеров экрана. например: ширина экрана не больше 1024 px, высота - не больше 768 px - элементу задаётся class="a", при большей ширине или высоте class="b". в том числе, классы должны меняться при изменении размеров экрана.
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);