С каких макетов начать изучение адаптивной верстки?
Адаптивная верстка это всего лишь по сути манипулирование media queries для преобразования размера и позиций элементов в зависимости от ширины экрана, плотности пикселей и т.п. Для изучения этой технологии подойдут любые макеты.
Фича в том, что может быть 2 варианта:
1. Дизайнер все продумал за вас и сам отрисовал макет сайта в нескольких популярных разрешениях (экран смартфона, экран планшета, полноразмерный десктоп). И вам нужно лишь грамотно сделать переход из одного состояния в другое.
2. Дизайнер нарисовал только десктоп версию и вам нужно адаптировать её под мобильные устройства. Тут работает фантазия и здравый смыл. Вот и всё.
Т.е. по сути отличие только в том, продумали за вас внешний вид или нет. В остальном же, верстка обоих типов макетов ничем не отличается.
Зайдите на сайт любого адаптивного фреймворка (bootstrap, zubr, skeleton и т. д.)и посмотрите пример сетки и ее поведения на сайте. Теперь вы наглядно увидели поведение блоков и их размеры на разных разрешениях. Делаете в фотошопе сетку направляющими и дизайните/верстаете.