Генератор зажимов CSS

Генератор CSS-зажима () строит одно объявление зажима (минимальное, предпочтительное, максимальное), которое плавно масштабирует значение между двумя ширинами экрана. вместо записи нескольких медиа-запросов, чтобы шагнуть заголовок от 24px на телефонах до 48px на рабочих столах, вы устанавливаете минимальный размер, максимальный размер и диапазон видовых портов, в который они отображаются, и генератор возвращает одну строку CSS, которая интерполирует каждый размер между ними.

Функция зажима (зажима) принимает три аргумента: нижнюю границу, предпочтительное значение и верхнюю границу. браузер использует предпочтительное значение, если оно не падает ниже минимального или выше максимального, и в этом случае он фиксируется на этой границе. Этот генератор вычисляет предпочтительное значение как линейную функцию окна просмотра, объединяя фиксированный член rem с членом vw, поэтому результат растет в ногу с окном, никогда не опускаясь ниже вашего минимума или превышая максимум. Этот метод часто называют жидкостной типографикой, хотя он одинаково хорошо работает для полей, заполнения, зазоров и ширины.

Все рассчитывается в вашем браузере с помощью JavaScript на стороне клиента, поэтому ничего из введенного вами не загружается, и инструмент работает в автономном режиме после загрузки. вы можете вводить размеры в пикселях или бэр, устанавливать собственный размер корневого шрифта и читать таблицу предварительного просмотра, показывающую вычисленное значение при общей ширине видового окна, чтобы вы могли подтвердить поведение кривой перед вставкой зажима () в таблицу стилей.

Размер жидкости имеет одну ловушку доступности, которую стоит избегать намеренно. Выражение clamp, средний член которого выражен исключительно в единицах просмотра, игнорирует настройку размера шрифта считывателя, поскольку vw не реагирует на него, а текст, который не может расти, не работает WCAG 1.4.4. Сохранение компонента rem в предпочтительном значении, что и делает сгенерированный вывод, означает, что размер по-прежнему реагирует на масштабирование браузера и на больший шрифт по умолчанию. Всегда устанавливайте обе границы: без них значение масштабируется без ограничений в любом направлении.

Вот генератор зажима CSS на реальном заголовке.Введите 24 и 48 px как размеры, 360 и 1440 как видовые окна, сохраните корень 16px и нажмите Создать зажим ().Выходной сигнал: зажим (1,5rem, 1rem + 2,2222vw, 3rem); Таблица предварительного просмотра подтверждает это: 24px при 360, 33,07px при 768, 38,76px при 1024 и 48px при 1440. Ниже 360 заголовок остается на уровне 1,5rem и выше 1440 он останавливается на 3rem, что является всей точкой жидкостной типографики с границами.