Media queries для HTML, CSS, JS
Как использовать медиа-запросы?
Медиа-запросы (media queries) имеют весьма разнообразные области применения:
- для проверки ширины и высоты области видимости,
- для проверки ширины и высоты устройства,
- для определения ориентации устройства (книжная или альбомная)
Вообще, медиа-запросы - это очень удобный, популярный и, практически, незаменимый инструмент создания адаптивной верстки, позволяющий использовать различные стили для различных устройств: настольных компьютеров, ноутбуков, планшетов, смартфонов.
Обычно, медиа-запросы ассоциируются с CSS, но они могут так же успешно применяться для HTML и JavaScript.
HTML
Мы можем использовать медиа-запросы, чтобы установить условие: какой <link> использовать в <head> HTML-файла, как показано ниже:
<html>
<head>
<!-- для любых экранов -->
<link rel="stylesheet" href="all.css" media="all" />
<!-- для экранов с шириной не менее 50rem -->
<link rel="stylesheet" href="small.css" media="(min-width: 50rem)" />
<!-- для экранов с шириной не менее 80rem -->
<link rel="stylesheet" href="medium.css" media="(min-width: 80rem)" />
</html>
Еще мы можем использовать media queries для элемента <style>:
<style media="all and (min-width: 800px)">
h1 {
font-size: 2rem;
color: green;
}
</style>
Так же, медиа-запросы можно применять для изображений <picture>. Каким образом? С помощью вложенных элементов <source>:
<picture>
<!-- картинка для альбомной ориентации устройства -->
<source srcset="alligator.png" media="(orientation: landscape)">
<!-- картинка для планшетной ориентации устройства -->
<source srcset="girrafe.png" media="(orientation: portrait)">
</picture>
CSS
Это самый распространенный способ применения медиа-запросов.
Правило @mediaиспользуется в медиа-запросов для определения различных стилей для различных устройств или устройств, соответствующих определенным параметрам:
@media only screen and (min-device-width: 500px) and (max-device-width: 8000px) {
.container {
display: none;
}
}
JS
Медиа-запросы можно применять и в JavaScript с помощью метода window.matchMedia().
Например, если мы хотим изменить фоновый цвет элемента <body> на красный, в случаях когда ширина экрана превышает 600px, мы можем сделать это, создав константу с помощью метода window.matchMedia():
// создаем условие медиа-запроса для минимальной ширины экрана 600px
const mediaQueryCondition = window.matchMedia( '( min-width: 600px )' )
применяем условие медиа-запроса:
if ( mediaQueryCondition.matches ) {
document.body.style.cssText = `
background-color: red;
`
}
Спасибо за внимание.
