От автора: Responsive Font Size (RFS) представляет собой движок, который автоматически вычисляет и обновляет свойство font-size для элементов на основе размеров окна просмотра браузера.
Если вы чувствуете, что это звучит знакомо, то это потому, что есть множество инструментов, которые предлагают различные подходы для гибкой типографии. Фактически, совсем недавно Крис собрал кучу подобных инструментов. Ознакомьтесь с этой подборкой, потому что всегда полезно знать, что нам доступно, и что лучше всего подходит для конкретной задачи.
RFS отличается тем, что делает написание кода для гибкой типографики очень похожим на написание нативного CSS (или, точнее, на написание с помощью препроцессора) непосредственно в таблицах стилей, в которых вы уже работаете — только без необходимости управлять кучей медиа-запросов. Он даже совместим с Sass, Less, Stylus и PostCSS, поэтому подключается практически к любому стеку.
Насколько это интегрировано? Что ж, давайте сравним фрагмент гибкой типографики, которая использует функцию calc()…
html { font-size: 16px;
} @media screen and (min-width: 320px) { html { font-size: calc(16px + 6 * ((100vw - 320px) / 680)); }
} @media screen and (min-width: 1200px) { html { font-size: 22px; }
}… или пример того, как это можно сделать с помощью RFS в Sass:
.title { @include font-size(4rem);
}… что компилируется в:
.title { font-size: 4rem;
} @media (max-width: 1200px) { .title { font-size: calc(1.525rem + 3.3vw); }
}Любопытно, как это работает? Давайте выясним это и затем перейдем к тому, как настроить это для проекта.
Магия автоматического перемасштабирования
Вот диаграмма, чтобы лучше понять, как RFS масштабирует размеры шрифтов:
Каждый цвет представляет размер шрифта, который передается в миксин font-size(), предоставляемый RFS. Ось Y графика представляет размер шрифта (в px), а ось X представляет ширину области просмотра (опять же, в px). Давайте посмотрим на зеленую линию, которая генерируется путем применения миксина к элементу:
.title { @include font-size(40);
}В этом случае в миксин передается размер шрифта 40px. Это значение служит максимальным размером шрифта элемента, он достигается, когда область просмотра 1200px или шире, в этот момент размер шрифта становится фиксированных. И наоборот, наименьший размер шрифта будет 20px, он никогда не опустится ниже этой отметки.
Все остальное? Ну, здесь автоматически вычисляется значение размера шрифта, используя закулисную функцию, чтобы определить число в соответствии с текущей шириной области просмотра.
Причина того, что RFS задает ограничение в 20px и выше, заключается в том, что текст меньшего размера (например, обычный основной текст), как правило, не требует столь гибкого управления, как такие части контента, как заголовки и тому подобное. Это очень похоже на FitText, который также предпочитает использовать изменения для более крупных шрифтов.
Если вы относитесь к тому типу людей, которым нравится заглядывать под капот, миксины для каждого препроцессора доступны для просмотра в репозитории RFS GitHub. Например, вот прямая ссылка на версию SCSS. Там много математики!
Обратите внимание, что каждый размер шрифта создается в виде комбинации единиц rem и vw, но на графике они отображаются в px, чтобы это было легче понять. Другими словами, вся математика действительно берется из миксина.
Все можно настраивать
Кроме шуток. Каждую. Отдельную. Вещь.
Например, вы, возможно, задавались вопросом, почему размер шрифта ограничен в области просмотра 1200px и шире в предыдущем примере. Это можно изменить. Как и множество других вещей, в том числе:
Базовый размер шрифта: наименьшее значение размера шрифта.
Единица размера шрифта: тип единицы, который будет использоваться в выходном значении (px или em).
Контрольная точка: максимальная ширина области просмотра, в которой размер шрифта элемента достигает максимального значения.
Единица контрольной точки: единица , используемая для медиа-запроса, который генерирует миксин (px, em или rem).
Фактор: служит регулятором объема, который информирует миксин о том, насколько агрессивным он должен быть при расчете размеров шрифта от максимальной ширины области просмотра до конца.
Значение Rem: определяет значение 1rem в пикселях (px).
Два измерения: функция, которая выявляет наименьшую сторону области просмотра и использует ее для вычисления значения размера шрифта. Это удобно, когда, скажем, вы хотите предотвратить уменьшение размера шрифта, когда устройство поворачивается с книжной ориентации в альбомную.
Класс: предоставляет имена классов, которые можно добавить к элементу в HTML, чтобы включить или отключить изменение размера.
Так что, да. Доступно много параметров. Важно знать, что все эти параметры являются переменными, которые могут быть определены в таблицах стилей.
Все это говорит о том, что настройки по умолчанию довольно безопасны, и они предотвратят усечение в области просмотра большого количества более длинных слов. Это особенно актуально для некоторых языков — таких как немецкий или голландский — которые содержат много составных слов.
Использование RFS в проекте
Давайте рассмотрим код. Было бы полезно рассмотреть код для каждого препроцессора, поэтому я объясню все в синтаксисе .scss. Но если вы предпочитаете что-то еще, вы можете посмотреть примеры на других языках в репозитории GitHub в разделе Использование.
Прежде всего, RFS должен быть установлен на проекте. Он доступен через npm и Yarn:
## npm npm install rfs ## Yarn yarn add rfs ## Bower is available, but has been deprecated bower install rfs --save
Затем убедитесь, что миксин импортирован с остальными стилями, где бы вы ни выполняли импорт для других партиалов:
@import "~rfs/scss";
Теперь мы можем начать работать с миксином!
.title { color: #333; @include font-size(64px);
} .subtitle { color: #666; @include font-size(48px);
} .paragraph { @include font-size(16px);
}Я передал значения в px, но единицы rem также поддерживаются. Если передано значение без единицы, по умолчанию используется px. Размеры шрифта всегда отображаются в rem (в сочетании с vw), чтобы размеры шрифта также увеличивались при увеличении размера шрифта по умолчанию в браузере (эта функция часто используется людьми с нарушениями зрения).
Вывод:
.title { color: #333; font-size: 4rem;
} @media (max-width: 1200px) { .title { font-size: calc(1.525rem + 3.3vw); }
} .subtitle { color: #666; font-size: 3rem;
} @media (max-width: 1200px) { .subtitle { font-size: calc(1.425rem + 2.1vw); }
} .paragraph { font-size: 1rem;
}Обратите внимание, что миксин — это font-size(), но RFS также позволяет использовать его двумя другими способами:
.title { @include font-size(4rem); // or @include responsive-font-size(64px); // or @include rfs(64);
}RFS встроен прямо в Bootstrap
Вот небольшая история. Однажды у меня возникла невероятно импульсивная идея включить RFS в Bootstrap. В то время я фактически не использовал Bootstrap, но считал, что это именно та функция, которую может использовать Bootstrap. Я сделал запрос и подождал пару месяцев, чтобы посмотреть, что произойдет.
Тем временем Bootstrap все больше и больше интересовал меня, и только что была выпущена версия 4. Медленно, но верно, я стал больше использовать этот проект, и для меня открылся новый мир, когда я обнаружил сообщество, стоящее за ним. Именно во время hacktoberfest (о да, я получил свою футболку) в октябре 2018 года меня попросили присоединиться к команде Bootstrap от mdo. Я считаю, что участие в проектах с открытым исходным кодом — это очень весело и полезно.
С тех пор RFS стал проектом команды Bootstrap, и 11 февраля этого года мы запустили Bootstrap 4.3, который включает RFS прямо из коробки. В настоящее время он по умолчанию отключен, но его легко включить, установив переменную Sass $enable-responsive-font-sizes: true.
Но RFS все еще можно использовать самостоятельно. Просто круто, что он встроен прямо в широко используемый фреймворк.
О да, давайте поговорим о поддержке браузерами
Поддержка чертовски хороша! На самом деле RFS будет работать везде, где поддерживаются медиа-запросы и единицы на основе окна просмотра. RFS установит размер шрифта для устаревших браузеров, таких как Internet Explorer 8, но настраиваемые функции работать не будут. Другими словами, он должен быть безопасным для производства!
Что дальше?
Следующая основная версия Bootstrap — версия 5, и мы планируем включить RFS по умолчанию. У нас пока нет планов менять способ работы. Скорее всего, для переменной $enable-responsive-font-sizes будет просто установлено true и все.
Я надеюсь, что в будущем я смогу использовать функцию min(), потому что она будет генерировать меньше CSS и сделает вещи намного менее сложными. Похоже, что браузеры пока не поддерживают эту функцию в достаточной мере, но если вы заинтересованы в ней, то можете следить за ходом работы над этой проблемой в GitHub.
Автор: Martijn Cuppens
Источник: https://css-tricks.com
Редакция: Команда webformyself.