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