Вопрос по адаптивной верстке?

Question

[Андрей Кузьмин]

Всем привет, не кидайтесь камнями за глупый вопрос. Вчера начал осваивать адаптивную верстку и сегодня решил свою старую статическую страницу сделать адаптивной. В принципе, мне не понятно только как верстать внутренние блоки т.е основные блоки я делаю резиновыми, но как быть с внутренними? Мои старые верстки напичканы position:absolute - чем их заменить? Задавать все отступы и размеры также в %? Или использовать флекс?

Comments

[Ankhena]

Или использовать флекс?

да, это просто и разумно.

Задавать все отступы и размеры также в %?

Зависит от эффекта, которого вы хотите достичь. Если отступ зависит от ширины экрана, то в %, если всегда (на каком-то промежутке) постоянный, например, для мобильных всегда по 15 точек, то в точках и ставьте, если он зависит от размера шрифта, то соответственно, в em.

но как быть с внутренними?

Обычно они перестраиваются по другому.
Откройте https://www.templatemonster.com/ и посмотрите несколько шаблонов как они себя ведут при изменении ширины экрана.
Без макета невозможно сказать как именно вам нужно поступить с внутренними блоками.

[Андрей Кузьмин]

Ankhena, Спасибо, буду практиковать флексы.

Без макета невозможно сказать как именно вам нужно поступить с внутренними блоками.

Я хотел услышать не к конкретному макету, а именно общий современный подход к верстке т.е раньше просто из psd переносили в html, использовали position absolute и прочее, а сейчас получается практически все заменил флексбоксы?

[Ankhena]

т.е раньше просто из psd переносили в html, использовали position absolute и прочее

Абсолюты никогда не считались хорошей практикой.

а сейчас получается практически все заменил флексбоксы?

Не все можно решить флексами.

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

Общий современный подход: со всех устройств, которыми пользуется целевая аудитория должна быть выполнима цель сайта (простите за тавтологию) и сайт на них должен хорошо выглядеть, не обязательно одинаково.

[MeylisDay]

Андрей Кузьмин,

Спасибо, буду практиковать флексы.

А еще лучше гриды :)

[Андрей Кузьмин]

MeylisDay,

А еще лучше гриды :)

Их уже используют?

[MeylisDay]

Андрей Кузьмин, давно и активно.

[Андрей Кузьмин]

MeylisDay, Будем осваивать)

Answer 1

[Stalker_RED]

Читайте про css сетку.
И да, придется пореже применять position: absolute (он вообще не особо часто необходим), и думать как задавать отступы.

Answer 2

[Максим Тимофеев]

Мои старые верстки напичканы position:absolute - чем их заменить?

А зачем их заменять? Заменять надо px на % и там где это невозможно - юзать медиа запросы.

Или использовать флекс?

тоже разумно.