Как правильно разрабатывать адаптивный дизайн?

Question

[glebramanchuk]

Добрый день!
Есть сайт - https://qlean.ru. Если открыть этот сайт на 13 дюймовом экране Macbook в Safari, то шапка сайта (большая картинка) заканчивается идеально по размеру экрана. При этом, если открыть этот же сайт на этом же экране в Chrome (у которого панель управления выше, чем у Safari на несколько десятков пикселей), то шапка тоже идеально заканчивается по экрану. Тоже самое касается и других больших диагоналей. Объясните, пожалуйста, это нужно нарисовать очень много макетов под разные диагонали, чтобы получить такой четкий адаптив или все проще? Как добиться такого же результата при разработке дизайна собственного сайта? Если это возможно, то объясните это, пожалуйста, как можно подробнее как для начинающего :)
Большое спасибо!

Answer 1

[Евгений Вольф]

то шапка тоже идеально заканчивается по экрану

Какая шапка? "Первый экран" в смысле?
Это блок с высотой:

.screen1 {
    height: 100vh;
}

С фоновой картинкой.

Comments

[Сергей]

+ min-height: 600px; на вский случай )

[Евгений Вольф]

Сергей: можно и так, но это уже "издержки/особенности производства" :))

[glebramanchuk]

Спасибо за ответ. Но меня интересует не то, как это прописывается в коде, а как делается на этапе прототипирования. Под сколько диагоналей нужно рисовать шаблон? Как проверять корректность отображения дизайна сайта в браузере на момент рисования шаблона?

[Евгений Вольф]

glebramanchuk:

Как проверять корректность отображения дизайна сайта в браузере на момент рисования шаблона?

Скорее всего никак, т.к. шаблоны обычно рисуются в формате PSD, а браузеры его обычно не понимают. Только на этапе вёрстки можно будет понять. Тут скорее важно логическое понимание дизайнером принципов работы браузера, что бы он знал, как браузер будет себя вести и мог прикинуть, как "это" будет примерно там работать.

Но меня интересует не то, как это прописывается в коде, а как делается на этапе прототипирования. Под сколько диагоналей нужно рисовать шаблон?

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

Касательно конкретно прототипов, обычно берутся 3-5 основных вариантов устройств:
1. Мобильные мелкие (аки 320 по ширине)
2. Мобильные покрупнее (480-800 и выше)
3. Планшеты
4. "Нормального" размера мониторы ПК
5. Большие мониторы (аля 4-8К и т.д.)

Измерение в большинстве случаев идёт по ширине устройства, высота играет косвенную роль.

Answer 2

[Сергей Тилион]

Если автор вопроса - дизайнер, то надо знать основы css, чтобы понять в фотошопе как и откуда должна будет масштабироваться картинка для адекватного отображения на разных экранах. Ну и порисовать разные варианты с ней: делаете картинку смарт-объектом, рисуете несколько шапок разных размеров и смотрите как она себя ведёт. Но это если вы умница и молодец, обычно все забивают. И это плохо если хочешь работать на более высоком уровне чем "все" и зарабатывать больше них.