Основы адаптивной верстки. Медиа-запросы.

5 / 5

Автор: Администратор

10.10.2015

Теги: css, media, адаптивность, adaptive

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

Адаптивность

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

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

На изображении приведен пример отображения такого сайта.

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

Вернёмся к CSS и собственно самим media-запросам. Этот механизм является такое конструкцией, который позволяет задавать стили только для устройств с определенными параметрами.

Например можно задавать стили для устройств по их максимальной/минимальной ширине/высоте. Очевидно, что у телефонов эти параметры куда меньше, чем у компьютеров или планшетов. Таким образом медиа-запросы являются одним из механизмов для создания адаптивных сайтов. Отмечу, что это лишь один из механизмов.

Все медиа-запросы начинаются с @media, после чего идут условия проверки и в фигурных скобках CSS-стили, пример:

@media screen and (max-height: 600px){
/* CSS-стили */
}

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

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

Табл. 1. Устройства и их описание
Тип	Описание
all	Все типы. Это значение используется по умолчанию.
braille	Устройства, основанные на системе Брайля, которые предназначены для чтения слепыми людьми.
embossed	Принтеры, использующие для печати систему Брайля.
handheld	Смартфоны и аналогичные им аппараты.
print	Принтеры и другие печатающие устройства.
projection	Проекторы.
screen	Экран монитора.
speech	Речевые синтезаторы, а также программы для воспроизведения текста вслух. Сюда, например, можно отнести речевые браузеры.
tty	Устройства с фиксированным размером символов (телетайпы, терминалы, устройства с ограничениями дисплея).
tv	Телевизоры.

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

По мимо этого в медиа-запросах могут использоваться логические операторы.

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

and

Логическое И. Объединяет несколько условий, которые должны выполняться одновременно.

В первом примере как раз используется этот оператор.

not

Логическое отрицание(НЕ). Соответственно инвертирует одно из условий.

Пример, для всех типов устройств, кроме смартфонов:

@media all and (not handheld){
/* CSS-стили */
}

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

Запятая служит для обозначения логического ИЛИ. Запрос срабатывает если выполняется хотя бы одно из указанных через запятую условий.

Пример, для телевизоров или проекторов:

@media tv, projection{
/* CSS-стили */
}

only

Этот оператор ничего из себя не представляет и применяется лишь для того, чтобы медиа-запросы поддерживались старыми браузерами.

Нужно ставить перед каждым условием, если их несколько, объединенных через запятую, то для каждого.

Пример, для мониторов или смартфонов:

@media only screen, only handheld{
/* CSS-стили */
}

По мимо выше указанных условий можно использовать медиа функции.

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 означает, что красный, зелёный и синий канал могут отображать 2³ цветов каждый, что в общем составляет 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 пикселов и меньше меняется цвет фона веб-страницы.

Самые распространенные медиа-запросы

/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* CSS-код */
}
 
/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px) {
/* CSS-код */
}
 
/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) {
/* CSS-код */
}
 
/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* CSS-код */
}
 
/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* CSS-код */
}
 
/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
/* CSS-код */
}
 
/* Desktops and laptops ----------- */
@media only screen and (min-width : 1224px) {
/* CSS-код */
}
 
/* Large screens ----------- */
@media only screen and (min-width : 1824px) {
/* CSS-код */
}
 
/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* CSS-код */
}
 
/* BlackBerry Torch -------- */
@media screen and (max-device-width: 480px) {
/* CSS-код */
} 
 
/* Samsung GALAXY Tab -------- */
@media (max-device-width: 1024px) and (orientation: landscape) {
//css code here
} 
 
/* Dell Streak 7 --------- */
@media (max-device-width: 800px) {
/* CSS-код */
} 
 
/* Motorola's Xoom -------- */
@media (max-device-width: 1280px) {
/* CSS-код */
} 
 
/* Samsung GALAXY Tab -------- */
@media (max-device-width: 1024px) and (orientation: landscape) {
/* CSS-код */
}