Как верстать руководствуясь одновременно «pixel perfect» и «mobile first» подходами?

Question

[Александр]

Собственно вопрос в заголовке. Первый раз взялся за "pixel perfect" вёрстку. Начал верстать на bootstrap, а после того как сделал на большом экране всё в идеале, настало время делать адаптивность и тут я заглох.
В итоге через кучу костылей всё сделал - но понимаю что сделал не правильно, и я бы такую работу у себя не принял бы.

Делал на sass. В итоге получил такую структуру sass:

_min-1200.scss
@media (min-width: 1200px) { основные стили }

_min-992.scss

@media (min-width: 992px) { копия всех стилей с мелкими изменениями }

_min-768.scss

@media (min-width: 768px) { копия всех стилей с мелкими изменениями }

_max-768.scss

@media (max-width: 768px) { копия всех стилей с мелкими изменениями }

Answer 1

[Александр Таратин]

Никак.
pixel perfect - миф.
Он не достижим в принципе, из-за особенностей рендера текста различными браузерами на разных осях.

Comments

[Serj-One]

Не согласен. Да, идентичное отображение на всех платформах невозможно, но это и не нужно, суть PP не в этом. Достаточно PP, например в Chrome, чтоб получить соответствие вёрстки дизайну, без учёта особенностей браузеров или платформ. Я работаю над довольно крупными проектами, где дизайнеры трудятся над макетами не один месяц, вылизывая всё до пикселя, и довольно глупо давать верстальщику возможность отступать от проработанных макетов. Требование точности в 1-3 пикселя для текста, и точного соответствия других элементов вполне оправдано.
К тому же, как человек, периодически выступающий в роли заказчика вёрстки, не могу не отметить. Без указания требования PP исполнители присылают лютый ад с огромным разбросом.

[zooks]

Serj-One: главное чтобы соблюдался ритм, а pixel-perfect в абсолютном понимании этого термина не нужен.

Answer 2

[zooks]

Начал верстать на bootstrap

Он нужен для макетирования, не для нормальной верстки.

Mobile First у вас в принципе нет. Почитайте про наследование в CSS.

Answer 3

[metaf]

Бывает сложно верстать mobile-first, потому что нету дизайна того самого mobile, или вообще не знаешь что нужно будет делать адаптив...
Я в таком случае уже в готовой десктопной верстке "чищу" все от разметки для десктопа, заворачиваю отступы и размеры где указаны в min-width: (~ширина макета) и начинаю размечать все для 0+, выставляя ширину в браузере 320. потом для ~ 600+ (больших телефонов и планшетов) - тут зачастую нужно совсем немного правок. И вообще не выношу никуда стили в отдельные файлы, все в одном классе, то есть

.my-class {
	color: red;
	@media (min-width: 600px) {
		color: green;
	}
	@media (min-width: 1200px) {
		color: black;
	}
}

Так вам дублировать не придется, все будет в одном месте, в коде будут видны стили для всех разрешений.

С pixel-perfect особо не увлекайтесь, многие дизайнеры отступы расставляют как попало. Просто проверяйте чтобы примерно совпало.

Comments

[Александр]

@многие дизайнеры отступы расставляют как попало@ - да, это был просто ад

Answer 4

[Алексей Николаев]

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

Делайте pixel perfect только для тех версий макета, что вам представлены. Если представлены макеты и для мобильной, и для полноэкранной версии, придется попотеть, а если нет, то и заморачиваться не следует.