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

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

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

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

Математика

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

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

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

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

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

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

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

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

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

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

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

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

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

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

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

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

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

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

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

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

Вот и все.

Недостатки

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

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

Заключение

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

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

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

Автор: Jason Knight

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

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Смотреть

Метки:

Похожие статьи:

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

Комментарии Facebook:

Комментирование закрыто.