Сеть должна быть построена для включения всех. Само собой разумеется, что смартфоны используются повсеместно. Если вы разрабатываете веб-сайт и решаете проблему изменения размера шрифта, читайте дальше! Я собираюсь познакомить вас с удивительным модулем SASS под названием RFS (что означает размер шрифта ответа).

RFS - пакет, упрощающий отзывчивость шрифтов.

Разве это не потрясающе? По мере уменьшения ширины области просмотра размер шрифта изменяется вместе с ней. Это помогает обеспечить линейный вид шрифтов независимо от размера экрана!

Магия RFS

Таким образом, RFS берет вашу фиксированную единицу размера шрифта (px или rem) и применяет линейный алгоритм уменьшения размера для размеров экрана 1200px или ниже. Вот график, иллюстрирующий линейный алгоритм, который отображается на странице github RFS.

Алгоритм тем меньше влияет на размер шрифта, чем меньше исходный размер шрифта. Фактически, если ваш начальный размер шрифта 16px или меньше, rfs не будет его дополнительно уменьшать, так как любое уменьшение может привести к тому, что размеры шрифта будут слишком маленькими или недоступными для некоторых людей.

Начало работы с RFS

Давайте поднимем вас и начнем с этого замечательного пакета!

Шаг 1. Установите RFS через npm

Следующая команда должна установить RFS из репозитория npm

npm install --save rfs@latest

Примечание. RFS - это модуль SASS, который не работает с обычным CSS. У вас должен быть установлен SASS!

Шаг 2. Импортируйте RF-файлы в файл SASS / SCSS.

Добавьте следующее к любым файлам SASS, в которых вы хотите использовать RFS.

@import "./node_modules/rfs/scss.scss";

Шаг 3. Начните использовать миксин rfs ()

Теперь, когда у вас установлен и импортирован RFS, все, что осталось сделать, это использовать миксин rfs(). Вот моя таблица стилей из демонстрации, показанной выше.

@import "./node_modules/rfs/scss.scss";
body {
margin: 0;
}
#content-container {
display: flex;
height: 100vh;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
> * {
flex-shrink: 1;
}
> img {
max-width: 300px;
height: auto;
}
> h1 {
@include rfs(4rem);
}
> p {
@include rfs(2rem);
}
}
view raw style.scss hosted with ❤ by GitHub

Вот и все - мои теги header h1 и body p теперь гарантированно изменяют размер шрифта для уменьшения ширины экрана!

Спасибо за чтение. Я надеюсь, что это введение в RFS помогло решить некоторые из ваших проблем с отзывчивостью шрифтов.