Как изменять пропорции элементов на разных разрешениях экрана?

Question

[Евгений Иванов]

Стремлюсь к тому, чтобы сайт выглядел хорошо на разных разрешениях экрана. Про устройства пока не говорим.
Адаптивная верстка конечно хорошо, но возникает ещё одна "проблема".

На примере текста.
Задав все свойства текста в css (тип шрифта, размер и т.д.) смотрю как выглядит надпись в браузере, на небольшом мониторе. Все выглядит хорошо.
Прихожу домой - смотрю этот же текст на большом мониторе - мелко. Что и так было ясно.
Увеличиваю шрифт в css - теперь выглядит хорошо.

И это пол беды. Есть и другие элементы. Все кастомизировано на css - все подогнано по размерам.
Если я изменил размер надписи, то размер чекбокса, рядом с которым была надпись надо тоже увеличить.
Иначе плохо выглядит. То есть надо как то это всё масштабировать.

Как делал раньше - просто забивал на это. Делал сайт который наиболее хорошо выглядит на наиболее популярном разрешении и смотрел чтобы приемлемо выглядел на более высоких и низких разрешениях.

Ну и собственно главный вопрос
Как изменять пропорции элементов на разных разрешениях экрана?
Я могу это делать через css? Без определения разрешения js? Ну прописать в css что если ширина экрана 1024 то вот этот стиль, иначе этот.
Как вы решаете такие задачи?

Answer 1

[Ivan Bogachev]

То есть надо как то это всё масштабировать... Как вы решаете такие задачи?

Можно все размеры задавать в rem/em, тогда при изменении размера шрифта для html все будет подстраиваться (вообще rem - это очень удобная штука, особенно когда все размеры выражаются красивыми числами - .5, .75, 1, 1.5, 2, 3, 4..., а не количеством пикселей). При этом можно по-умному привязать font-size для html к единицам vw и результат будет очень приятным.

Comments

[Евгений Иванов]

А что так можно было? (с) Почитаем, спасибо.

Answer 2

[Сергей Герасимов]

Попробуйте использовать размеры относительно ширины экрана:

html {
    font-size: 3vw;
}

Соответственно размер элементов можно либо также в vw, либо относительно размера шрифта в em

Comments

[Иван]

vw - это не высота а ширина экрана. vh - это высота.