Как можно уменьшать размер элементов пропорционально экрану?

Question

[Абра Кадабра]

Есть ли какой-то способ уменьшать элементы пропорционально размеру экранов? Дабы не писать медиа запросы под овер 9999(9) разных экранов мобильных и десктопов ? А так же, что бы сайт, сверстанный под 1920 можно было и на 5к открыть . Что поможет тексту и маленьким блокам попасть в большой экран?

Answer 1

[tennalian]

можно, но не везде caniuse.com/#feat=viewport-units
habrahabr.ru/post/126863

Answer 2

[Сергей Наломенко]

Можно использовать либо единицы измерения vw/vh (ширина и высота вьюпорта соответственно), либо полагаться на старые добрые проценты (%), что довольно примитивно и грубо, но более кросс-браузерно, и работает, если верстать под условно один тип устройств (например, только под компы, предположив, что в большинстве случаев мы имеем соотношение сторон вьюпорта 16:9).

Comments

[Вениамин Лыткин]

У меня 1920x1080 экран, но часто открываю страницы толькл на половину экрана, по-этому привязка должна идти не к соотношению сторон экрана, а к макету страницы

[Сергей Наломенко]

Epsil0neR: Полностью согласен. Именно поэтому слова «примитивно и грубо» использованы в моём ответе не случайно :-)

Answer 3

[asd111]

vw,vh,vm - вместо px или %, но это не всегда применимый вариант, например если захочется увеличить масштаб страницы по ctrl + mousewheel то страница не изменит масштаб а все элементы указанные в vw, vh, vm просто смасштабируются.
css-tricks.com/viewport-sized-typography
Как правило на больших экранах принято добавлять элементы. Как например на тостере.