Сейчас объясню. Есть макет скажет в 768px шириной, но для 320px он выглядит совсем по другому, то есть там есть новые элементы, новые блоки(типа с рекламой, например).
Каким образом верстать это как адаптивный блок? Как добавить в верстку новый блок именно для экрана 320px? Он ведь будет меньше по ширине от основного 768px
Можно и так, конечно, но я бы лично сверстал его с первого разрешения направления*, потом подогнал бы под остальные медиа-запросы и показывал там, где нужно. * Имеется ввиду направление mobile-first или desktop-first.
Фреймоврки в этом плане могут быть очень полезны - если не хочется возиться. В Бутстрапе есть специальные встроенные классы для таких случаев - .hidden-xs, .visible-md и так далее...
Владимир Соломыкин, никогда до этого не сталкивался с mobile-first, можете подсказать?
Вот у меня есть 3 брекпоинта, нужно верстать сначала именно 320px?
Но мы видим, что на 480px вообще все перестроено в галерее. Обычно я верстаю максимальное разрешение, а потом перестраиваю под мобильные устройства.
Такое чувство, что в разметке будут 3 отдельно разных макета, просто скрытые не на своем брекпоинте.
Я просто не понимаю фразу "потом подогнал бы под остальные медиа-запросы и показывал там, где нужно"
ps Почему то под этот макет бутстрап тяжко идет, использую флексы
Почему то под этот макет бутстрап тяжко идет, использую флексы
Потому что макет не делался под общепринятую 12-ти колоночную верстку (см второй макет - там явно 5 колонок).
не сталкивался с mobile-first...
Вот у меня есть 3 брекпоинта, нужно верстать сначала именно 320px?
Верстайте как вам будет угодно. Mobile-first - это принцип верстки сайта, оптимизированного в первую очередь под мобильные устройства и в каком порядке вы будете стилизовать брейкпоинты - без разницы.
Подробнее можно почитать например на Хабре
Средний
