Как сделать - Мультимедийные запросы с 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
Media запросы были введены в CSS3, и является одним из ключевых ингредиентов для адаптивного веб-дизайна. Запросы мультимедиа используются для определения ширины и высоты видового экрана, чтобы веб-страницы хорошо отображались на всех устройствах (настольных компьютерах, ноутбуках, планшетах, телефонах и т. д.).
Метод Window. matchmedia () возвращает объект MediaQueryList, представляющий результаты указанной строки запроса CSS Media. Значение метода matchmedia () может быть любым из мультимедийных функций @media правила CSS, таких как min-высота, минимальная ширина, ориентация и т.д.
Подробнее о медиа-запросах в нашем учебнике по CSS Media запросам
Узнайте больше о адаптивном дизайн в нашем адаптивный веб-дизайн учебник
Узнайте больше о методе Window.matchmedia() в нашей справке на JavaScript.