Резиновая верстка как сделать?

Question

[semenvachekin]

Как сделать резиновую верстку И как высчитывать все все в vh vw, отступы, размер шрифта, высоту блока и прочее, подскажите пожалуйста!

Answer 1

[Dima Polos]

Этому учится надо, так в двух словах не ответить. Не везде надо писать все в vw, vh, а даже в таком подходе много где надо писать пиксели. Если хотите разобраться могу помочь, но в одном ответе не описать.

Comments

[semenvachekin]

Хочу разобраться, ну и для примера вот весь сайт сделан на одном vh vw
Everest.agency

[Dima Polos]

semenvachekin, можете написать в личку. Можно конечно и все на vw/vh, но это делать не обязательно, и местами это вредно.

[devstudent]

semenvachekin,

весь сайт сделан на одном vh vw

это если разработчик волен сам решать какой размер шрифта/блока подойдет , а если к прмеру есть дизайны и требование четко соблюдать размеры элементов и шрифтов (пиксельперфект да )то этот вариант не подойдет, нужны абсолютные единицы измерения

[semenvachekin]

Dima Polos, написал в телеграм

[Lord_Dantes]

devstudent, использовать везде и постоянно vw and vh опасно, плохая практика. Даже если у вас есть свобода слова в одном проекте, и вы хотите норм работать в дальнейшем то дальше вам такого никто не даст.
Не видел еще верстальщиков которые получают штуки баксов верстая vw, vh))

[semenvachekin]

devstudent, согласен, но я хочу попробовать сделать весь сайт на этих единицах

[devstudent]

slave bb, я вообще никогда не использую vw, vh слишком непредсказуемое поведение

[devstudent]

semenvachekin, попробуйте, конечно, это полезно, сами поймете что и как

[semenvachekin]

devstudent, только мы возвращаемся к самому начальному вопросу как

[Lord_Dantes]

devstudent, ну да в моей практике мало когда я тоже юзал это. Типо разве что для первых баннеров где они нужны были. Типо сейчас я либо делаю фик высоту или макс высоту или если нужен цельный блок то 100вх.

[devstudent]

semenvachekin, что значит как? )) смотрите на сайтe-пример который вы давали, читайте спецификации

[devstudent]

slave bb, в первый день мною была усвоено одно правило: 100 раз подумай прежде чем сделать фикс высоту если внутри другие элементы. хотя иногда без нее никак

[Lord_Dantes]

devstudent, да, но если это баннер и у него стоит flex; align-items + justify-content = center, и там 1 строчка текста то тут как-то норм))

[devstudent]

slave bb, а зачем вообще в данном случае выставлять высоту?

[Lord_Dantes]

devstudent, ну чтобы баннер был баннером, не задавать же ему padding: 600px XD

[devstudent]

slave bb, ну если внутри нет картинки как элемент или текста, то тогда кажись без разницы или высота или паддинг

[Lord_Dantes]

devstudent, картинка есть она фоном.

Answer 2

[ArutaGerman]

Хороший макет psd, figma и т.д. включает в себя нужные разрешения дисплея и нужно только выставить согласно макета размеры.
Но бывает что в хроме отображается как надо - во всю ширину, но в firefox это 3 строки и всё. Вот тут уже выбрать надо самому что испоьзовать и какой размер задать - зависит от задачи уже.

Например: верстается страница для печати, заполняющаяся динамически (1-17 строк может быть, не считая хедер и футер).

Проценты тут не помогут, как и пиксели.
Но имеет смысл задать justify-content: space-between; min-width: 100vh чтобы футер и хедер вдруг не оказались посреди страницы. .