Очень кратко о том, как сделать сайт адаптивным

Не будем углубляться в спор о том, как правильно говорить адаптивный или отзывчивый дизайн, на данный момент это не имеет ни какого смысла. Наша задача, чтобы сайт отображался правильно и красиво на большинстве возможных устройств с разным размером дисплеев.
  Добиться адаптивности сайта, применяя правила CSS3 очень просто, стоит лишь запомнить и применять несколько простых условий при написании CSS-кода для любого сайта с отзывчивым дизайном.

Размеры и основные величины измерения для элементов

  Для того чтобы элементы сайта заполняли все выбранное пространство, они должны быть эластичными, растягиваясь и сужаясь до удобных размеров, для просмотра на различных устройствах.
  Ширину для основных блоков лучше указывать в процентах (width: 98%), а высоту устанавливать автоматически (height: auto;). Это же относится к внешним и внутренним отступам (margin и padding).
  Значения в пикселях указываются только для элементов, которые должны иметь точно определенную ширину, высоту и отступы.

Медиа запросы CSS и как с ними работать

  Адаптивный сайт, на экранах с разной шириной, смотрится по-разному. Элементы и блоки сайта, в зависимости от ширины окна браузера, изменяют свои размеры и положение для более удобного просмотра контента посетителем. Такого результата позволяет добиться использование медиа запросов (правил) @media, добавленных в версии CSS3.
  Применять медиа запросы очень просто, достаточно заключить CSS-код для селектора выбранного блока, между операторами медиа запроса, указав нужные параметры. Например:

@media only screen and (min-width: 900px) {
  .codeholder {
    background-color: #b3ff66;
  }
}
@media only screen and (max-width: 800px) {
  .codeholder {
    background-color: #ff9933;
  }
}
@media only screen and (max-width: 600px) {
  .codeholder {
    background-color: lightblue;
  }
}

  В данном случае цвет фона у блока с классам .codeholder будет изменяться в зависимости от величины окна браузера, наглядно это показано на странице примера:
ПРИМЕР

- правило min-width определяет стили когда ширина окна браузера больше чем указанная;
- правило max-width определяет стили когда когда ширина окна меньше чем заданная в правиле.

Изображения и видео по размеру экрана

  Сделать адаптивные изображения, растянуть или сжать по размеру экрана или родительского блока, для них также следует указать значение ширины в процентах, а высоту - auto. Также для изображений можно сразу задать свойство display, со значением inline-block, что позволит управлять расположением нескольких картинок, находящихся в одном блоке, задавая различные значения ширины для разных медиа запросов.

img {
  display: inline-block;
  max-width: 100%;
  height: auto;
  width: auto;
}

ПРИМЕР
  Точно также можно сделать адаптивным видео встроенное на сайте, чтобы окно просмотра соответствовало размеру родительского блока и окну браузера, не выходило за его пределы.

.video embed,
.video object,
.video iframe {
  width: 100%;
  height: auto;
}

  Основная сложность при создании сайта с отзывчивым дизайном, как впрочем и любого другого, заключается в том что нужно изначально продумать удобную для посетителя структуру и приятный интерфейс, которые в последствии подогнать уже сделать адаптивными.
©http://magentawave.com