Как верстать макет?

Question

[Pavel_20]

Имеется такой макет (тестовое задание):
Задача стоит сверстать его под разрешение 1920*1080.
Как в таком случае поступать, если верстаю с ноута? В %-тах через пропорцию высчитывать размер блоков (исходя из моего монитора). Как правильно?

Comments

[Сергей delphinpro]

Как верстать на ноутбуке с маленьким разрешением?

Там еще в моем комменте есть ссылки

[Владимир Юрченков]

Не забывайте ограничивать проценты, особенно для высоких разрешений.

[Антон Литвиненко]

Монитор у верстальщика главный инструмент.
По хорошему желательно иметь два. или хотя бы монитор подключенный к ноуту. не меньше fullhd

[Pavel_20]

Антон Литвиненко, согласен с Вами. А я тот необычный чел, который верстает с двух ноутов (на одном разрешение чуть больше чем на другом). Самое интересное стоит дома пылиться еще большой самсунговский моник (все никак провод не заменю). Просто в подавляющем большинстве случаев верстал макеты с контейнероми и проблем никаких не было... И все же надо заняться этим вопросом с монитором)

[Владимир Проскурин]

проблем никаких не было...

Просто вы и заказчик смотрели с ноутбука :)

Если серьезно, качественно верстать без большого монитора сложно, т.к. вы не будете видеть косяки верстки - неправильные отступы, косяки рендера текста (например при scale), да и просто неудобно сразу держать открытыми девтулзы браузера, само окно браузера и еще редактор впридачу.

Answer 1

[Антон]

Как в таком случае поступать, если верстаю с ноута? В %-тах через пропорцию высчитывать размер блоков (исходя из моего монитора). Как правильно?

Правильно верстать как обычно, на время верстки задав телу фиксразмер мин 1920px (чтобы полоса прокрутки была).
По идее нужно верстать адаптивно, допустим взяв за основу ваше разрешение 1366, и когда вы откроете ваш проект на мониторе с разрешением больше, чем ваш - все будет нормально, если вы поставите ограничение на проценты и не будете задавать жесткие width, т.е. пользуйтесь min и max.
Поскольку сейчас уже чуть ли не телевизорами пользуются 4K, то пользуйтесь этим сервисом: https://screenfly.org/
Или купи БУ монитор за 2500 рублей и продай потом обратно)

Comments

[Pavel_20]

Или купи БУ монитор за 2500 рублей и продай потом обратно)

приз за оригинальность ваш!)

Answer 2

[Maria N]

В хроме есть возможность эмуляции устройства. ChromeDevTools https://developers.google.com/web/tools/chrome-dev... можно эмулировать и устройства с большим разрешением.