Просто о @media и @import

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

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

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

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

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

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

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

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

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

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

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

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

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



<code>/* Если твоя ширина больше или равна 500px - обработай. */
@media all and (min-width:500px) { … }
@media (min-width:500px) { … }
/* Если ты наладонник или экран с раширением не больше 480px - обработай */
/* Если ты наладонник или экран с раширением не больше 480px - обработай */
@media  handheld,
screen and ( max-width:480px ),
screen and ( max-device-width:480px ) {
BODY {
font-size:1.3em;
}
}
/* правило сработает в случае, если разрешение экрана по ширине в пределах от 400 до 700 пикселей */
@media screen and (min-width: 400px) and (max-width: 700px) { … }
/* Здесь мы определяем высоту экрана девайса. Иногда может быть полезным. */
<link rel="stylesheet" media="screen and (device-height: 600px)" />


/* Если ты в вертикальном положении (например, iPad) - обработай. */
@media all and (orientation: portrait) { … }
/* Ну ты понял... */
@media screen and (color), projection and (color) { … }

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

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

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

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

Разное

/* Правила для мониторов различных форматов */
@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) { … }
/* Вертикальное расположение экрана. */
@media all and (orientation:portrait) { … }
/* Горизонтальное расположение экрана. */
@media all and (orientation:landscape) { … }
/* Что-то для терминалов с сеткой, лучше почитать спецификацию. */
@media handheld and (grid) and (max-width: 15em) { … }
@media handheld and (grid) and (device-max-height: 7em) { … }
/* Стили для телефизоров с прогрессивной разверткой. */
@media tv and (scan: progressive) { … }

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

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

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