CSS Clamp() Калкулатор
Израчунајте стварну флуидну CSS clamp() вредност на основу минималне и максималне величине у оквиру две ширине приказа, са приказом нагиба и пресека корак по корак и прегледом промене величине уживо.
🔒 У потпуности се обрађује у вашем претраживачу — ништа што овде унесете се никада не отпрема.
Резултат
CSS clamp(MIN, PREFERRED, MAX) омогућава да једна декларација замени читав низ media query-ја: вредност остаје на MIN испод најмањег приказа, на MAX изнад највећег, а између се глатко скалира. Тежак део је PREFERRED израз — израз релативан у односу на приказ, као што је 0.833rem + 0.833vw — који нико не жели да изводи ручно. Овај калкулатор га израчунава стварно на основу четири броја: минималне величине, максималне величине и ширине приказа на којој се свака примењује.
Приказан је сваки међукорак, а не само коначна линија: нагиб (колико јединица величине вредност расте по пикселу приказа), тај исти нагиб изражен као vw коефицијент и пресек са y-осом — константа додата vw изразу тако да линија пролази тачно кроз две тачке које сте навели. Свако ко је налепио clamp() вредност из туторијала без разумевања може овде да види и провери стварну аритметику.
Клизач ширине приказа покреће прозор за преглед уживо, тако да је флуидно скалирање видљиво, а не само израчунато: превуците га између минималне и максималне тачке прелома и гледајте како се узорак текста мења тачно онако како би се мењао при промени величине правог прозора прегледача. Излазна линија и приказ се ажурирају при сваком притиску тастера — ово се природно комбинује са конвертором px у rem када и саму основну величину фонта треба конвертовати.
Пребаците се на режим типографске скале за комплетан флуидни типографски систем у једном кораку: унесите основну величину и модуларну размеру (1,125 до 1,5) и добијте шест величина — small, base, h4, h3, h2 и h1 — свака израчуната као сопствена clamp() линија између блаже мобилне прогресије и пуне десктоп размере, спремна за копирање као блок CSS прилагођених својстава.