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

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

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

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

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

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