RWD - медиазапросы

RWD - медиазапросы

Автор: Бухарцев Матвей

Медиа-запросы - ультимативная вёрстка для всех устройств

Привет, исследователи CSS! Сегодня мы поговорим о той штуке, которая делает наши сайты такими гибкими и адаптивными, что они могут подстроиться даже под экран умных часов вашей кошки. Да-да, речь пойдёт о медиа-запросах!

Что такое медиавыражения?

Представьте, что ваш сайт — это хамелеон. Он хочет выглядеть круто на любом устройстве: будь то монитор из древних 90-х или самый новый сверхширокий экран. Медиавыражения — это те самые волшебные заклинания, которые позволяют вашему хамелеону менять цвета (стили) в зависимости от окружающей среды (характеристик устройства). Это как спросить у устройства: “Эй, какой ты сегодня? Дай-ка подберу для тебя лучший наряд!”

Общий синтаксис

Не волнуйтесь, здесь не потребуется диплом филолога. Синтаксис медиазапроса выглядит примерно так:

@media (условие) {
    /* Ваш блестящий CSS-код */
}

Например, если вы хотите, чтобы ваш текст становился ярко-розовым, когда пользователь заходит с тостера (шутка, но кто знает?), вы можете написать соответствующее условие. Но чаще всего мы, конечно, оперируем более приземлёнными характеристиками.

Характеристики

Это те самые параметры, по которым мы определяем, какой стиль применить. Вот некоторые из них:

  • width и height — ширина и высота области просмотра
  • orientation — ориентация экрана (портретная или ландшафтная)
  • resolution — разрешение экрана

И много других вкусностей! Это как иметь набор суперспособностей для управления внешним видом вашего сайта в зависимости от причуд пользователя.

max-width и min-width

Ах, эти ребята – настоящие звёзды среди характеристик! Они позволяют задавать стили в определённых диапазонах ширины экрана. Именно их используют чаще всего! Ведь вам не нужно верстать для каждого размера, стоит лишь задать, например, размер для Давайте познакомимся ближе:

  • max-width — применяется, если ширина области просмотра меньше или равна указанному значению
  • min-width — применяется, если ширина области просмотра больше или равна указанному значению

Примеры использования:

  1. Стиль для мобильных устройств:
@media (max-width: 767px) {
    body {
        background-color: lightblue;
    }
}

Если пользователь заходит с устройства, где ширина экрана 767 пикселей или меньше (привет, смартфоны и планшеты!), фон страницы станет светло-голубым, как небо в ясный день.

  1. Стиль для десктопов:
@media (min-width: 768px) {
    body {
        background-color: lightgreen;
    }
}

А здесь мы говорим: “Эй, если у тебя экран побольше, давай-ка сделаем фон светло-зелёным!”

ДемонстрацияМедиа

Операторы

Осталось быстро разобраться с операторами. Да-да, совсем как в программировании! Условия можно объединять и не только.

  • and: соединяет условия. Стили применяются, если все условия истинны.
@media (min-width: 768px) and (orientation: landscape) {
    /* Код для больших экранов в ландшафтной ориентации */
}
  • or: похож на простую запятую. Стили применяются, если хотя бы одно условие истинно.
@media (max-width: 600px), (orientation: portrait) {
    /* Код для маленьких экранов или портретной ориентации */
}
  • not: отрицает условие. Стили применяются, если условие не истинно.
@media not screen and (color) {
    /* Код для устройств без цветного экрана */
}

Заключение

Медиа-запросы — это секретное оружие веб-разработчика, позволяющее создавать адаптивные и красивые сайты, которые отлично выглядят на любых устройствах. Они делают ваш CSS похожим по гибкости на йога, стоящего на одной руке, и таким же адаптивным, как вода, принимающая форму любого сосуда.

Так что не бойтесь экспериментировать! Добавьте немного магии медиазапросов в ваш проект, и пользователи будут считать, что вы настоящий волшебник. А мы-то знаем, что это просто CSS!

Пусть ваши стили всегда будут в порядке, а сайты — шикарными на всех экранах! 🚀

Бухарцев Матвей

Бухарцев Матвей