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

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

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

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

где 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); /* Если твоя ширина больше или равна 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) { … } /* Здесь мы определяем высоту экрана девайса. Иногда может быть полезным. */ /* Если ты в вертикальном положении (например, iPad) - обработай. */ @media all and (orientation: portrait) { … } 
/* Ну ты понял... */
@media screen and (color), projection and (color) { … }

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

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

Разное

/* Правила для мониторов различных форматов */ @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.: Возможно в чем-то есть ошибки, буду благодарен за исправления.