@Akela74
Я

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

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

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

Войти через TM ID
Похожие вопросы
Вакансии с Моего Круга Все вакансии
Заказы с Фрилансим Все заказы