Очень долго сам искал различную информацию по адаптивной вёрстке, много чего пересмотрел, но всё равно было немного боязно верстать адаптивно. Как только просто взял и попробовал - понял, что всё это нереально просто. Постараюсь объяснить, как верстать с помощью media.
Представьте, что вы верстаете обычный сайт, сразу вписывая стили в файл. Сверстали всё, отлично. Теперь создаёте ещё один файл в css и снова верстаете сайт, только при этом указываете media необходимый (zooks уже показал, как это сделать). То есть это та же вёрстка один в один, просто добавляется строчка с указанием размера экранов, а дальше делайте так, как вам удобно. Единственный нюанс - смотреть вёрстку для того или иного разрешения - инструмент в FF адаптивный дизайн. В хроме и опере тоже такая же фича есть - выставляете необходимое разрешение (к примеру в media у вас максимум 320px - выставьте разрешение в браузере 320px) всё.
Конечно надо понимать наследования и перезапись свойств в css, тогда становится ещё легче. Ну и многое зависит от вашего стиля вёрстки. Сейчас flexbox очень удобно пользоваться и при его использовании надобность достаточно большого количества дополнительных перезаписей правил в media просто отпадает.
