Калкулатор CSS Clamp().

CSS clamp(MIN, PREFERRED, MAX) позволява на една декларация да замени цял стек медийни заявки: стойността остава на MIN под най-малкия прозорец за изглед, на MAX над най-големия и се мащабира плавно между тях. Трудната част е ПРЕДПОЧИТАНИЯТ термин — относителен израз за прозореца на изгледа като 0,833rem + 0,833vw — който никой не иска да извлича на ръка. Този калкулатор го изчислява реално от четири числа: минимален размер, максимален размер и ширината на прозореца за изглед, за която се прилага всяко от тях.

Показано е всяко междинно число, а не само крайната линия: наклонът (с колко единици размер нараства стойността на пиксел на прозореца за изглед), същият наклон, изразен като vw коефициент, и пресичането на оста y — константата, добавена към члена vw, така че линията да минава точно през двете точки, които сте посочили. Всеки, който е поставил стойност на clamp() от урок, без да я разбира, може да види и провери действителната аритметика тук.

Плъзгач за ширина на прозореца за изглед задвижва поле за визуализация на живо, така че плавното мащабиране е видимо, а не само изчислено: плъзнете го между минималната и максималната точка на прекъсване и гледайте как примерният текст се преоразмерява точно както би, докато се преоразмерява истински прозорец на браузъра. Изходният ред и разбивката се актуализират при всяко натискане на клавиш — това се сдвоява естествено с преобразувателя на px към rem, когато самият размер на основния шрифт също се нуждае от конвертиране.

Превключете към режим на мащабиране на типа за цялостна течна типографска система в една стъпка: въведете основен размер и модулно съотношение (1,125 до 1,5) и получете шест размера — малък, основен, h4, h3, h2 и h1 — всеки изчислен като своя собствена линия clamp() между по-нежна мобилна прогресия и пълно съотношение на работния плот, готови за копиране като блок от персонализирани CSS свойства.