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

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

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

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

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

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

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

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

Вы можете использовать правило @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 , может быть приемлемым, использовать отдельную таблицу стилей для каждого медиазапроса — не лучшая идея. Вместо этого используйте @media at-rules.

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

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

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

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

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

Этот медиа-запрос также можно написать с использованием медиа-функции width и оператора меньше или равно.

@media (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. /*
}

Это также можно записать с использованием синтаксиса диапазона.

@media (50em <= width <=60em) {
  /* Styles for viewports wider than 50em and narrower than 60em. */
}

Выбирайте контрольные точки на основе содержания

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

В этом примере 50em — это точка, при которой строки текста становятся слишком длинными. Поэтому для повышения читабельности интерфейса создаётся контрольная точка. С помощью свойства column-count текст с этого момента делится на две колонки.

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

Комбинации

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

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

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

Вы также можете использовать ключевые слова or и not для описания более сложных ситуаций, когда требуется применить стили. Логическое обоснование таких ситуаций может быть сложным, поэтому обязательно проверьте, работают ли они и взаимодействуют ли так, как вы ожидаете.

@media not ((width >= 30em) or (orientation: landscape)) {
  /* These styles won't be shown if the viewport is wider than 30em, or if the orientation is landscape. */
  .navlist {
    flex-direction: column;
  }
}

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

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

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