Медиа-запросы используются почти в каждом веб-проекте. Глядя на правило @media, иногда нужно немного разобраться, чтобы точно понять, когда это правило имеет место.
Возьмем, к примеру, общий код ниже:
@media screen and ( min-width: 768px ) {
body { background-color: blue; }
}
Смысл не вытекает непосредственно из правила.
Означает ли приведенный выше код, что body будет синим, когда весь экран меньше 768 пикселей? Может быть, это означает, что наши правила будут отображаться только тогда, когда размер браузера больше 768 пикселей?
Для меня это не так ясно, как, скажем, другие правила css, такие как @supports
@supports (display: grid) {
div {
display: grid;
}
}
Этот код имеет прямое логическое значение, т.е. если браузер поддерживает display: grid, то установить div как display: grid.
Что делать?
Я нашел быстрый способ логического объяснения правила медиа-запроса — поменять местами некоторые слова в правиле, чтобы обеспечить лучшее логическое значение.
Возвращаясь к первому примеру кода:
@media screen and ( min-width: 768px ) {
body { background-color: blue; }
}
Если мы добавим и изменим некоторые слова, это может помочь нам лучше понять смысл условного предложения:
"if" "window" "is at least" ( min-width: "of" 768px ) then
body { background-color: blue; }
Таким образом, мы получаем что-то похожее на фразу «Если минимальная ширина окна составляет 768 пикселей, сделайте его тело синим».
Попробуйте это на следующем медиа-запросе максимальной ширины:
@media screen and ( max-width: 1024px ) {
h1 { font-size: 24px; }
}
Что вы думаете об этой технике логического перевода? У вас есть способ проще? Или просто ясно, что делает медиа-запрос при чтении правила?
