При верстке нового сайта я руководствуюсь принципом – каждому девайсу свой вариант отображения странички. Имея один html-код мы можем совершенно по разному представить страницу на различныйх устройствах. В различных учебниках традиционно перечисляют типы устройств:

• all – Все типы. Это значение используется по умолчанию.
• aural – Речевые синтезаторы, а также программы для воспроизведения текста вслух. Сюда, например, можно отнести речевые браузеры.
• braille – Устройства, основанные на системе Брайля, которые предназначены для слепых людей.
• handheld – Наладонные компьютеры и аналогичные им аппараты.
• print – Печатающие устройства вроде принтера.
• projection – Проектор.
• screen – Экран монитора.
• tv – Телевизор.

Обычно верстка очередного макета ограничивается записью:

1

<link rel="stylesheet" type="text/css" media="all" href="style.css" />

где media=«all» – это указание для всех девайсов использовать стить style.css. Немного реже можно увидеть где media=«print» для принтеров. Но мало кто из верстальщиков знают (или используют) всю мощь @media. Попробую на примерах показать некоторые «фишки».

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

Простые примеры медиа-импорта

1
2

/* Если ты "экран" - подключи стиль. */
@import url(style.css) screen;

Самое распространенное выражение.

1

@import url(style.css) screen, projection ;

Тоже самое, только с перечислением типов устройств.

Медиа-выражения

1
2

/* Если ты экран и при этом цветной - загрузи этот стиль! */
@import url(color.css) screen and (color);

1
2
3

/* Если твоя ширина больше или равна 500px - обработай. */
@media all and (min-width:500px) { … }
@media (min-width:500px) { … }

1
2
3
4
5
6
7
8

/* Если ты наладонник или экран с раширением не больше 480px - обработай */
@media  handheld,
		screen and ( max-width:480px ),
		screen and ( max-device-width:480px ) {
	BODY {
		font-size:1.3em;
		}
}

(пример взят у pepelsbey)

1
2

/* правило сработает в случае, если разрешение экрана по ширине в пределах от 400 до 700 пикселей */
@media screen and (min-width: 400px) and (max-width: 700px) { … }

1
2
3
4
5
6

/* Здесь мы определяем высоту экрана девайса. Иногда может быть полезным. */
<link rel="stylesheet" media="screen and (device-height: 600px)" />
<pre>
<pre lang="css" line="1">
/* Если ты в вертикальном положении (например, iPad) - обработай. */
@media all and (orientation: portrait) { … }

1
2

/* Ну ты понял... */
@media screen and (color), projection and (color) { … }

Логические выражения

1
2

<!-- Если ты не цветной экран - обработай. -->
<link rel="stylesheet" media="not screen and (color)" href="example.css" />

(проблемы с кроссбраузерностью)

1

<link rel="stylesheet" media="only screen and (color)" href="example.css" />

Разное

1
2
3
4
5

/* Правила для мониторов различных форматов */
@media screen and (device-aspect-ratio: 16/9) { … }
@media screen and (device-aspect-ratio: 32/18) { … }
@media screen and (device-aspect-ratio: 1280/720) { … }
@media screen and (device-aspect-ratio: 2560/1440) { … }

1
2
3
4

/* Вертикальное расположение экрана. */
@media all and (orientation:portrait) { … }
/* Горизонтальное расположение экрана. */
@media all and (orientation:landscape) { … }

1
2
3

/* Что-то для терминалов с сеткой, лучше почитать спецификацию. */
@media handheld and (grid) and (max-width: 15em) { … }
@media handheld and (grid) and (device-max-height: 7em) { … }

1
2

/* Стили для телефизоров с прогрессивной разверткой. */
@media tv and (scan: progressive) { … }

Кстати, я считаю, что тип TV – достаточно важный тип в будущем. Уже сейчас появляются телевизионне приставки с возможностью веб-серфинга, и, думаю, скоро это будет настолько же обыденно, как раньше видеомагнитофон или DVD-плеер. В одном я только сомневаюсь – будет девайс считать себя телевизором или компьютером?

P.S.: Наиболее интересные выражения находятся в первой половине поста, вторая половина – просто показать возможности @media и @import.

P.S.S.: Возможно в чем-то есть ошибки, буду благодарен за исправления.

При написании этого материала использовалась спецификация Media Queries, находящаяся в статусе возможной рекомендации (CR). Описано не всё, есть еще работа с цветами. Я сильно не уверен, что всё будет работать в реальных условиях, на работоспособность и кроссбраузерность всё не протестировал, буду делать это по мере возможности и дописывать.