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

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

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

Войти через центр авторизации
Похожие вопросы
Amigoweb Магнитогорск
от 30 000 до 40 000 руб.
HTML Academy Санкт-Петербург
от 130 000 до 160 000 руб.