Media handheld не работает. Медиа-запросы в CSS. Логические операторы с примерами использования в коде

Статья, в которой познакомимся с медиа запросами и научимся применять их для создания адаптивных сайтов. Рассмотрим основные конструкции media запросов для использования их в вёрстке страниц с использованием фреймворков Bootstrap 3 и Bootstrap 4.

Медиа запросы (media queries) - это правила CSS, которые позволяют управлять стилями элементов в зависимости от значений технических параметров устройств. Иными словами, это конструкции, которые позволяют определять на основании некоторых условий какие стили необходимо использовать на веб-странице, а какие нет.

Медиа запросы появились в спецификации CSS3 и на сегодняшний день поддерживаются во всех современных браузерах (Chrome 4+, Firefox 3.5+, IE 9+, Opera 9+, Safari 4+).

Поддержка медиа запросов в браузере IE8 осуществляется посредством подключения к странице скрипта respond.js:

Медиа запросы предназначены для создания адаптивных дизайнов сайтов. Адаптивный дизайн отличается от других тем, что он может "приспосабливаться" (видоизменяться) в зависимости от того, какую ширину экрана имеет устройство (браузер). Более подробно познакомиться с адаптивным дизайном можно в статье "Что такое адаптивная разметка" .

Но при создании адаптивных веб-страниц также необходимо обратить внимание на метатег viewport. Данный тег обеспечивает корректное отображение дизайнов адаптивных сайтов на экранах устройств, имеющих высокую плотность пикселей. Иными словами, он устанавливает соответствие между CSS и физическим разрешением веб-страницы. Более подробно разобраться, как работает метатег viewport можно в статье "Знакомство с meta viewport" .

Подключение метатега viewport к странице в большинстве случаях осуществляется так:

Для создания медиа запросов используется следующий синтаксис:

@media условие { /* стили (они будут выполняться, если устройство соответствует указанному условию) }

Основные типы устройств:

• all - все устройства (по умолчанию).
• print - принтеры и режим предварительного просмотра страницы перед печатью.
• screen - устройства с дисплеями.

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

• and - требует обязательного выполнения всех указанных условий.
  Например: @media screen and (min-width: 1200px) and (orientation: landscape) { /* Стили CSS ... */ } Стили CSS в вышеприведённом примере выполняться только в том случае, если страница будет выводиться на устройство с экраном, иметь область просмотра более 1200 пикселей в ширину, а также находиться в альбомном режиме.
• , (запятая) - требует обязательного выполнения хотя бы одного из указанных условий в медиа запросе. @media (min-width: 544px), (orientation: landscape) { /* Стили CSS ... */ } Стили CSS в этом примере будут применяться к странице в двух случаях. Т.е. тогда, когда устройство будет иметь viewport не менее 544 пикселей (включительно) или ориентацию landscape.
• not - предназначен для отрицания указанного условия. Имеет по отношению к оператору and меньший приоритет, т.е. оператор not всегда выполняется после and . @media not screen and (orientation: portrait), (min-width: 992px) { /* Стили CSS ... */ } Стили CSS, находящиеся в этом правиле, будут применены к странице только в том случае, если устройство не является screen и не будет иметь портретную ориентацию. А также они (стили CSS) будут применены к элементам документа ещё тогда, когда устройство (браузер) будет иметь ширину рабочей области не менее 992 пикселя (включительно).
  Т.е. запрос в вышеприведённом примере будет обрабатываться так: @media not (screen and (orientation: portrait)), (min-width: 992px) { /* Стили CSS ... */ }

Для составления условия в @media можно использовать следующие фукнции:

• width - указывает требования к ширине области просмотра устройства (браузера). /* применить стили CSS только для устройств с шириной области просмотра, равной 320px */ @media (width: 320px) { /* Стили CSS ... */ }
• min-width - задаёт минимальную ширину области viewport в px , em или других единицах. /* для устройств (браузеров), которые предоставляют для страницы минимальную ширину области просмотра, равную 544 пикселя */ @media (min-width: 544px) { /* Стили CSS ... */ }
• max-width - указывает на то, какой должна быть максимальная рабочая область устройства (браузера). /* стили, которые будут применены к элементам страницы с рабочей областью не больше 1199 пикселей */ @media (max-width: 1199px) { /* Стили CSS ... */ }
• height , min-height и max-height - задают требования аналогично вышеприведённым функциям, но в отношении высоты viewport. /* стили, которые будут применены к элементам страницы в том случае, если viewport браузера будет больше 720px в высоту */ @media (min-height: 720px) { /* Стили CSS ... */ }
• orientation - функция, которая проверяет то, в каком режиме (portrait или landscape) отображается страница.
  Пример, в котором в зависимости от ориентации экрана, отображается одна или другая картинка: /* landscape (альбомный) - это режим, в котором наоборот ширина viewport больше её высоты */ @media (orientation: landscape) { #background-image { background: url(image1.png) no-repeat; } } /* portrait (портретный) - это режим, в котором высота viewport больше ширины */ @media (orientation: portrait) { #background-image { background: url(image2.png) no-repeat; } }
• aspect-ratio (min-aspect-ratio , max-aspect-ratio) - позволяют указать то, как ширина устройства должна относиться к высоте. В качестве значений допускается использовать только целые значения. /* для дисплеев с соотношением сторон 16/9 */ @media screen and (device-aspect-ratio: 16/9) { /* Стили CSS ... */ } /* для дисплеев с соотношением сторон 1336/768 */ @media screen and (device-aspect-ratio: 1336/768) { /* Стили CSS ... */ }
• resolution (min-resolution , max-resolution) - указывает разрешение (плотность пикселей) устройства вывода. В качестве единиц измерения разрешения используются следующие величины: dpi (количество точек на дюйм), dpcm (количество точек на сантиметр), dppx (количество точек на пиксель). /* для экранов, имеющих высокую плотность пикселей (т.е. для таких, у которых отношение аппаратных пикселей к CSS не менее 2) */ @media screen and (min-resolution: 2dppx) { /* Стили CSS ... */ } /* при печати с разрешением свыше 300 точек на дюйм */ @media print and (min-resolution: 300dpi) { /* Стили CSS ... */ }

Медиа запросы также можно применять в качестве значения атрибута media элемента link . Это позволит в зависимости от параметров устройства определить, какие файлы CSS необходимо подсоединить к странице, а какие нет. Обычно данный функционал используется тогда, когда к разным классам устройств необходимо применить различные стили CSS.

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

/* импортирование стилей из файла styles-xs.css в текущий файл стилей только для устройств, которые предоставляют веб-странице viewport, имеющий ширину 543 пикселя или меньше. */ @import url(styles-xs.css) (max-width: 543px);

Организация media queries в порядке возрастания классов устройств xs, sm, md и lg (по умолчанию):

/* Устройства с очень маленьким экраном (смартфоны, меньше 768px) */ /* Стили CSS (по умолчанию) - для ширины viewport 1200px */ }

Вышеприведённые запросы необходимо использовать только в указанном порядке.

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

@media (max-width: 767px) { /* стили для xs-устройств */ } @media (min-width: 768px) and (max-width: 991px) { /* стили для sm-устройств */ } @media (min-width: 991px) and (max-width: 1199px) { /* стили для md-устройств */ } @media (min-width: 1200px) { /* стили для lg-устройств */ }

Синтаксис медиа-запросов для Bootstrap 4, которые можно использовать только в следующем порядке (последовательного увеличения минимальной ширины viewport):

/* xs - устройства (до 576px) */ /* CSS для ширины, которая меньше 575px (включительно) */ /* sm-устройства (больше или равно 576px) */ @media (min-width: 576px) { /* CSS для: 576px = 1200px */ }

Список media запросов для фреймворка Bootstrap 4, которые можно применять только в обратном порядке (в порядке убывания ширины области просмотра окна браузера):

/* xl-размер (>=1200px) */ /* CSS для >=1200px */ /* lg-размер (