Медиа-запросы CSS: точки останова, типы устройств, стандартные разрешения и многое другое

В прошлом создание веб-сайта было более простой задачей. На сегодняшний день макет веб-сайта должен адаптироваться не только к компьютерам, но и к планшетам, мобильным устройствам и даже телевизорам.

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

Что такое медиа-запрос?

Медиа-запрос — это функция CSS3, которая используется для адаптации макета веб-страницы к различным размерам экрана и типам устройств.

Синтаксис

@media media type and (condition: breakpoint) {
  // Правила CSS
}

Мы можем ориентироваться на различные типы устройств в зависимости от условий. Правила внутри медиа-запроса применяются только при совпадении условий and/or в типах устройств.

Синтаксис может показаться сложным, поэтому давайте рассмотрим каждую его часть по отдельности.

Правило @Media

Начнем определение медиа-запросов с правила @media, а затем включим правила CSS в круглые скобки. Оно используется для указания типов целевых устройств:

@media () {
  // Правила CSS
}

Скобка

Внутри скобки мы устанавливаем условие. Например, нам нужно увеличить размер шрифта для мобильных устройств. Для этого устанавливаем максимальную ширину, которая проверяет ширину устройства:

.text {
  font-size: 14px;
}

@media (max-width: 480px) {
  .text {
    font-size: 16px;
  }
}

Обычно размер текста составляет 14 пикселей. Однако, поскольку мы применили медиа-запрос, он изменится до 16 пикселей при максимальной ширине устройства 480 пикселей и меньше.

Важно: медиа-запросы всегда должны находиться в конце CSS-файла.

Типы устройств

Типы устройств размещаются сразу после правила @media. Если тип не указан, правило @media выбирает все типы по умолчанию. Существует множество видов устройств, однако их можно разделить на 4 категории:

• all — для всех типов устройств;
• print — для принтеров;
• screen — для экранов компьютеров, планшетов и смартфонов;
• speech — для скринридеров, которые «читают» страницу вслух.

Например, чтобы выбрать только экраны, нужно установить ключевое слово screen сразу после правила @media. Правила также необходимо объединить ключевым словом «and»:

@media screen and (max-width: 480px) {
  .text {
    font-size: 16px;
  }
}

Точки останова

Точка останова — это ключ, который определяет, когда следует изменить макет и адаптировать новые правила внутри медиа-запросов. Вернемся к нашему примеру:

@media (max-width: 480px) {
  .text {
    font-size: 16px;
  }
}

Здесь точка останова составляет 480 пикселей. Теперь медиа-запрос знает, когда устанавливать или перезаписывать новый класс. Если ширина устройства меньше 480 пикселей, то будет применен класс text.

Распространенные точки останова: есть ли стандартное разрешение?

Какую точку останова следует использовать? Поскольку на рынке существует множество устройств, то невозможно определить фиксированные значения для каждого из них.

Следовательно мы не можем сказать, что существует стандартное разрешение для устройств, однако в повседневном программировании есть несколько часто используемых вариантов. Если вы используете фреймворки CSS (например, Bootstrap, Bulma и т. д.), вы также можете применять их точки останова.

Рассмотрим некоторые распространенные точки останова:

• 320px — 480px: мобильные устройства;
• 481px — 768px: планшеты;
• 769px — 1024px: маленькие экраны, ноутбуки;
• 1025px — 1200px: большие экраны;
• 1201px и больше —  очень большие экраны, телевизоры.

Как уже было сказано выше, точки останова могут различаться и точно определенного стандарта нет, однако приведенные выше примеры используются чаще всего.

Заключение

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

Читайте также:

• Советы по анимации с CSS и JavaScript
• Как написать хороший HTML & CSS код с помощью Webflow
• Почему никто не рассказал мне это о CSS

---

Перевод статьи Cem Eygi: CSS Media Queries: Breakpoints, Media Types, Standard Resolutions, and More