Как изменять размер шрифта в зависимости от размера экрана?

Всем здравствуйте!
Подскажите пожалуйста, как изящно сделать изменение шрифта для различного размера экрана?
Например:
Есть заголовок <h2>Blabla</h2> - на экране десктопа он выглядит вполне достойно при размере в 36px, но на телефоне он уже с трудом входит в экран (условно). Если же поставить размер в зависимость от % или от ширины vw, то из-за линейной зависимости на телефоне будет практически ничего не видно.
Гугл подсказывает, что можно в @media ставить конкретные значения (не плохой вариант) или использовать JS чтобы подгонять размер по месту.
То же касается отступов сверху, снизу.
Как вы считаете это можно сделать наиболее красиво?
Спасибо!
  • Вопрос задан
  • 11202 просмотра
Решения вопроса 1
paulradzkov
@paulradzkov
Дизайнер, верстальщик, начальник отдела UI
Можно поставить размер шрифта в зависимости от размеров экрана, но через calc() задавать минимальное значение.

В этом примере ( codepen.io/paulradzkov/pen/jqYqgY ) размер шрифта заголовка никогда не будет меньше 16px (1em):
h1 {
    font-size: calc(1em + 4vw);
}


Можно использовать более сложные формулы совместно с @media. Тут размер шрифта плавно меняется от 14 до 18px в диапазоне от 480 до 1024px.

@media (min-width: 480px) and (max-width: 1024px) {
  p {
    font-size: calc(14px + (18 - 14) * ( (100vw - 480px) / ( 1024 - 480) ));
  }
}


До 480 и после 1024px размер задан жестко с использованием @media.

Но в целом это все сложно и редко нужно. Я обычно задаю размер фиксированно на двух-трёх диапазонах при помощи @media.

UPD: можно даже заставить текст максимально заполнять площадь вьюпорта codepen.io/CrocoDillon/pen/fBJxu
Ответ написан
Пригласить эксперта
Ответы на вопрос 3
@skazi_premiere
Верстаем как умеем ;) HTML/CSS/JS
Пишите в EM, в px только базовый размер и размер иконочного шрифта.
Ответ написан
e_s_l
@e_s_l
Веб-разработчик
Можно использовать rem. Будет пропорционально изменять размер всех шрифтов в зависимости от базового:
html {
  font-size: 10px;
}
p {
  font-size: 1.4rem;
}
@media and (max-width: 767px) {
  html {
    font-size: 11px;
  }
}
Ответ написан
johnnykramer
@johnnykramer
software engineer
@media screen and (max-width:468px) {
   p {font-size: 16px;}
}


это значит, что на экранах с максимальной шириной в 468 пикселей размер шрифта параграфа будет 16 пикселей.
Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
Sveak Барнаул
от 50 000 руб.
Девять линий Ульяновск
от 45 000 до 80 000 руб.
Krome Photos Челябинск
от 80 000 руб.
26 июн. 2019, в 20:56
10000 руб./за проект
26 июн. 2019, в 20:44
3000 руб./за проект
26 июн. 2019, в 19:34
300 руб./за проект