Как сделать — Медиа-запросы с помощью JavaScript
Пример
Если ширина окна просмотра меньше или равна 700 пикселям, измените цвет фона на желтый. Если он больше 700, измените его на розовый.
function myFunction(x) {
if (x.matches) { // If media
query matches
document.body.style.backgroundColor = "yellow";
} else {
document.body.style.backgroundColor = "pink";
}
}
var x = window.matchMedia("(max-width: 700px)")
myFunction(x) // Call
listener function at run time
x.addListener(myFunction) // Attach listener
function on state changes
Использование медиа-запросов с JavaScript
Медиа-запросы были представлены в CSS3 и являются одним из ключевых компонентов адаптивного веб-дизайна. Медиа-запросы используются для определения ширины и высоты области просмотра, чтобы веб-страницы хорошо выглядели на всех устройствах (настольных компьютерах, ноутбуках, планшетах, телефонах и т. д.).
Метод window.matchMedia() возвращает объект MediaQueryList, представляющий результаты указанной строки мультимедийного запроса CSS. Значением метода matchMedia() может быть любая медиа-функция правила CSS @media , например минимальная высота, минимальная ширина, ориентация и т. д.
Узнайте больше о медиа-запросах в нашем учебном пособии по CSS-медиа-запросам .
Узнайте больше об адаптивном дизайне в нашем учебном пособии по адаптивному веб-дизайну .
Узнайте больше о методе window.matchMedia() в нашем справочнике по JavaScript.