«Адаптивный» размер шрифта с использованием чистого CSS

От автора: бывают случаи, когда желательно иметь шкалу размера шрифта между двумя крайностями в зависимости от ширины экрана. Странно то, что я видел, как люди используют, чтобы достичь этого, например, RFS. Сам RFS представляет собой пример того, как НЕ делать это в эпоху вычислений и сравнений CSS3.

Хотя, к сожалению, такие проблемы распространены среди тех, кто использует бессмысленный мусор, такой как препроцессоры CSS, где, как и в случае с фреймворками, становится до боли очевидным, что те, кто создал такие системы — и те, кто их использует — явно не обладают квалификацией, чтобы написать хоть одну чертову строчку HTML, не говоря уже о том, чтобы применить к нему CSS, а затем иметь явную наглость рассказывать другим, как это сделать.

Математика

Ирония в том, что это на самом деле довольно просто реализовать. Допустим, вам нужен размер шрифта 1em как минимум, 4em как самый большой, а масштаб до максимального размера должен быть основан на 75rem. 75rem составляет 1200 пикселей для 16 пикселей — для обычных пользователей, 1500 пикселей — 20 пикселей для пользователей с крупным шрифтом, таких как я, и 2400 пикселей на многих устройствах 4k.

Вы также можете просто «посчитать сами»:

Это 4 в вычислениях просто должно соответствовать вашей 4em в вычислении min. Вам больше не нужен какой-то гигантский фреймворк, препроцессор или какой-либо другой мусор. Это простая математика, на которую CSS более чем способен сам по себе.

Затем переменные CSS можно использовать для хранения различных значений, чтобы облегчить их применение в вашем макете.

Основные отличия от других реализаций

Вместо того, чтобы использовать медиа-запросы, чтобы вручную указывать максимальный размер где-то еще, мы можем с помощью min / max жестко указать как минимальный, так и максимальный размер в формуле. Один простой вызов справится со всем этим. Вместо того, чтобы думать (или писать код), чтобы сказать (max-width: 1200px) или что-то вроде отдельного медиа-запроса с максимальным значением в нем, мы просто помещаем все это в одно объявление.

Это также позволяет фактически достичь минимума. Большинство таких попыток просто добавляют базовый размер к части ширины, что означает, что минимальный размер, который вы указываете, не является минимальным размером, который вы получаете или может когда-либо достичь макет.

Точно так же он на 100% основан на EM, поэтому вы не раздумываете о удобстве использования и доступности, разбираясь в пикселях. Опять же, как я уже говорил тысячи раз за последние полтора десятилетия, если вы используете размер шрифта в EM / %, отступы, поля и медиа-запросы должны ВСЕ также основываться на EM. Не смешивайте и не подбирайте, иначе макет СЛОМАЕТСЯ для пользователей нестандартного размера шрифта… Таких как и я, у которого 20px == 1REM на моем ноутбуке и рабочей станции, и 32px == 1EM в моем медиацентре.

Итак, давайте сделаем это!

Возьмем простой раздел страницы:

Сначала мы создаем некоторые переменные для обработки различных желаемых минимальных и максимальных размеров:

Вам нужна другая ширина для базы максимального размера, просто измените 75 на то, что вам нужно (в em). Мы просто применяем наши расчеты по желанию.

Опять же, «max(value)» — это на самом деле ваш минимальный размер, ваше «min(value)» — ваш максимальный размер, а значение умножения в конце должно соответствовать «min(value)». Применить их очень просто:

Результат? Когда страница действительно большая:

Когда маленькая:

Демонстрация

Как и во всех моих примерах, репозиторий открыт для легкого доступа и содержит .rar всех файлов для удобной загрузки, тестирования и экспериментов.

Для тех из вас, кто предпочитает codepen:

Вот и все.

Недостатки

На самом деле есть только один. Устаревшие браузеры подавятся этим. Знаете что? МЕНЯ ЭТО БЕСИТ!!! Но если вас это беспокоит, как всегда, уточняйте у caniuse.

Кроме того, несколько человек говорили, что это «слишком сложно запомнить». Серьезно? Люди, что с вами не так!

Заключение

Меня часто удивляет количество кода, который люди используют, чтобы «упростить вещи», в процессе часто лишая вас контроля над результатом. Даже если бы кто-то делал такие вещи с помощью препроцессора или скриптов, это должно быть так же просто, как подставить значения в приведенную выше формулу. Честно говоря, если вы думаете, что бросить 9 КБ SCSS в попытке сделать это стоит вашего времени… ну, может быть, пора отойти от клавиатуры и заняться чем-то менее сложным, например, макраме.

Но, честно говоря, «min» и «max» — ДЕЙСТВИТЕЛЬНО новые функции CSS — по крайней мере, в 2020 году — несмотря на то, что они хорошо поддерживаются всеми текущими / недавними браузерами. Многое из того, для чего этот бесполезный препроцессор был разработан — это заполнить пробелы в спецификациях. Пробелы, которых часто уже нет.

Просто посмотрите, насколько нативные переменные CSS превосходят предварительно скомпилированные, поскольку вы можете изменять их на лету, и это повлияет на все, что их вызывает. В препроцессорах они компилируются. LESS / SASS / SCSS, я назвал их бесполезным барахлом для людей, слишком ленивых, чтобы понять, как искать / заменять. Нативная реализация действительно полезна!

Автор: Jason Knight

Источник: levelup.gitconnected.com

Редакция: Команда webformyself.

Комментарии Вконтакте:

Комментарии запрещены.