Учебник по медиазапросам CSS

Медиа-запросы — это техника CSS, которую мы можем использовать при создании отзывчивых страниц.

Мы используем @media для создания правила CSS, которое выполняется только в том случае, если определенное условие истинно.

Например, если окно браузера устройства имеет размер 600px или меньше, установите background-color на красный цвет:

@media only screen and (max-width: 600px) {
  body {
    background-color: red;
  }
}

И вот так у нас есть правило, ориентированное на маленькие устройства!

Использование медиа-запросов

Мы можем использовать медиа-запросы для проверки таких вещей, как:

• ширина и высота области просмотра
• ширина и высота устройства
• ориентация экрана (альбомная или книжная?)
• разрешение экрана

Проверяя эту информацию, мы можем обеспечить лучший опыт для наших пользователей. Мы можем создавать правила, которые отображают макет таким образом, чтобы он наилучшим образом соответствовал используемому устройству.

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

Медиатипы

Медиатипы позволяют нам загружать CSS в зависимости от типа устройства.

Доступны следующие медиатипы:

screen — наиболее часто используемый тип.

Характеристики носителей

Характеристики медиа описывают специфические характеристики устройства пользователя.

Медиазапрос будет применен, если он оценивается как ‘true’.

Вот список характеристик, которые мы можем проверить:

• width
• height
• device-width
• device-height
• aspect-ratio
• device-aspect-ratio
• resolution
• orientation
• scan
• grid
• color
• color-index
• monochrome

Обратите внимание, что каждая из них имеет соответствующее значение min-* и max-*. И все они являются необязательными!

Логические операторы

Мы используем логические операторы not, and и only для создания более сложного медиазапроса.

и

Мы используем and для объединения нескольких медиафункций в один медиазапрос. Каждая функция должна быть истинной, чтобы запрос вернул истину. Также используется для объединения медиафункций с медиатипами.

не

Оператор not используется для отрицания медиазапроса. Он будет истинным, если в противном случае запрос вернет false. При использовании not необходимо также указать тип медиа.

только

Оператор only используется для применения стиля только при совпадении всего запроса. Он полезен для предотвращения применения выбранных стилей старыми браузерами. При использовании only необходимо также указать тип носителя.

, (запятая)

Мы также можем объединить несколько медиа-запросов в одно правило, разделяя их запятыми. Если любой из запросов в списке истинен, все медиа-запросы возвращают истину. Поэтому его можно рассматривать как оператор or.

Синтаксис медиазапроса

Итак, вооружившись этими знаниями, давайте рассмотрим синтаксис медиазапроса!

Медиа-запрос состоит из типа медиа (в данном случае screen) и может содержать одно или несколько выражений (здесь мы используем max-width):

@media screen and (max-width: 600px) {
  /* ... */
}

Запрос вернет true, если тип медиа соответствует типу устройства, на котором отображается страница, и если все выражения в медиа-запросе будут true.

Когда медиазапрос возвращает true, соответствующие правила стиля будут применены!

Рассмотрим более сложный пример.

Здесь правило применяется, когда у пользователя экран устройства (компьютер, планшет или телефон), ширина находится в диапазоне от 600 до 768 пикселей, а ориентация — альбомная:

@media screen and (max-width: 768px) and (min-width: 600px) and (orientation: landscape) {
  /* ... */
}

Типичные точки останова устройств

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

Часто, чтобы упростить процесс кодирования отзывчивых макетов, мы создаем медиазапросы, нацеленные на устройства, основанные на диапазонах размеров экрана:

/* Extra small devices (phones, less than 600px wide) */
@media only screen and (max-width: 600px) {...}
/* Small devices (portrait tablets & large phones, 600px and up) */
@media only screen and (min-width: 600px) {...}
/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {...}
/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {...}
/* Extra large devices (large laptops & desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {...}

Однако лучшей практикой является создание медиазапросов в соответствии с потребностями вашего контента. Таким образом, вы снизите вероятность того, что ваш макет сломается на устройствах, которые вы, возможно, не учитывали.

Заключение

Если вам понравилась эта статья, следуйте за мной в Twitter, где я ежедневно пишу о вещах, связанных с техникой!
Если вам понравилась эта статья и вы хотите оставить совет — нажмите здесь

🌎 Давайте общаться

• Портфолио

• Twitter

• LinkedIn

• Hashnode

• Devto

• Medium

• Github

• Codepen