Отзывчивый шрифт. Адаптация текста между макетным и минимальным значениями

  • Tutorial
Адаптивный или отзывчивый шрифт — это мечта любого веб-разработчика. Я пересмотрел множество вариантов реализации, посидел вечерок и вывел для себя надежный работающий вариант. Им и хочу с тобой поделиться. Бонус SCSS миксин!


Итак, задача. Указывать значение по макету, а также минимальное значение при котором текст или заголовок хорошо бы смотрелся на мобильных устройствах, например iPhone 5 (320px). При этом шрифт бы адаптировался, увеличиваясь либо уменьшаясь в зависимости от ширины экрана.

Берем исходные значения из макета, к примеру заголовок H1 размером 40px. Так же нам нужна ширина всего полотна макета, к примеру 1280px.



Для получения минимального значения шрифта верстаем заголовок по макету и, с помощью средств разработчика Chrome (F12) выбираем нужный минимальный размер экрана и подбираем размер шрифта меняя значение пока текст не будет выглядеть адекватно. У меня получилось 24px



После этого в CSS, вместо font-size: 40px; пишем следующее.

font-size: calc(24px + 16 * (100vw / 1280));

Где 24px это наш минимальный шрифт, 16 – разница между шрифтом по макету 40 и минимальным шрифтом 24 (40-24 = 16). 100vw – это полная текущая ширина вьюпорта (экрана) 1280 – это ширина макета.

Тестируем и получаем отзывчивый шрифт, который полностью соответствует размеру по макету.

Но, на размере в 320px мы не увидим желаемого результата, а именно шрифта размером 24px. Это связано с тем, что мы никак не указали минимальный размер экрана именно в 320px.



Для решения ситуации пишем медиа запрос для 767px, и внутри меняем формулу:

@media (min-width: 767px){
 h1 {
  font-size: calc(24px + (16 + 16 * 0.7) * ((100vw - 320px) / 1280));
 }
}

Тут мы отнимаем 320px от полной ширины вьюпорта, а так же к добавочному числу 16 мы прибавляем еще его 70% (16 + 16 * 0.7)

Проверяем и видим полное соответствие поставленной задаче! При этом переход в брейк поинте сделан бесшовно и не заметно!

Конечно же мы можем закрыть все это в SCSS миксин:

$maxWidth: 1280;
@mixin adaptiv-font($pcSize, $mobSize) {
	$addSize: $pcSize - $mobSize;
	$addMobSize: $addSize + $addSize * 0.7;
	@media (max-width: 767px) {
		font-size: calc(#{$mobSize + px} + #{$addMobSize} * ((100vw - 320px) / #{$maxWidth}));
	}
	@media (min-width: 767px) {
		font-size: calc(#{$mobSize + px} + #{$addSize} * (100vw / #{$maxWidth}));
	}
}

И подключать следующим образом:

h1{
 @include adaptiv-font(40, 24);
}


Можно и вовсе избавиться от медиа запроса:

$maxWidth: 1280;
@mixin adaptiv-font($pcSize, $mobSize) {
	$addSize: $pcSize - $mobSize;
	$maxWidth: $maxWidth - 320;
	font-size: calc(#{$mobSize + px} + #{$addSize} * ((100vw - 320px) / #{$maxWidth}));
}

Буду рад прочесть в комментариях чем еще можно улучшить это решение. Спасибо за внимание!

По материалам из видео "Адаптивный шрифт. Пример реализации отзывчивого (резинового) шрифта на CSS + SCSS миксин" На ютуб канале "Фрилансер по жизни"
AdBlock похитил этот баннер, но баннеры не зубы — отрастут

Подробнее
Реклама

Комментарии 7

    –2
    Вместо своей рекламы, лучше бы хоть один CodePen привели с демонстрацией работы.

    Про поддержку браузерами ничего не было сказано.
    Поэтому обращу внимание на то, что в современных браузерах (к сожалению, пока что без Safari) уже поддерживается функция «clamp()» и эта задача в некоторой степени решается гораздо проще.
    У MDN нет рекламных видео на YouTube, поэтому ограничусь ссылкой на страницу справочника

    Ну и пример с демонстрацией работы:
      +1
      Этот вариант, мягко говоря, не эквивалентен описанному в статье.
        0
        Я и не говорил, что это замена.
        Упомянул новую интересную функцию
          0
          Функция интересная, но:
          1. В контексте статьи мало что меняет, поскольку она решает лишь побочную подзадачу (ограничение диапазона), а не основную (управляемое масштабирование).
          2. Менее удобна, чем медиа-запрос, потому что из этого выражения совсем не очевидно, при каком размере окна сработает ограничение. Более короткий код не всегда более удобный.
          3. Имеет пока неприемлемо слабую поддержку.
          0
          Перечитал комментарий.
          Да, согласен.
          Написал так, будто замена.
        0

        Можно еще примерно так: font-size: min(12px, max(10vw, 24px))

          0
          Вариант, изложенный в видео, неправильный.
          Несоответствие в нижней границе у вас произошло потому, что у вас неверная формула. Но вместо того, чтобы аккуратно разобраться в причинах и исправить, вы подперли её костылем с магическим коэффициентом. Костыль этот дает бесшовность (не совсем точную, но почти), но ломает линейность.
          Использовать это нельзя. В интернете без труда можно найти корректные реализации.

          Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

          Самое читаемое