Медиа-запросы

Дизайнеры могут корректировать свои проекты под нужды пользователей. Ярчайшим примером этого является форм-фактор пользовательского устройства; его ширина, соотношение сторон устройства и т. д. Используя медиа-запросы, дизайнеры могут реагировать на эти различные форм-факторы.

Медиа-запросы инициируются с помощью ключевого слова @media (правило CSS) и могут использоваться в различных случаях.

Ориентируйтесь на разные типы результатов

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

В этом примере цвет фона установлен серый. Но если страница распечатана, цвет фона должен быть прозрачным. Это экономит чернила принтера пользователя.

body {
  color: black;
  background-color: grey;
}

@media print {
  body {
    background-color: transparent;
  }
}

Вы можете использовать at-правило @media в своей таблице стилей или создать отдельную таблицу стилей и использовать атрибут media в элементе link :

<link rel="stylesheet" href="global.css">
<link rel="stylesheet" href="print.css" media="print">

Если вы не укажете какой-либо тип мультимедиа для своего CSS, он автоматически будет иметь значение типа мультимедиа, равное all . Эти два блока CSS эквивалентны:

body {
  color: black;
  background-color: white;
}

@media all {
   body {
     color: black;
     background-color: white;
   }
}

Эти две строки HTML также эквивалентны:

<link rel="stylesheet" href="global.css">

<link rel="stylesheet" href="global.css" media="all">

Условия запроса

Вы можете добавлять условия к типам мультимедиа. Это так называемые медиа-запросы. CSS применяется только в том случае, если тип носителя соответствует и условие также истинно. Эти условия называются медиа-функциями .

Это синтаксис медиа-запросов:

@media type and (feature)

Вы можете использовать медиа-запросы к элементу link , если ваши стили находятся в отдельной таблице стилей:

<link rel="stylesheet" href="specific.css" media="type and (feature)">

Допустим, вы хотите применить разные стили в зависимости от того, находится ли окно браузера в ландшафтном режиме (ширина области просмотра больше его высоты) или в портретном режиме (высота области просмотра больше его ширины). Есть медиа-функция под названием orientation которую вы можете использовать, чтобы проверить это:

@media all and (orientation: landscape) {
   // Styles for landscape mode.
}
@media all and (orientation: portrait) {
   // Styles for portrait mode.
}

Или, если вы предпочитаете иметь отдельные таблицы стилей:

<link rel="stylesheet" href="landscape.css" media="all and (orientation: landscape)">
<link rel="stylesheet" href="portrait.css" media="all and (orientation: portrait)">

В этом случае тип носителя — all . Поскольку это значение по умолчанию, вы можете оставить его, если хотите:

@media (orientation: landscape) {
   // Styles for landscape mode.
}
@media (orientation: portrait) {
   // Styles for portrait mode.
}

Или используя отдельные таблицы стилей:

<link rel="stylesheet" href="landscape.css" media="(orientation: landscape)">
<link rel="stylesheet" href="portrait.css" media="(orientation: portrait)">

Хотя использование отдельных таблиц стилей для разных типов мультимедиа (например, print ) может быть приемлемым, вероятно, не стоит использовать отдельную таблицу стилей для каждого медиа- запроса . Вместо этого используйте at-правила @media .

Настройка стилей в зависимости от размера области просмотра

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

@media (min-width: 400px) {
  // Styles for viewports wider than 400 pixels.
}

Используйте функцию мультимедиа max-width , чтобы применять стили ниже определенной ширины:

@media (max-width: 400px) {
  // Styles for viewports narrower than 400 pixels.
}

Вы можете использовать любые единицы длины CSS в своих медиа-запросах. Если ваш контент в основном основан на изображениях, пиксели могут иметь наибольший смысл. Если ваш контент в основном текстовый, вероятно, имеет смысл использовать относительную единицу измерения , основанную на размере текста, например em или ch :

@media (min-width: 25em) {
  // Styles for viewports wider than 25em.
}

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

@media (min-width: 50em) and (max-width: 60em) {
  // Styles for viewports wider than 50em and narrower than 60em.
}

Выбирайте точки останова в зависимости от контента

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

В этом примере 50em — это точка, в которой строки текста становятся неудобно длинными. Таким образом, точка останова создается, чтобы сделать интерфейс более разборчивым. Используя свойство column-count , с этого момента текст делится на два столбца.

@media (min-width: 50em) {
  article {
    column-count: 2;
  }
}

Комбинации

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

Вы можете комбинировать медиа-запросы, чтобы стили применялись только тогда, когда все условия выполняются. В этом примере область просмотра должна быть не менее 50em в ширину и 60em в высоту, чтобы можно было применить стили столбцов. Эти точки останова были выбраны в зависимости от количества контента.

@media (min-width: 50em) and (min-height: 60em) {
  article {
    column-count: 2;
  }
}

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

Проверьте свое понимание

Проверьте свои знания об адаптивных медиа-запросах.