Плинний розмір шрифту від 16px до 24px
Обчисліть реальне плинне значення CSS clamp() з мінімального та максимального розміру за двох ширин вʼюпорта — зі слоупом і перетином, показаними покроково, та живим превʼю зміни розміру.
Результат
Плинне масштабування розміру шрифту від 16px до 24px — один із найпоширеніших запитів щодо CSS clamp(), адже 16px — майже універсальне типове значення основного тексту, а 24px — частий крок угору для трохи більшого заголовка чи ввідного абзацу. Ця сторінка відкриває калькулятор саме з такою парою, попередньо заповненою відносно діапазону вʼюпорта від 320px до 1280px, тож рядок clamp() готовий одразу після завантаження.
Якщо потрібен лише статичний еквівалент 16px чи 24px у rem чи em — без жодного масштабування за вʼюпортом — конвертер px у rem дає відповідь за один крок; цей калькулятор — для випадку, коли саме значення має плавно змінюватися під час зміни розміру вікна браузера, а не лишатися фіксованим в одному значенні rem.
Розбір нижче показує, як саме 16px і 24px перетворюються на слоуп, коефіцієнт vw і перетин осі Y, а повзунок живого превʼю дозволяє протягти діапазон 320–1280px і побачити, як текст зростає з одного розміру до іншого в реальному часі, перш ніж скопіювати CSS-рядок у таблицю стилів.