iAnDReWw
@iAnDReWw
Developer

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

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

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

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

Ну-ну. Так вы уже определитесь, что вам нужно, "ленивый" - сиюминутный результат или всё же "подкачать" вёрстку.
Много нюансов при задании отступов и размеров относительными единицами. Если заказчика устроит ваш адаптив, то пишите как угодно, но нам дизайнеры либо делают макеты под несколько поинтов, либо обговаривает как и куда оно будет расширяться/сдвигаться
Пишите медиа-запросы под несколько брейк-поинтов и будет вам счастье(Ширина экрана: 376,768,1024,1378+).
em,rem - относительно шрифта родительского блока/бади
x% - относительно высоты/ширины родителя
vh,vw - относительно высоты/ширины экрана устройства.
Ответ написан
Комментировать
lukoie
@lukoie
дежавю
только ж недавно обсуждали этот же вопрос
погуглите "rem vs em"
верстайте в пикселях пока и в процентах, и время от времени начинайте внедрять рэмы и эмы, потом само придет.
Ответ написан
virtual_hack2root
@virtual_hack2root
.NET Core, JS, DevOps
Вам нужно макет первести в em, если он еще не в нем, см Habr
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы