Проблема такая, дизайнер прислал макет, ширина у него 1920, и на моем ноутбуке fullhd монитор, но изза масштабируемости винды когда я делаю width 1920 то образуется горизонтальная полоса. Я поискал и понял что нужно делать все через адаптив, чтобы смотрелось нормально на разных мониторах. НО как тогда определить точные размеры шрифта и блоков, чтобы сверстанный сайт был точно такой же как и на макете? Нужно все высчитывать на калькуляторе?(брать размеры в пикселях из макета и переводить их в адаптивные и пропорциональные размеры или как?
Для типографики можете использовать em и rem, вместо px.
Если вы хотите чтобы сайт смотрелся абсолютно одинаково на всех десктоп-устройствах, тогда используйте сетку при вёрстке. Самая популярная, простая и удобная у Bootstrap.
Имхо, сетка - устаревший способ верстки.
n1ksON,
вот header который мне прислас дизайнер, в фигме его высота 104 пикселя. Но как мне его сделать таким же на моем мониторе ведь изза масштабирования у меня эти 104 пикселя чуть ли не четверть экрана перекрывают. Поэтому я не совсем понимаю как мне расчитать точные размеры так чтобы а моем устройстве да и на всех, этот header смотрелся также как и на макете
46kvolamak, высоту в верстке вообще стараются не задавать. Она определяется размером шрифта, line-height и отступами. Так, чтобы в результате получилась высота как в макете дизайнера.
изза масштабирования у меня эти 104 пикселя чуть ли не четверть экрана перекрывают.
Смотрите на макет и определяете размеры всегда (в заданном интервале брейкпоинтов) одинаковые в px или зависят от размера экрана или родителя.
Если какой-то блок в макете имеет ширину 200px. То нужно понять это всегда 200px или это половина родительского блока и тогда задавать 50%? Или вообще зависит от ширины вьюпорта и надо писать 25vw?
Цифры от балды.
1920 это не ширина макета. Есть фиксированная (или ограниченная) ширина контентного поля. На вашем макете видно от логотипа до кнопки.
На всем остальном пространстве дизайнер показывает как сайт должен выглядеть при большей ширине окна.
Суть примерно такая
Пример утрированный и ограничение по ширине стоит 500. И нет media условий для перестроений для других вьюпортов, но суть отражает.
