Демонстрация установки размера адаптивного шрифта в чистом CSS | Журнал "Вольт"
Ср. Дек 2nd, 2020


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

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

Математика

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

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

Пройдите курс и узнайте, как создавать макеты современных веб-сайтов в HTML5 и CSS3.

Учить больше

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

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

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

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

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

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

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

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

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

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

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

Пройдите курс и узнайте, как создавать макеты современных веб-сайтов в HTML5 и CSS3.

Учить больше

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

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

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

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

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

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

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

Вот и все.

недостатки

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

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

Вывод

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

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

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

Автор: Джейсон рыцарь

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

Сотрудники редакции: Команда Webformyself.

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

Пройдите курс и узнайте, как создавать макеты современных веб-сайтов в HTML5 и CSS3.

Учить больше

PSD в HTML

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

Посмотрите



Source link

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *