В этой статье мы расскажем про такой механизм, как media-запросы. Который позволяет создавать более гибкие, другими словами адаптивные сайты.
Адаптивность
В первую очередь хотелось бы сказать, что такое адаптивность. Мы не будем приводить определения из википедии или ещё откуда-то, а скажем своими словами.
По нашим скромным представлением адаптивная страница - такая страница, которая подстраивается под разный тип устроит. Что обозначает, что на компьютерах она выглядит одним образом, на планшетах другим и иначе выглядит на телефонах. Для этого, как правило, дизайнер рисует несколько макетов, под каждый тип устройства.
На изображении приведен пример отображения такого сайта.
Медиа-запросы
Вернёмся к CSS и собственно самим media-запросам. Этот механизм является такое конструкцией, который позволяет задавать стили только для устройств с определенными параметрами.
Например можно задавать стили для устройств по их максимальной/минимальной ширине/высоте. Очевидно, что у телефонов эти параметры куда меньше, чем у компьютеров или планшетов. Таким образом медиа-запросы являются одним из механизмов для создания адаптивных сайтов. Отмечу, что это лишь один из механизмов.
Все медиа-запросы начинаются с @media, после чего идут условия проверки и в фигурных скобках CSS-стили, пример:
Как видите появились так же неизвестные значения, после @media. Далее мы приведем перечень и описание этих условий.
В первую очередь после определения медиа-запроса нужно задать тип устройства, для которых применять его:
Тип | Описание |
---|---|
all | Все типы. Это значение используется по умолчанию. |
braille | Устройства, основанные на системе Брайля, которые предназначены для чтения слепыми людьми. |
embossed | Принтеры, использующие для печати систему Брайля. |
handheld | Смартфоны и аналогичные им аппараты. |
Принтеры и другие печатающие устройства. | |
projection | Проекторы. |
screen | Экран монитора. |
speech | Речевые синтезаторы, а также программы для воспроизведения текста вслух. Сюда, например, можно отнести речевые браузеры. |
tty | Устройства с фиксированным размером символов (телетайпы, терминалы, устройства с ограничениями дисплея). |
tv | Телевизоры. |
Само по себе указание типа устройства является логической переменной. В первом примере мы как раз указали, что запрос должен выполняться для всех экранов мониторов.
По мимо этого в медиа-запросах могут использоваться логические операторы.
Логические операторы:
and
Логическое И. Объединяет несколько условий, которые должны выполняться одновременно.
В первом примере как раз используется этот оператор.
not
Логическое отрицание(НЕ). Соответственно инвертирует одно из условий.
Пример, для всех типов устройств, кроме смартфонов:
Следует запомнить, что операторы имеют свой порядок применения и отрицание имеет самый низкий приоритет, поэтому скобочки указываются не просто так, они повышают приоритет - то, что выполняется в скобочках имеет наивысший приоритет.
,
Запятая служит для обозначения логического ИЛИ. Запрос срабатывает если выполняется хотя бы одно из указанных через запятую условий.
Пример, для телевизоров или проекторов:
only
Этот оператор ничего из себя не представляет и применяется лишь для того, чтобы медиа-запросы поддерживались старыми браузерами.
Нужно ставить перед каждым условием, если их несколько, объединенных через запятую, то для каждого.
Пример, для мониторов или смартфонов:
По мимо выше указанных условий можно использовать медиа функции.
Media-функции:
Они задают технические характеристики устройства, на котором смотрят сайт. Почти все такие функции имеют приставки min- и max-, которые соответствуют минимальному и максимальному значению для характеристики. Например min-height:200, говорит о том, что бы стиль применялся к устройствам с высотой равной/более 200 px. А max-height:200, для устройств с равной/меньшей высотой 200 пикселям.
aspect-ratio (min-aspect-ratio, max-aspect-ratio)
Типы устройств, к котором применяется - handheld, print, projection, screen, tty, tv.
Значение - целое число/целое число.
Определяет соотношение ширины к высоте устройства. Значение задается в виде двух целых чисел, разделяемых слешем.
color (min-color, max-color)
Типы устройств, к котором применяется - handheld, print, projection, screen, tty, tv.
Значение - целое число.
Определяет число бит на канал цвета. К примеру, значение 3 означает, что красный, зелёный и синий канал могут отображать 23 цветов каждый, что в общем составляет 512 цветов (8×8×8). Если значение не указано, тогда проверяется что устройство цветное.
color-index (min-color-index, max-color-index)
Типы устройств, к котором применяется - handheld, print, projection, screen, tty, tv.
Значение - целое число.
Определяет количество цветов, которые должно поддерживать устройство.
device-aspect-ratio (min-device-aspect-ratio, max-device-aspect-ratio)
Типы устройств, к котором применяется - handheld, print, projection, screen, tty, tv.
Значение - целое число/целое число.
Определяет соотношение сторон экрана устройства. Отличается от aspect-ratio тем, что применяется относительно самого устройства а не видимой части.
device-height (min-device-height, max-device-height)
Типы устройств, к котором применяется - все кроме speech.
Значение - размер.
Определяет размер доступной высоты или печатной страницы. Задается числом, которое определяет количество пикселей.
device-width (min-device-width, max-device-width)
Типы устройств, к котором применяется - все кроме speech.
Значение - размер.
Определяет размер доступной ширины или печатной страницы. Задается числом, которое определяет количество пикселей.
grid
Типы устройств, к котором применяется - all.
Значение - нет.
Определяет, что это устройство с фиксированным размером символов. Размеры букв на таком устройстве занимают одинаковую ширину и высоту и выстраиваются по заданной сетке. К подобным устройствам можно отнести терминалы, а также телефоны, которые поддерживают только один шрифт.
height (min-height, max-height)
Типы устройств, к котором применяется - все кроме speech.
Значение - размер.
Высота отображаемой области.
monochrome (min-monochrome, max-monochrome)
Типы устройств, к котором применяется - handheld, print, projection, screen, tty, tv.
Значение - целое число.
Определяет, что устройство монохромное. Если указано число, то оно обозначает число бит на пиксель. Так, значение 8 равнозначно 256 оттенкам серого (или другого цвета). В примере 6 показан стиль для монохромного и цветного принтера.
orientation
Типы устройств, к котором применяется - handheld, print, projection, screen, tty, tv.
Значение - landscape | portrait.
Определяет, что устройство находится в альбомном режиме (ширина больше высоты) или портретном (ширина меньше высоты).
resolution (min-resolution, max-resolution)
Типы устройств, к котором применяется - handheld, print, projection, screen, tty, tv.
Значение - разрешение в dpi (точек на дюйм) или dpcm (точек на сантиметр).
Определяет разрешение устройства, например, принтера. В примере 8 стиль будет работать для принтера с минимальным разрешением 300 точек на дюйм.
scan
Типы устройств, к котором применяется - tv.
Значение - interlace | progressive.
Определяет тип развертки телевизора — чересстрочная (interlace) или прогрессивная (progressive). При чересстрочной развёртке телевизор вначале показывает нечётные строки кадра, затем чётные, что позволяет сократить передаваемые данные. В прогрессивной развёртке кадр передаётся и показывается целиком.
width (min-width, max-width)
Типы устройств, к котором применяется - все кроме speech.
Значение - размер.
Описывает ширину отображаемой области. Это может быть окно браузера или печатная страница. В примере 9 при уменьшении окна до 600 пикселов и меньше меняется цвет фона веб-страницы.
Самые распространенные медиа-запросы
Комментарии
RSS лента комментариев этой записи