От автора: бывают случаи, когда желательно иметь шкалу размера шрифта между двумя крайностями в зависимости от ширины экрана. Странно то, что я видел, как люди используют, чтобы достичь этого, например, RFS. Сам RFS представляет собой пример того, как НЕ делать это в эпоху вычислений и сравнений CSS3.
Хотя, к сожалению, такие проблемы распространены среди тех, кто использует бессмысленный мусор, такой как препроцессоры CSS, где, как и в случае с фреймворками, становится до боли очевидным, что те, кто создал такие системы — и те, кто их использует — явно не обладают квалификацией, чтобы написать хоть одну чертову строчку HTML, не говоря уже о том, чтобы применить к нему CSS, а затем иметь явную наглость рассказывать другим, как это сделать.
Математика
Ирония в том, что это на самом деле довольно просто реализовать. Допустим, вам нужен размер шрифта 1em как минимум, 4em как самый большой, а масштаб до максимального размера должен быть основан на 75rem. 75rem составляет 1200 пикселей для 16 пикселей — для обычных пользователей, 1500 пикселей — 20 пикселей для пользователей с крупным шрифтом, таких как я, и 2400 пикселей на многих устройствах 4k.
font-size:max(1em, min(4em, calc(100vw * 4 / 75)));
Вы также можете просто «посчитать сами»:
font-size:max(1em, min(4em, 5.333vw));
Это 4 в вычислениях просто должно соответствовать вашей 4em в вычислении min. Вам больше не нужен какой-то гигантский фреймворк, препроцессор или какой-либо другой мусор. Это простая математика, на которую CSS более чем способен сам по себе.
Затем переменные CSS можно использовать для хранения различных значений, чтобы облегчить их применение в вашем макете.
Основные отличия от других реализаций
Вместо того, чтобы использовать медиа-запросы, чтобы вручную указывать максимальный размер где-то еще, мы можем с помощью min / max жестко указать как минимальный, так и максимальный размер в формуле. Один простой вызов справится со всем этим. Вместо того, чтобы думать (или писать код), чтобы сказать (max-width: 1200px) или что-то вроде отдельного медиа-запроса с максимальным значением в нем, мы просто помещаем все это в одно объявление.
Это также позволяет фактически достичь минимума. Большинство таких попыток просто добавляют базовый размер к части ширины, что означает, что минимальный размер, который вы указываете, не является минимальным размером, который вы получаете или может когда-либо достичь макет.
Точно так же он на 100% основан на EM, поэтому вы не раздумываете о удобстве использования и доступности, разбираясь в пикселях. Опять же, как я уже говорил тысячи раз за последние полтора десятилетия, если вы используете размер шрифта в EM / %, отступы, поля и медиа-запросы должны ВСЕ также основываться на EM. Не смешивайте и не подбирайте, иначе макет СЛОМАЕТСЯ для пользователей нестандартного размера шрифта… Таких как и я, у которого 20px == 1REM на моем ноутбуке и рабочей станции, и 32px == 1EM в моем медиацентре.
Итак, давайте сделаем это!
Возьмем простой раздел страницы:
<section> <h2>Sample Section</h2> <p> This card uses a relatively simple CSS calculation to rescale <code>margin</code>, <code>padding</code>, <code>font-size</code>, and <code>border-radius</code> between a minimum and maximum size based on screen width. </p><p> No LESS/SASS/SCSS rubbish, no NPM package trash, just flipping do it with <code>calc</code>, <code>min</code>, <code>max</code> and some native CSS variables. </p> </section>
Сначала мы создаем некоторые переменные для обработки различных желаемых минимальных и максимальных размеров:
:root { --base-scale:calc(100vw / 75); --h2-font-size:max(1em, min(4em, calc(var(--base-scale) * 4))); --padding-size:max(1em, min(2em, calc(var(--base-scale) * 2))); --margin-size:max(0.5em, min(2em, calc(var(--base-scale) * 2))); --border-radius:max(1em, min(3em, calc(var(--base-scale) * 3)));
}Вам нужна другая ширина для базы максимального размера, просто измените 75 на то, что вам нужно (в em). Мы просто применяем наши расчеты по желанию.
Опять же, «max(value)» — это на самом деле ваш минимальный размер, ваше «min(value)» — ваш максимальный размер, а значение умножения в конце должно соответствовать «min(value)». Применить их очень просто:
main section { max-width:40em; padding:var(--padding-size); margin:var(--margin-size); border-radius:var(--border-radius); background:#FFF; border:1px solid #0484;
}
h2 { font-size:var(--h2-font-size);
}Результат? Когда страница действительно большая:
Когда маленькая:
Демонстрация
Как и во всех моих примерах, репозиторий открыт для легкого доступа и содержит .rar всех файлов для удобной загрузки, тестирования и экспериментов.
Для тех из вас, кто предпочитает codepen:
Вот и все.
Недостатки
На самом деле есть только один. Устаревшие браузеры подавятся этим. Знаете что? МЕНЯ ЭТО БЕСИТ!!! Но если вас это беспокоит, как всегда, уточняйте у caniuse.
Кроме того, несколько человек говорили, что это «слишком сложно запомнить». Серьезно? Люди, что с вами не так!
Заключение
Меня часто удивляет количество кода, который люди используют, чтобы «упростить вещи», в процессе часто лишая вас контроля над результатом. Даже если бы кто-то делал такие вещи с помощью препроцессора или скриптов, это должно быть так же просто, как подставить значения в приведенную выше формулу. Честно говоря, если вы думаете, что бросить 9 КБ SCSS в попытке сделать это стоит вашего времени… ну, может быть, пора отойти от клавиатуры и заняться чем-то менее сложным, например, макраме.
Но, честно говоря, «min» и «max» — ДЕЙСТВИТЕЛЬНО новые функции CSS — по крайней мере, в 2020 году — несмотря на то, что они хорошо поддерживаются всеми текущими / недавними браузерами. Многое из того, для чего этот бесполезный препроцессор был разработан — это заполнить пробелы в спецификациях. Пробелы, которых часто уже нет.
Просто посмотрите, насколько нативные переменные CSS превосходят предварительно скомпилированные, поскольку вы можете изменять их на лету, и это повлияет на все, что их вызывает. В препроцессорах они компилируются. LESS / SASS / SCSS, я назвал их бесполезным барахлом для людей, слишком ленивых, чтобы понять, как искать / заменять. Нативная реализация действительно полезна!
Автор: Jason Knight
Источник: levelup.gitconnected.com
Редакция: Команда webformyself.