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

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

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

Войти через TM ID
Похожие вопросы