Если по каким-то причинам недостаточно
медиа запросов из CSS, тогда можно воспользоваться методом
matchMedia.
Простой пример использования:
const targetElement = document.querySelector(".target");
const breakpoint = window.matchMedia("(max-width: 700px)");
const breakpointChecker = () => {
if (breakpoint.matches) {
targetElement.textContent = "Apple";
} else {
targetElement.textContent = "Orange";
}
};
breakpoint.addEventListener("change", breakpointChecker);
breakpointChecker();
Однако несмотря на доступность и простоту использования данного подхода, разумеется намного лучше ограничиться использованием медиа запросов из CSS, чтобы не создавать дополнительную нагрузку применяя JavaScript там где можно обойтись без него.
Вообще современный CSS уже способен решать многие задачи, связанные например с такими вот случаями, когда требуется модификация блока для отображения на декстопе/мобильнике и если раньше приходилось использовать две разные вёрстки того или иного элемента для разных разрешений экрана или добавлять javascript для решения подобных задач, то уже сейчас в большинстве случаев, такой нужды не осталось.
И всё как бы понятно и хорошо, но всё же есть такие моменты когда использование JS при работе с медиа запросами - оправданно и
matchMedia отлично справляется с поставленными задачами, например когда нужно включить/отключить какой-нибудь плагин или произвести какие-нибудь действия, которые невозможно выполнить используя один только CSS.
Как альтернативу matchMedia, конечно можно использовать событие
resize, но в таком случае придётся оптимизировать функцию используемую в обработчике, так как
resize имеет свои подводные камни.
