Технология верстки шапки

Question

Технология верстки шапки

Стасёнс Бойко Знаток (287), на голосовании 2 месяца назад

Подскажите, как именно верстать нужно эту шапку для адаптива. Я вижу здесь 2 секции, условно назовем header__top и header__bottom. В адаптиве видно что элементы из нижней части идут в верхнюю, и наоборот. Сложность вызывает момент как из второй части вверх перевести элементы при адаптиве.
Ниже скрины, а если не понятно по скринам вот ссылка на фигму.
https://www.figma.com/design/AqI3RTtuopbBvGM56dYuUQ/Gidratop-Верстка?node-id=0-1&t=objWZXdet1zgrW08-0
Вот что мне приходит в голову

Давать элементам которые меняют своё расположение по 2 - 3 класса и через дисплей none и мелкую конфигурацию включать где нужно.
Гриды
Верх и низ делать через список. В моём случае их два и дальше через reverse что то придумывать.

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

Answer 1

Артур Кириллов Профи (656) 3 месяца назад

Через js добавлять в разметку элементы в зависимости от ширины вьюпорта, либо через css преждевременно скрывать эти элементы и на точках адаптива показывать их.

Артур КирилловПрофи (656) 3 месяца назад

Макет впринципе средний

Стасёнс БойкоЗнаток (287) 3 месяца назад

Я же написал что js еще не учил. Тут решается и без js. Каким способом просто...

Артур Кириллов Профи (656) Стасёнс Бойко, для тебя самый простой вариант скрывать и показывать через css нужные элементы. Их не так и много там

Answer 2

Есть два принципиальных способа:

1) Использовать grid и перестраивать grid-template-areas в нужном порядке в адаптиве. Похожий способ на моей демо-странице https://bulletproof-password.web.app/toggle-theme.html

2) Нарисовать два отдельных шаблона или веб-компонента и динамически переключаться. Или использовать внутреннюю маршрутизацию (client-side routing) для загрузки нужного компонента хедера, как с использованием react-router-dom, так и без.

но без js в данной задаче обойтись не получится, хотя бы потому, что потребуется нарисовать бургер-меню для адаптива..

Answer 3

для этого есть целая "технология"? наверное под новые специальности "шапкоукладчиков"...

Answer 4

Можно попробовать обойтись гридами, но если быстрее и удобнее продублировать телефон и группу синих иконок там и тут, и показывать/скрывать, вам тоже никто ничего не скажет — так тоже можно.

По сложности — тут есть много чего, но его сложность в js (слайдеры, табы, меню, раскрывающиеся списки и прочее), т.е. вполне себе сложный.

По html/css тоже много чего: тут и ховеры, позиционирование, таблицы, формы и адаптив. А на js переходить можно в любой момент, вообще этот макет без js тяжело реализовать. Здесь много потенциальных js-элементов, которые лучше верстать, понимая как это потом будет работать, иначе их потом придется перевёрстывать.

Answer 5

Учитель Зла! Мастер (2040) 3 месяца назад

Сложный макет , без JS не сверстаешь его .

⚠Оракул (50099) 3 месяца назад

 привет 
 
ты сейчас  
со  
смартфона❓  
  
если да  
можешь проверить  
будет ли  
звук работать  
  
если смотреть  
в браузере  
со смартфона  
в моб.версии сайта  
  
но не в полной версии сайта  
  
а именно в моб.версии сайта  
  
вот сайт  
  
r926440z.bget.ru/www/upload/2020/05/29/prosmotr-tv/  
  
нужно проверить  
мужское кино  
наше новое кино 
 
проверяю 
с 
разных мобильных устройств 
и 
с разных версий андроида 
 
в одних звук работает 
 
в других 
звука нет

Answer 6

Андрей Устинов Мастер (2150) 3 месяца назад

Проще всего сделать 2 разных хедера. Один под десктоп, а второй под телефон. И в зависимости от размера экрана показывать нужный.

Стасёнс БойкоЗнаток (287) 3 месяца назад

А этот способ современной верстки или типо как один из оставшихся вариантов?

Андрей Устинов Мастер (2150) Стасёнс Бойко, Нет каких-то стандартов вёрстки. У каждого проекта могут быть свои парадигмы и паттерны проектирования, которые устраивают команду. То, что я предложил — самый простой вариант решения.