@glebramanchuk

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

Добрый день!
Есть сайт - https://qlean.ru. Если открыть этот сайт на 13 дюймовом экране Macbook в Safari, то шапка сайта (большая картинка) заканчивается идеально по размеру экрана. При этом, если открыть этот же сайт на этом же экране в Chrome (у которого панель управления выше, чем у Safari на несколько десятков пикселей), то шапка тоже идеально заканчивается по экрану. Тоже самое касается и других больших диагоналей. Объясните, пожалуйста, это нужно нарисовать очень много макетов под разные диагонали, чтобы получить такой четкий адаптив или все проще? Как добиться такого же результата при разработке дизайна собственного сайта? Если это возможно, то объясните это, пожалуйста, как можно подробнее как для начинающего :)
Большое спасибо!
  • Вопрос задан
  • 447 просмотров
Пригласить эксперта
Ответы на вопрос 2
Wolfnsex
@Wolfnsex Куратор тега Веб-разработка
Если не хочешь быть первым - не вставай в очередь!
то шапка тоже идеально заканчивается по экрану
Какая шапка? "Первый экран" в смысле?
Это блок с высотой:
.screen1 {
    height: 100vh;
}


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

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

Войти через центр авторизации
Похожие вопросы