media в каскадных таблицах стилей

@media - это css-правило, которое связывает группу вложенных выражений в блок, ограниченный скобками, применение в поточном устройстве которого определяется условием media query.

Элементарным media query может быть указание медиа типа, что было введено еще в css2.1:

@media  {
  /* media-specific rules */
}

А вот конкретный пример:

@media print {
  body { font-size: 10pt }
}
@media screen {
  body { font-size: 13px }
}
@media screen, print {
  body { line-height: 1.2 }
}

Вот все возможные типы, которые также части разных медиа групп:

	Groups
Type	continuous	paged	visual	audio	speech	tactile	grid	bitmap	interactive	static
braille	X					X	X		X	X
embossed		X				X	X			X
handheld	X	X	X	X	X		X	X	X	X
print		X	X					X		X
projection		X	X					X	X
screen	X		X	X				X	X	X
speech	X				X				X	X
tty	X		X				X		X	X
tv	X	X	X	X				X	X	X

Media query ввели в CSS3, он состоит из медиа типа и как минимум из одного выражения, которое ограничивает применения выделенных стилей медиа фичами, такими как ширина, высота и цвет.
Пока мы не используем операторы not или only, медиа тип опционален и если он не указан, то подразумевается all.

Медиа квери может быть указан либо на весь файл стилей: 

<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />

Либо часть стилей в файле стилей:

@media (max-width: 600px) {
  .facet_sidebar {
    display: none;
  }
}

Есть логическое И в выражениях:

@media tv and (min-width: 700px) and (orientation: landscape) { ... }

Есть логическое ИЛИ(,) в выражениях:

@media (min-width: 700px), handheld and (orientation: landscape) { ... }

Медиа фичи можно посмотреть здесь