Медиа-запросы: Обзор различных возможностей

Наряду с типами носителей в CSS3 включена поддержка различных технических параметров устройств, на основе которых требуется загружать те или иные стили. К примеру, можно определить смартфон с максимальным разрешением 640 пикселов и для него установить одни стилевые свойства, а для остальных устройств другие. Также можно выявить различные характеристики вроде наличия монохромного экрана, ориентации (портретная или альбомная) и др. Все характеристики легко комбинируются, поэтому допустимо задать стиль только для устройств в альбомной ориентации с заданным разрешением экрана.

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

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

Вот простой пример:

@media (max-width: 700px) {
p {
color: red;
}
}

Демо-пример

В результате применения данного медиа-запроса текст абзаца будет становиться красным, если ширина экрана будет равна 700px и меньше. Если вы хотите, чтобы текст становился красным, если ширина экрана будет больше 700px, тогда нужно будет использовать, наоборот, «min-width». Вы также можете создать два отдельных запроса, используя «max-width» и «min-width». Вот как это будет выглядеть:

@media (max-width: 700px) and (min-width: 500px) {
p {
color: red;
}
}

Демо-пример

Прекрасно! Теперь текст будет становиться красным только при условии, что ширина экрана будет находиться в диапазоне между 500px и 700px (включительно).

А что если вы хотите применить какие-нибудь стили, если ширина экрана будет меньше 500px или больше 700px? Вы можете это сделать, разделив запросы запятой вот так:

@media (max-width: 500px), (min-width: 700px) {
p {
color: red;
}
}

Демо-пример

Обратите внимание, что в демо-примере текст не становится красным, если ширина окна находится в диапазоне между 500px и 700px (не включительно). Медиа-запросы также можно указывать различными способами. Прямо в HTML-документе:

<link rel="stylesheet" media="(max-width: 700px)" href="example.css" />

Вдобавок к этому, можно использовать правило @import в CSS-файле:

/* @import */
@import url(example.css) (max-width: 700px);
 
/* @media */
@media (max-width: 700px) {
/* Здесь прописывается CSS-правила */
}

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

В большинстве случаев медиа-запросы используются для изменения оформления в зависимости от ширины экрана. И хотя изменение ширины является наиболее распространенным случаем их применения, существуют и другие разновидности запросов, влияющие на различные параметры.

Ширина и высота

Мы можем использовать параметр высоты точно также как и параметр ширины в предыдущих примерах. Например, используя вышеприведенный метод, мы можем сделать цвет фона желтым, если высота окна браузера будет 600px или меньше:

@media (max-height: 600px) {
body {
background: yellow;
}
}

Демо-пример

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

@media (max-device-height: 600px) {
body {
background: red;
}
}

Ориентация

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

@media screen and (orientation: landscape) {
menu {
float: left;
}
}

В данном примере к элементу menu применяется свойство float: left, если у устройства будет активным альбомный режим. Тоже самое можно прописать и для портретного режима:

@media screen and (orientation: portrait) {
menu {
float: right;
}
}

Чтобы узнать больше об использовании параметра orientation, прочтите данную статью.

Цвет

Существует много различных способов для использования параметра цвета. Первый способ – это проверить поддерживает ли устройство различные цвета, используя для этого медиа-функцию (color). Если мы хотим задать стили только для черно-белых устройств, мы можем прописать примерно следующее:

@media not (color) {
body {
background: black;
color: white;
}
}

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

Следующий способ использования параметра цвета заключается в определении устройств с минимальным (максимальным) числом бит на канал цвета. Предположим, что мы хотим убрать фоновое изображение, если устройство поддерживает 4-битный цвет или еще меньше. Тогда медиа-запрос будет выглядеть так:

@media (max-color: 4) {
body {
background-image: none;
}
}

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

@media all and (color-index) {
body {
background-image: url(wood-texture.jpg);
}
}

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

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

@media (max-color-index: 255) {
.alert {
display: block;
}
}

Одноцветность

Этот параметр применяется для монохромных устройств. Чтобы задать определенные стили для всех устройств такого типа, мы можем использовать медиа-функцию (monochrome). Мы также можем использовать данное значение, чтобы задать стили для устройств с определенной цветовой разрешающей способностью, которая измеряется количеством бит на пиксель. Например, если вы не хотите показывать изображения на устройствах с разрешающей способностью 8 бит на пиксель, используйте следующий код:

@media (max-monochrome: 8) {
img {
display: none;
}
}

Еще одна классная вещь, которую вы можете реализовать с помощью значения monochrome, – это задать разные стили для цветной и черно-белой печати. Для этого необходимо добавить значение print до или после значения monochrome. Вот как это может выглядеть в CSS-файле:

/* Черно-белая печать */
@media (monochrome) and print {
    body {
        color: black;
    }
}
 
/* Цветная печать */
@media not (monochrome) and print {
    body {
        color: #09f;
    }
}

Пропорции

Пропорции экранов у устройств сильно изменились с момента появления смартфонов и планшетов. На старых мониторах привычным соотношением сторон экрана было значение 4:3 и 5:3, но теперь благодаря новым стандартам HD-видео, появились дисплеи с пропорциями 16:9 и 16:10.

Есть два способа использовать параметр пропорций. Вы можете использовать пропорции окна браузера (с помощью aspect-ratio) или пропорции экрана самого устройства (с помощью device-aspect-ratio).

В следующем примере цвет фона становится желтым, если окно браузера будет квадратным или будет активирован альбомный режим отображения:

@media (min-aspect-ratio: 1/1) {
body {
background: yellow;
}
}

Демо-пример

А что если вы захотите спрятать какой-то контент от широкоформатных мониторов? Тогда вы можете попробовать следующее:

@media screen and (device-aspect-ratio: 16/9), screen and (device-aspect-ratio: 16/10) {
p {
display: none;
}
}

Демо-пример

В этом примере, абзацы не будут отображаться, если дисплей имеет пропорции 16:9 или 16:10.

Сетка

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

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

@media (grid) {
img {
display: none;
}
}

Тут есть один момент, о котором следует помнить, – это единица измерения «em». Когда создаются дисплеи для устройств, использующих фиксированный размер пикселей, единица измерения «em» меняет свое значение. Вместо привычного для нас значения оно будет обозначать конкретный размер одной ячейки сетки.

Разрешение

Медиа-функция resolution может быть использована для определения стилей для устройств вывода с определенным значением dpi (точки на CSS «дюйм») или dpcm (точки на CSS «сантиметр»). Например, если бы вам захотелось назначить другой шрифт для экрана с разрешением менее 150dpi, тогда ваш код выглядел бы так:

@media (max-resolution: 150dpi) {
body {
font-family: 'comic sans', cursive;
}
}

Единственное, на что следует обратить внимание при использовании медиа-функции resolution, – это печать. Для принтеров значения dpi и dpcm относятся к их разрешающей способности при печати.

Развертка

Параметр scan относится к процессу развертки, которую использует ТВ-устройство. В качестве значения можно указать progressive или interlace. Запрос выглядит следующим образом:

@media tv and (scan: interlace) {
video {
display: none;
}
}

Но данный метод работает только для ТВ-устройств.

Медиа-типы

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

Ходили также слухи о том, что медиа-тип 3d-glasses станет валидным, хотя он до сих пор не определен ни в одной из спецификаций W3C. Однако он упомянут в этой спецификации W3C. И если все-таки медиа-тип 3d-glasses будет определен, то его можно будет также использовать в HTML4, поскольку медиа-типы имеют обратную совместимость.

Для дальнейшего чтения

Вот несколько ссылок на ресурсы по данной теме:

Заключение

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

Автор: Ty Strong

Источник