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

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

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

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

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

Ну и собственно главный вопрос
Как изменять пропорции элементов на разных разрешениях экрана?
Я могу это делать через css? Без определения разрешения js? Ну прописать в css что если ширина экрана 1024 то вот этот стиль, иначе этот.
Как вы решаете такие задачи?
  • Вопрос задан
  • 198 просмотров
Решения вопроса 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
Похожие вопросы
Appbooster Самара
от 60 000 до 150 000 руб.
от 60 000 до 90 000 руб.
Литиум лаб Москва
от 80 000 до 150 000 руб.
21 сент. 2018, в 18:08
200 руб./за проект
21 сент. 2018, в 17:53
25000 руб./в месяц
21 сент. 2018, в 17:41
1000 руб./за проект