Веб

Применение @media в CSS

Оставить комментарий

В данной статье кратко изложены вопросы применения правила @media в CSS-файлах. Это мощное средство позволяет «на лету» применять различные стили для различной среды отображения.

Синтаксис

@media mediatype_condition { css_expressions }

,где mediatype_condition — условие описывающее параметры среды, css_expressions — блок CSS-кода применяемый для данного правила.

Описание условий

Условия позволяют описывать как тип медиасреды, так и ее отдельные параметры, например:

/* если ширина больше 800px */
@media all and (min-width:800px) { ... }
/* или сокращенная форма */
@media (min-width:800px) { ... }

/* если наладонник или другое устройство с экраном шириной менее 480px */
@media handled,
       screen and (min-width:800px),
       screen and (max-device-width:800px) { … }

/* для планшетников можно определять ориентацию */
@media all and (orientation:portrait) { ... }
@media all and (orientation:landscape) { ... }

/* можно определять формат монитора */
@media screen and (device-aspect-ratio:16/9) { ... }

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

Ниже перечислены типы media используемые в правилах @madia :

  • all — все устройства.
  • aural — устройства голосового считывания с экрана основанные на речевом синтезе (см. также speech).
  • braille — тактильные устройства на системе Брайля для незрячих людей.
  • embossed — печатающие устройства на системе Брайля для незрячих людей.
  • handheld — различные портативные устройства с ограниченным размером экрана. (Будьте внимательны! Очень часто встречается опечатка «handled».)
  • print — печатающие устройства, а также режим предварительного просмотра печати.
  • projection — проекционные устройства.
  • screen — экран компьютера.
  • speech — устройства голосового считывания с экрана основанные на речевом синтезе (см. также aural).
  • tty — устройства использующие фиксированный размер символов (телетайпы, терминалы и устройства с ограниченными возможностями дисплея)
  • tv — телевизоры и другие устройства с низким разрешением экрана.

Альтернатива

Альтернативой данным правилам является использование правил при подключении CSS-файлов в заголовке страницы. В приведенном ниже примере подключается специальный стиль для принтеров:

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

 Ограничения браузеров

  1. Правила @media обрабатываются браузерами IE9+, Chrome 1.0+, Opera 9.2+, Safari 1.3+, Firefox 1.0+, Android 1.0+, iOS 1.0+ .
  2. Некоторые браузеры не обрабатывают правила при масштабировании экрана с помощью клавиш Ctrl+, Ctrl- . Такая особенность замечена у браузеров Safari, Chrome.

Добавить комментарий