Задать вопрос
@Treniki
html

Пропорционируются ли элементы из PSD-макета относительно реального сайта, созданного по этому макету?

Доброго времен суток. Предположим, есть PSD-макет сайта шириной 1280px. Соответственно, элементы (лого, текст, изображения и т.д.) имеют размеры, отступы относительно этой ширины. Допустим, у меня разрешение монитора - 1920x1080. Ширина PSD-макета 1280px. Есть шапка, размером 1280x300px, в нем лого с боковыми отступами от всех границ 10px. Само лого, скажем, 50x50px. Все эти размеры: высота шапки (300px), боковые отступы лого (10px), лого (50x50px) сделаны относительно ширины 1280px. Что делать со значениями этих элементов, если сайт должен быть на всю ширину экрана (width: 100%), responsive, а у меня изначальная ширина экрана - 1920px, а не 1280px? Высчитывать соотношения и потом приводить к моему разрешению?

UPD: Сложно описал, поэтому покажу более наглядно.
Есть такой макет, найденный на просторах интернета. Размер макета 1280px. Хочу сделать его responsive на всю ширину экрана (width: 100%).
84002714cf31463f9e6e99d071e1968a.jpg

Разрешение моего экрана: 1920x1080. Элементы в этом макете подстроены под ширину 1280px. Соответственно, если я хочу сделать его responsive, то и отступы, и размеры элементов должны будут изменяться, но ведь в макете они имеют фиксированные значения.
fae5b10166d048e19a3246231f780966.jpg

Соответственно, верстая данный макет, я отталкиваюсь от разрешения своего экрана в меньшую сторону, а т.к. разрешение моего экрана больше макета, то и значения элементов и отступов будут больше, чем в макете. Вот меня и мучает вопрос. Если для экрана шириной 1280px background 1 картинки был бы высотой 800px, то для моего разрешения 1920px - будет уже другой размер. Вот только где этот размер взять, чтобы все выглядело пропорционально при большем разрешении или меньшем, как на макете, как для background, так и для элементов и их отступов, и размеров? Даже - нет, не так. Как, при верстке, высчитывает\переводить эти px в em\rem\%, чтобы все выглядело, как на макете? Как вычислять пропорции и соотношения типа 14px = 1em?
73e84460aad4473e9f7e02b9d9a50186.jpg
  • Вопрос задан
  • 758 просмотров
3 комментария
Подписаться 2 Оценить 3 комментария
Решения вопроса 3
@xxvxx
.... 
<html>
<head>
 <style>
   @media (min-width: 768px) and (max-width: 3992px) {
     
  .test{
    width: 100%;
    background-image: url(http://hdlatestwallpapers.com/wp-content/uploads/2016/10/Colored-Smoke-Backgrounds.jpg);
    height: 600px;
    background-position: 50%;
    background-size: cover;
    background-repeat: no-repeat;
  }
   .test1{
    width: 300px;
    height: 300px;
    background-color: #ff0000;
    margin: 0 auto;
    position: relative;
    top: 150px;
   }

   }
</style>
 

</head>
  <body>
   <div class="test">
    <div class="test1">
    </div>
  </div>

  </body>
</html>
Ответ написан
1 комментарий
1 комментарий
delphinpro
@delphinpro Куратор тега CSS
frontend developer
Вообще сайты по разному могут адаптироваться к размеру экрана. По-хорошему,об этом должен подумать дизайнер и набросать несколько макетов, чтобы можно было проследить за его мыслью. В особо сложных случаях он же составляет сопроводительное описание макета с объяснениями поведения дизайна, либо прикладывает анимации/видео.

Но допустим, что задача у вас стоит именно так как вы обозначили - сайт всегда масштабируется к размеру экрана (пусть к ширине, это чаще бывает). Тогда вам следует все величины, задающие расположение и размеры блоков на странице, рассчитывать и указывать в процентах (%), либо вьюпортах (vw). Отдельно нужно будет проработать типографику. Здесь тоже только ремы (rem) и емы (em). Так будет проще сделать несколько контрольных точек для изменения шрифтов. Также можно обратить внимание на метод отзывчивого размера шрифта с использованием calc и rem.

Еще один обязательный пункт - максимальное использование векторных изображений, логотип и иконки, как минимум (хотя этот пункт для любой верстки уместен).
Ответ написан
1 комментарий
1 комментарий
AlexeyGfi
@AlexeyGfi
YouTube >>> Битриксоид из Колхоза
Я так верстаю. Всё в процентах, от шрифта до отступов.
По поводу высоты: как правило такой момент только с картинками, ими и балансирую, иногда вплоть до того, что готовлю пропорциональную прозрачную болванку, которая «держит» мне блок.
Первый сайт был так сверстан лет 5 назад. Пример: www.dovidka.org Это один из моих личных сайтов, на нём и отрывался, когда пришла идея так сверстать.

Потом практика показала, что такая заморочка отлично прокачивает терпение (нужно же замерять и переводить в проценты каждый параметр), но не всегда оправдана.
Иногда лучше (именно лучше, а не проще) задать фикс (или ступеньку фиксов через media-query), который отлично смотрится и на большом экране и на мобильном.

В общем, нужно перед вёрсткой за-Дзениться в макет, определить всё, что не потребует резины и тогда уже анализировать остальное. То есть во главе to-do разработка каркаса, но это как нулевой пункт списка, чтобы сэкономить усилия. Редко когда сайт как сделали так он года в таком виде и живёт. Если он (спасибо, что...) живой, на нём постоянно что-то пилится и нужно заранее подумать о том, как это всё поддерживать: первый макет (в виде чистого PSD) как-правило тает в летах, дизайн-доработки — это скриншоты, в которых перерисована только какая-то область и через год никто уже и не вспомнит, а какая была исходная ширина и относительно чего считать проценты?
Ответ написан
2 комментария
2 комментария
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Frontend-разработчик (React)
ДАЛЕЕ
от 130 000 ₽
Тестировщик-стажёр
ITooLabs • Тула
от 35 000 до 40 000 ₽
Fullstack PHP Developer
Smapse Education
от 40 000 до 65 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Взлом автомобильной программы
19 апр. 2024, в 05:01
999999 руб./за проект
Доработать телеграм бота
19 апр. 2024, в 03:52
1000 руб./за проект
Написать код на python
19 апр. 2024, в 03:01
1000 руб./за проект
Ещё заказы