Верстка с мокапа, чтобы хорошо смотрелось на всех разрешениях, нужно ли переводить пиксели в vh, vw, % и как правильно высчитать относит. ед.?

Question

[X J]

Всем привет! Мне очень редко приходилось заниматься версткой и конкретно CSS, но возникла необходимость сверстать несколько мокапов да и для себя уже хотелось бы наконец-то начать становиться более уверенным верстальщиком, тк занимаюсь веб-разработкой, но верстка пока мое слабое место. Значит, вопрос в следующем: нужно сверстать несколько страниц и размеры отступов и шрифтов нужно брать с мокапа, но нужно, чтобы хорошо выглядело на разных разрешениях. В связи с этим возникает вопрос, как обычно поступают в таком случае? Переводят пиксели в относительные единицы vh, vw, % ? или есть какие-то другие способы.Знаю, что есть медиа квери, но для этого нужно писать дополнительный код и это увеличивает время разработки - такой вариант на данный момент не подходит. Может кто-нибудь из опытных верстальщиков или фронтенд девелоперов может пояснить, как здесь лучше поступить и как обычно делают? Если верстать в относительных единицах, то я читал, что размеры будут считаться относительно родительского блока, только не смог нагуглить относительно чего конкретно, относительно высоты родительского блока или ширины. Заранее всем спасибо за комментарии. Всем добра :)

Comments

[Rustam Bainazarov]

Читать ваши предположения касательно vh, доп. кода при использовании media-запросов — можно сказать, было больно.

Никаких vh, изучайте media-запросы; vh, vw тоже нужны, но для другого.

Откройте в инспекторе любой адаптивный сайт (тот же toster.ru) и посмотрите на использованные там единицы измерений для шрифтов и габаритов.

Answer 1

[Andrew]

уже хотелось бы наконец-то начать становиться более уверенным верстальщиком

нужно, чтобы хорошо выглядело на разных разрешениях.

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

Ну-ну. Так вы уже определитесь, что вам нужно, "ленивый" - сиюминутный результат или всё же "подкачать" вёрстку.
Много нюансов при задании отступов и размеров относительными единицами. Если заказчика устроит ваш адаптив, то пишите как угодно, но нам дизайнеры либо делают макеты под несколько поинтов, либо обговаривает как и куда оно будет расширяться/сдвигаться
Пишите медиа-запросы под несколько брейк-поинтов и будет вам счастье(Ширина экрана: 376,768,1024,1378+).
em,rem - относительно шрифта родительского блока/бади
x% - относительно высоты/ширины родителя
vh,vw - относительно высоты/ширины экрана устройства.

Answer 2

[lukoie]

дежавю
только ж недавно обсуждали этот же вопрос
погуглите "rem vs em"
верстайте в пикселях пока и в процентах, и время от времени начинайте внедрять рэмы и эмы, потом само придет.

Comments

[Артур Мустафин]

Вот статья аж 2008 года Habr, что тут не понятного, люди видимо родились позже и не в курсе что есть и такое

Answer 3

[Артур Мустафин]

Вам нужно макет первести в em, если он еще не в нем, см Habr