Home

Tags

Условия в CSS

2012-12-26 css media if

Условия в CSS они же медиа запросы (CSS media queries), используются для переключения/подключения CSS в зависимости от некоторых условий (свойств аппаратуры), часто применяются в css фреймворках.

Пример использования:

@media screen and (min-width: 1024px) {
  #sidebar { width: 220px; }
}
@media screen and (max-width: 1023px) {
  #sidebar { width: 110px; }
}
В данном примере условия работают для экранов мониторов (screen), и если ширина окна будет 1024px и более то будет активный 1-ый блок (=220px), если ширина окна будет 1023px и менее то будет активный 2-й блок (=110px).

Пример использования условий при подключении css файла:
<link rel="stylesheet" media="all and (min-device-width: 600)" href="/style.css" />

Некоторые из параметров:

min-width, max-widthМинимальная/максимальная ширина окна
min-height, max-heightМинимальная/максимальная высота окна
min-device-width, max-device-widthМинимальная/максимальная ширина экрана
min-device-height, max-device-heightМинимальная/максимальная высота экрана

Условия по девайсам:

allЛюбые устройства
screenЭкраны мониторов
printПринтеры
handheldСмарфоны и аналоги
tvТелевизоры
projectionПроекторы

Совместимость

Эта возможность появилась в CSS3, работает в:
Chrome, Firefox 3.6+, Safari 4+, Opera 10, IE 9+, Android 2+, iOS 2+

О других свойствах можно прочитать тут developer.mozilla.org