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

При верстке нового сайта я руководствуюсь принципом — каждому девайсу свой вариант отображения странички. Имея один 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). Описано не всё, есть еще работа с цветами. Я сильно не уверен, что всё будет работать в реальных условиях, на работоспособность и кроссбраузерность всё не протестировал, буду делать это по мере возможности и дописывать.

Размещено в CSS.

В этом блоке кнопочки для кликания на случай, если пост оказался полезным :)
  • Vladimir

    тестировал с max-width, итого: в FF2, safari3 и opera 9 не идет… как и в ie 6-7-8.

    • Rit

      VladimirДеревня епт)

      Автору за статью спасибо))

    • Рустам Башаров

      Ты где эти браузеры взял. Google официально отказался от потддержки браузеров Ie 5, 6 ,7, 8, что-то делать под них не смысла, касательно FF, Safari они поддерживаются в таком порядке: последняя и предыдущая версия.

      • Ростам, Владимир писал комментарий 3 года назад, тогда еще актуально было )

  • Evgeny Fominikh

    Спасибо за статью

  • Kieth

    мозги обжёг

  • Denis

    handheld больше, к сожалению, не работает.