Matsi
@Matsi
Веб-разработчик

Разметка HEADER, чтобы потом сделать адаптив?

Столкнулся с такой проблемой. Адаптив никогда не делал, и тут сказали делать. И после прочтения разной литературы пришел к выводы, что я делаю плохую верстку, ибо под нее адаптив сложно сделать. Есть шапка, как бы вы ее разметили? Кто как обычно вообще такие блоки размечает?40396a8ec5c6459483cf40d6f8e7ad61.jpg

Вот мой код как я ее разметил

https://codepen.io/Matsi/pen/egrNaX

Я знаю, что для адаптива нужно сделать контейнер в width: 100% и max-width: 1200px; и дальше от этого плясать. Но меня еще интересует, как бы вы разметили такую шапку.

PS: многие стали писать про bootstrap, но вся шляпа в том что, полный хедер выглядит так: 81410bb1884842f7b692b218723301f5.jpg

у меня слева фиксированное меню, с прокруткой на всю страницу и занимает этот сайдбар 120px., весь остальной контент находится в диве page-wrap. Получается, page-wrap и верстать bootstrap.

Но допустим верстка уже готова, в таком виде как она есть, и вы же не будите верстать заново под bootstrap, что делать в таком случае, чтобы делать адаптив? ибо когда я делаю у меня блоки не уменьшаются и смещаются вниз криво.
  • Вопрос задан
  • 689 просмотров
Решения вопроса 2
densisss
@densisss
Веб-разработчик.
Для адаптива очень хорошо Bootstrap, я бы на твоем место посмотрел в его сторону, он имеет 12-колоночную схему. ты бы мог разбить свой хэдер на 4 ячейки по 3 колонки. На экранах мобильных устройств эти блоки сложатся под друг-друга и с помощью медиа запроса ты можешь сделать шрифт намного меньше(особенно если юзаешь em), меню сделать схлопывающимся. Вот и получишь аккуратный хэдер.
Ответ написан
Комментировать
Ankhena
@Ankhena Куратор тега CSS
Нежно люблю верстку
Bootstrap бесит, поэтому:

(Не важно бутстрап или нет) Нужно внимательно рассмотреть все макеты дизайнера для разных размеров экранов для того, чтобы понять, какие блоки как себя должны вести.
Блоки могут перестраиваться, а могут одни скрываться, а другие показываться.

Дальше писать эти блоки.

Рассмотрим ваш пример, без учета сайдбара, просто частный случай шапки.
Первая строка, header
Я люблю display:flex, если не нужна поддержка древностей, то прекрасно подойдет. (Да, он пока несовершенен, но сейчас не об этом)
У флексбоксов есть чудное свойство order, позволяющее менять порядок следования элементов.

Внутри header'а можно сделать 4 блока или 3. Если 3, то средний, в свою очередь, будет состоять из 4-х блочиков, которые на маленьких экранах тоже перестроятся в столбик: 2 телефонных номера, затем фраза про СПб, затем кнопка (кнопке зададим order так, чтобы она стала последней).
И в соответствующих media регулируем ширину, отступы, order у вложенных блоков и flex-wrap, flex-direction у оберток.

Если все таки бутстрап, то все аналогично, только манипулируем добавлением соответствующих классов.

Главное, чтобы в голове была готовая логика поведения блоков. Дальше дело техники.
И целесообразнее, чтобы адаптив делал тот же человек, что и начальную верстку.
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы