Как верстать адаптивно с помощью vmax, vh, vw и тд?

Question

[mardari98]

Видел на Youtube виде, где человек верстал адаптивно с помощью vmax, vh и vw, но так и не объяснил, где и что нужно использовать. Так где же и что нужно использовать?

Comments

[Алексей Ярков]

Почитать

[mardari98]

Алексей Ярков, Я читал, я знаю как они работают, но в голове не укладывается, как верстать используя только это. Он говорил вроде, что всё, что относится к высоте должно быть vmax, а к ширине - vw. Но в этом нет смысла, или есть.. По этому и хочу узнать мнение людей, которые разбираются в вопросе.

[Ankhena]

mardari98,

меня есть PSD шаблон, шириной 1920 пикселей

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

Если вы просто будете задавать все размеры в vw, то на мобилках получите микроскопический нечитабельный текст.

Так не делают.

Почитайте про @media

[Сергей delphinpro]

mardari98,

как верстать используя только это.

Верстать используя только [напишите сюда любую хрень] — это убожество.
Если было бы достаточно только [любая хрень], то не было бы нужды во всем остальном.

[mardari98]

Сергей delphinpro, ахах, понял)

[mardari98]

Ankhena, ну вот тут, например, контент основной во всю ширину в 1920 пикселей.

[Ankhena]

mardari98, ок
3 столбца по 30-33% (можете процентами, можете vw)
сжимаете окно и смотрите в какой момент этих 30-ти процентов будет недостаточно и перестраиваете на 2 столбца, потом на 1.

Предположим, вы сделаете их по 33vw и на этом остановитесь. На мобильнике с шириной 320px получите столбцы шириной по ~100px, а размер шрифта в районе 1px. Еще некоторые браузеры не делают шрифт меньше 8px, чтобы вы им не писали. Представили как это будет выглядеть?

[mardari98]

Ankhena, Понял. Спасибо.

Answer 1

[Георгий Котов]

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

Comments

[mardari98]

Спасибо, почитаю.
Тот человек верстал всё такими единицами измерения, вообще не использовал пиксели.

[Andrew]

mardari98, наркоман, наверное

[mardari98]

Andrew, Да вроде норм выходит)

Answer 2

[mardari98]

https://jsfiddle.net/9y8Lgd32/9/
Примерно такое

Answer 3

[profesor08]

Никак. Используй другие способы растягивать что-то в ширину экрана или по высоте. Эти единицы хорошо работают в идеальных условиях, но как только начинают появляться всякие браузерные оверлеи (привет 99% мобильных браузеров), использование подобных единиц измерения приведет к неожиданному поведению страницы.