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