В данной статье кратко изложены вопросы применения правила @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">
Ограничения браузеров
- Правила @media обрабатываются браузерами IE9+, Chrome 1.0+, Opera 9.2+, Safari 1.3+, Firefox 1.0+, Android 1.0+, iOS 1.0+ .
- Некоторые браузеры не обрабатывают правила при масштабировании экрана с помощью клавиш Ctrl+, Ctrl- . Такая особенность замечена у браузеров Safari, Chrome.