Стили в зависимости от размеров экрана (Media Queries)

Задать стили к элементам сайта, в зависимости от размеров экрана, можно через медиа запросы (англ «Media Queries»).

/* применять CSS, если размер экрана больше 960px */
@media (min-width: 960px) {
  body {
    width: 960px;
  }
}

/* применять CSS, если размер экрана меньше 960px */
@media (max-width: 960px) {
  body {
    width: 100%;
  }
}

Также можно указывать минимальную и максимальную ширину экрана браузера:

@media (min-width: 320px) and (max-width: 1024px) {
  /* CSS-код */
}

/* сокращённо (новый синтаксис) */
@media (320px <= width >= 1024px) {
  /* CSS-код */
}

Медиа запросы появились в CSS 3.