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

Question

[Dimka Matsi]

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

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

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

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

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

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

Но допустим верстка уже готова, в таком виде как она есть, и вы же не будите верстать заново под bootstrap, что делать в таком случае, чтобы делать адаптив? ибо когда я делаю у меня блоки не уменьшаются и смещаются вниз криво.

Comments

[Hyubert]

bootstrap

[sergey]

код нужно размещать на jsfiddle или codepen, простыню читать нет смысла

[Dimka Matsi]

SM: готово)

[Dimka Matsi]

Hyubert: это понятно, что им, но и без него тоже можно по-другому реализовать

[Hyubert]

Дима Мацкелло: прочел PS, не только врап на бутстрап делай, а весь сайт, и тогда он будет адаптивный :)

[Hyubert]

Дима Мацкелло: просто интересно, как ВЫ полчили заказ на верстку с такими знаниями или это для себя?

[Hyubert]

Дима Мацкелло: вот заготовка для вашего меню codepen.io/Hyubert/pen/ZLobyg?editors=1000

[Dimka Matsi]

Hyubert: Я делаю только верстку, адаптивом замается другой человек, а вышло все так, что теперь я адаптивом занимаюсь. И добро пожаловать в новый мир, я только сегодня про него начал узнавать. И понял, что код который я пишу, говно для адаптива.

[Dimka Matsi]

Hyubert: Спасибо)

[Hyubert]

Дима Мацкелло: ну значит изучайте фреймворки Bootstrap или Foundation

фриланс или студия?

[Hyubert]

Дима Мацкелло: почитайте о media queries, тогда у Вас будет шанс сверстать адаптив, и что такое viewport

Answer 1

[Денис Шевченко]

Для адаптива очень хорошо Bootstrap, я бы на твоем место посмотрел в его сторону, он имеет 12-колоночную схему. ты бы мог разбить свой хэдер на 4 ячейки по 3 колонки. На экранах мобильных устройств эти блоки сложатся под друг-друга и с помощью медиа запроса ты можешь сделать шрифт намного меньше(особенно если юзаешь em), меню сделать схлопывающимся. Вот и получишь аккуратный хэдер.

Answer 2

[Ankhena]

Bootstrap бесит, поэтому:

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

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

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

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

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

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