Как подгонять макет под Pixel Perfect?

Question

[j n]

Столкнулся со следующей проблемой: ширина макета от дизайнера больше, чем ширина моего монитора. Как поступить в этой ситуации для подгонки вёрстки под Pixel Perfect? Использую расширение PerfectPixel для Chrome, пытался как-то подправить это масштабом, но ничего не вышло. Например, ширина моего экрана - 1366 пикселей, а ширина макета - 1600 пикселей. Как поступить?

Answer 1

[ned4ded]

Доброго дня!

У этого расширения есть поле "масштаб".



Вам нужен, судя по всему, масштаб = ~0,85.

В любом случае, если не получится уменьшить масштаб картинки, то можно уменьшить масштаб отображения окна браузера (ctrl+колесо).

Comments

[Леонид Зычков]

Спасибо за подсказку.
У меня была обратная проблема - при подложке картинки, она была меньше исходника. Оказывается масштаб был выставлен 0,9 вместо 1.

Answer 2

[Nikita Velko]

1. Включаешь devtools хрома.
2.
3.
4. Включаешь PerfectPixel и накладываешь макет.

Answer 3

[Fastmind]

Еще столкнулся с проблемой когда Pixel Perfect не совпадает с макетом. Например: у меня адаптив три размера 320 px, 768px и 1440px. На 320 px все совпадает, а на других значениях гуляет , (разрешение тут 768px, через DevTools)сверху макет, снизу мой сайт и он выглядует . На десктопе та же фигня макет не ложился на сайт хоть убей. Вообщем проблема решилась тем, что у меня не правильно был задан размер ширины.
media (min-width: @tablet-width) {
.container {
width: 768px;
padding: 0 30px;
}
}

media (min-width: @desktop-width) {
.container {
width: 1440px;
padding: 0 110px;
}
}
Исправил на:

media (min-width: @tablet-width) {
.container {
width: 708px;
padding: 0 30px;
}
}

media (min-width: @desktop-width) {
.container {
width: 1220px;
padding: 0 110px;
}
}
Все встало на свои места.
Я новичек, поэтому искал в интернете решение, думал проблема в приложении, ничего не нашел. Может кому-то поможет. P.S. Кстати на скриншоте используется Pix to pix мне больше понравился чем Pixel perfect.