Media запросы в CSS - азы адаптивной верстки

Медиа запросы необходимы для того, чтобы писать разные стили для разных экранов (а точнее разных разрешений экранов, а еще точнее: для разных ширин экранов). То есть по умолчанию мы пишем стили для любых экранов, например:
a {color:blue;}
Согласно данному коду ссылки станут синими на ВСЕХ экранах, но медиа запросы позволяют сделать их на одних экранах зелеными, на других желтыми и т д. На практике так конечно не делают, обычно меняют размеры (font-size, width, padding, margin), то уменьшают, то увеличивают
Ну и display то block, то none. Именно таким образом одни блоки скрываются, а другие появляются в зависимости от ширины экрана.
При верстке адаптивного макета обычно без медиа запросов не обойтись, но все таки нужно стараться обходиться без них, просто потому-что потом легче будет доделыать и переделывать код. То есть мы не рекомендуем использовать медиазапросы без крайней необходимости.

Ближе к делу

/* Здесь код для любых экранов  */

@media screen and (
min-width:480px) and (max-width:800px) {
/* Здесь пишем стили для экранов шириной от 480 до 800 px */

}

@media screen and (max-width:479px) {
  /* Здесь код для экранов до 480 (по сути телефоны) */
}

Как вы поняли, можно указывать диапазон широт экранов, а можно от или до указать.
Пред. урок След. урок