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

Question

[Алексей]

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

Answer 1

[Павел Радьков]

Можно поставить размер шрифта в зависимости от размеров экрана, но через 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

Comments

[Алексей]

Спасибо!

[Дмитрий Черкас]

Благодарю за отличное решение!

Answer 2

[Алексей]

Пишите в EM, в px только базовый размер и размер иконочного шрифта.

Answer 3

[Maxim Zhgulev]

Можно использовать rem. Будет пропорционально изменять размер всех шрифтов в зависимости от базового:

html {
  font-size: 10px;
}
p {
  font-size: 1.4rem;
}
@media and (max-width: 767px) {
  html {
    font-size: 11px;
  }
}

Comments

[Алексей]

Спасибо!

Answer 4

[Пётр Кузьмичёв]

@media screen and (max-width:468px) {
   p {font-size: 16px;}
}

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

Comments

[Алексей]

Да. Спасибо! Это я и имел ввиду фразой "можно в media ставить конкретные значения".
Всё-таки, на мой взгляд, применять жесткие значения размеров элементов в наше время разнообразия устройств несколько неудобно.

[Павел Радьков]

Всё удобно. 468 css-пикселей всегда одинаковы на всех устройствах и не важно сколько их существует. (Не путать с device-пикселями).