Задать вопрос
@Dmitry2590

Как сделать отступы и другие элементы в соответствии с макетом Perfect Pixel?

Добрый день! Начал изучать верстку, делаю первые проекты для портфолио, никак не получается разобраться с версткой Perfect Pixel, подскажите насколько актуальна сейчас в 2020 и в 2021 году верстка Perfect Pixel в реальной работе, насколько часто она требуется в вакансиях верстальщик, frontendera?
Использую плагин Perfect Pixel для Google Chrome, размеры задаю в соответствии с макетом сайта, размеры беру из Avocode, Photoshop, Figma, но все равно отступы margin, padding отличаются от макета при просмотре в плагине Perfect Pixel при наложении макета.
Если все выверять и выравнивать вручную это просто жесть. Пробовал разный масштаб и для разных экранов проверял результат один и тот же. Как сделать чтобы отступы были как в макете в соответствии с Perfect Pixel? Может есть какие-то видеоуроки или кто-то может подсказать по своему опыту?
  • Вопрос задан
  • 287 просмотров
Подписаться 3 Простой 1 комментарий
Пригласить эксперта
Ответы на вопрос 2
bootd
@bootd Куратор тега CSS
Гугли и ты откроешь врата знаний!
Нету никаких уроков, нужно просто выставлять отступы так, что бы получилось как в макете. Браузер по своему рендерит макеты и просто брать значения из фигмы и вставлять не достаточно.

подскажите насколько актуальна сейчас в 2020 и в 2021

Это всегда актульно, НО!!! Без фанатизма. Нужно максимально стараться привести верстку к макету. Нет нужны и смысла мучить себя 1-2 пикселями. А так же, не забываем про особенности браузеров в отображении тех или иных стандартных тегов. select, button, input и т.п. Поэтому сначала нужно взять либо какой-то reset или normalize.css

В первую очередь всё зависит от дизайнера. На сколько он любит свою работу и на сколько он профессионален. Мне не попался ещё дизайнер, который нарисует всё на столько ровно и одинаково.
Чаще всего, дизайнер, рисуя кнопку, не понимает, что это за элемент и какие есть правила его применения в отрасли. На одной странице кнопка выглядит так, на другой так, на 3й так, и т.д. И так со многими повторяющимися элементами.

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

Следствие чего, не имеет смысла для каждой страницы делать кнопку разной. Достаточно просто привести её к средним значениям.
Точно так же бывает с сетками. Либо её вообще нет, либо имитация.

P.S. Это не прописная истина, это мой подход в работе, который выработался за мою долгую практику. Я тоже пытался делать попиксельно, но это лишняя трата времени и своих сил.
Ответ написан
Комментировать
@egovar
Frontend-developer
Проверь, для начала, правильно ли задаётся размер элементов за счет свойства box-sizing. Возможно, несостыковки происходят именно из-за того, что где-то padding и border не включается в размер или наоборот.
Ответ написан
Комментировать
Ваш ответ на вопрос

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

Похожие вопросы