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

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

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

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

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

Ну и собственно главный вопрос
Как изменять пропорции элементов на разных разрешениях экрана?
Я могу это делать через css? Без определения разрешения js? Ну прописать в css что если ширина экрана 1024 то вот этот стиль, иначе этот.
Как вы решаете такие задачи?
  • Вопрос задан
  • 215 просмотров
Решения вопроса 1
sfi0zy
@sfi0zy
UI developer. Верстаю неверстаемое.
То есть надо как то это всё масштабировать... Как вы решаете такие задачи?

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

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

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

Войти через TM ID
Похожие вопросы
Krome Photos Челябинск
от 80 000 руб.
Ultimate Guitar Санкт-Петербург
от 1 000 до 5 000 usd.
TechOps Москва
от 3 500 usd.