Работа с приложение "Pixel Perfect"

[Super_Saimon]

Добрый день! Помогите теорией. Немного запутался в процессе сравнения макета и готовой страницы: если макет у меня в ширину 1200px, а в высоту, к примеру, 2000, то, опять же, если  у меня разрешение 1920х1080, то мне и мою страницу для сравнения нужно загнать в такие габариты, как на макете? Просто, вроде, все размеры строго "по ГоСТу", с макета, а не совпадает...

[klierik]

Вообще бывает по-разному, но подгонка 1:1, все же, должна присутствовать в таких размерах как представлено.
То есть тебе надо уменьшить ширину окна браузера что бы она совпадала с шириной макета

[Super_Saimon]

29 минут назад, klierik сказал:

Вообще бывает по-разному, но подгонка 1:1, все же, должна присутствовать в таких размерах как представлено.
То есть тебе надо уменьшить ширину окна браузера что бы она совпадала с шириной макета

А по высоте? Это, пожалуй, больше всего у меня вызвало непонимание. Если ширину я просто в body загнал как в макете, то с высотой не пойму. Да еще и смущает что есть несовпадение по высоте некоторых элементов, хотя все размеры пытаюсь с макета не на глаз брать. Это уже мой косяк в верстке, а не разница между страницей в браузере и макетом?

[klierik]

Я не понимаю негодований про высоту. там контент — займет столько места сколько ему надо.

[AlexZaw]

Проверяйте интрелиньяж, размеры блоков, возможно где то нужно поставить box-sizing:border-box;

 

Edited December 1, 2017 by AlexZaw

[klierik]

43 минуты назад, Super_Saimon сказал:

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

Сложно сказать так как не известно откуда и какие ты берешь значения. Фотошоп != браузер, и рендеринг в каждом браузере свой

[Super_Saimon]

4 минуты назад, klierik сказал:

Сложно сказать так как не известно откуда и какие ты берешь значения. Фотошоп != браузер, и рендеринг в каждом браузере свой

Все размеры я беру с макета, если вы об этом. Но я так понял, что это скорее мой косяк с выстраиванием по вертикали. 

7 минут назад, klierik сказал:

Я не понимаю негодований про высоту. там контент — займет столько места сколько ему надо.

Так я думал, что совпасть должно, как говориться, удар в удар. И по вертикали, и по горизонтали. То есть, при наложении страницы на макет должно совпасть на все 100%, без малейших искажений. 

8 минут назад, AlexZaw сказал:

Проверяйте интрелиньяж, размеры блоков, возможно где то нужно поставить box-sizing:border-box;

 

Спасибо за подсказку! 

[klierik]

1 минуту назад, Super_Saimon сказал:

Все размеры я беру с макета, если вы об этом. Но я так понял, что это скорее мой косяк с выстраиванием по вертикали. 

Понятно что с макета, только макет != браузер, и я уверен что берутся не верные значения.

1 минуту назад, Super_Saimon сказал:

Так я думал, что совпасть должно, как говориться, удар в удар. И по вертикали, и по горизонтали. То есть, при наложении страницы на макет должно совпасть на все 100%, без малейших искажений. 

При равном контенте должно совпадать по вертикали и горизонтали, но не на 100%, так как, как минимум ширина блока, занимаемая текстом, с бОльшей вероятностью не будет совпадать.

При всем оптимистическом прогнозе если ты потратишь очень много времени для достижения реального 1:1, на пример, в Chrome, остальные браузеры тебя за это "накажут". Фанатизм не обязателен, ибо слишком дорого выйдет

[Super_Saimon]

1 минуту назад, klierik сказал:

При равном контенте должно совпадать по вертикали и горизонтали, но не на 100%, так как, как минимум ширина блока, занимаемая текстом, с бОльшей вероятностью не будет совпадать.

При всем оптимистическом прогнозе если ты потратишь очень много времени для достижения реального 1:1, на пример, в Chrome, остальные браузеры тебя за это "накажут". Фанатизм не обязателен, ибо слишком дорого выйдет

Спасибо за разъяснения и потраченное время! Очень помогли устранить пробелы, которые мешали "жить спокойно"!)))  А еще такой вопрос... извиняюсь за наглость,конечно. А есть ли разница в сравнении между жестко заданными величинами страницы и адаптивной страницы? Просто мне попадало на глаза статья где описано, что при адаптивном, как минимум, по  ширине  сравнение уже не имеет значения. 

[klierik]

Сложно ответить универсально. По идее тебе должны предоставить макеты для каждой ширины: <768\>=768\>=992\>=1200px в которых и будет показано как должен вести себя контент.

А начинать тебе следует с 0, как раз, а не с 1200, ибо "mobile first". И потом же — в таком случае ты первым верстаешь под мобайл, но у тебя не будет 100% все равно (добиваться этого не ризонно). НО, важно сделать как можно ближе к дизайну все, что не является непосредственно наполнением — контентом. Поля\отступы, конечно же, должны быть идеальными.

Если макет построен грамотно (и верстка написана грамотно), то при росте ширины экрана, когда за дело берется респонсив, тебе предстоит вносить лишь изменения в SCSS/LESS  переменные, для изменения тех или иных значений отвечающих за параметры которые подтверждены изменениям.

Так же, если исполнитель знает что он делает, то, при договоренности, он упрощает все изменения в респонсиве ради ускорения и упрощения создания разметки. Но, надо очень хорошо чувствовать отзывчивость интерфейса, что  бы при достижении упрощения отходить от дизайна совсем не много, ровно на столько что бы никаких существенных визуальных отличий с дизайном в итоге не было. В таком случае код на выходе будет проще и гибче, его легче поддерживать и разрабатывать новый функционал на базе старого.

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

[Super_Saimon]

Теперь все стало в разы яснее! Еще раз спасибо, что потратили время и помогли избавиться от "белых пятен"  в этом аспекте!