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