Preskoči na sadržaj
TextArray1.41.0
100% lokalno

CSS clamp() generator

Generiraj fluidnu CSS clamp() vrijednost koja se glatko skalira između dvije širine prikaza.

Rezultat
Slični alati
CSS pretvarač jedinicaAlati za programere
Ekstractor CSS varijabli bojanovoAlati za programere
Kalkulator omjera slikeAlati za programere
i18n tipka difAlati za programere
Konverter iz TOML u JSONAlati za programere
SQL u JSONAlati za programere
CSS clamp() generator
Fluidna tipografija i razmaci glatko skaliraju vrijednost kako se prikaz mijenja, umjesto da skoče između fiksnih veličina na nekoliko media-query točaka prekida. Ovaj alat gradi tu vrijednost za vas: unesite minimalnu i maksimalnu veličinu i širine prikaza na kojima se primjenjuju, i vraća vam CSS clamp() funkciju s linearnom interpolacijom između, spremnu za lijepljenje u stilski list.
Minimalna veličina i maksimalna veličina postavljaju dva kraja skale; minimalna i maksimalna širina prikaza postavljaju gdje se svaki kraj primjenjuje — ispod minimalne širine vrijednost ostaje na svojoj donjoj granici, iznad maksimalne ostaje na svojoj gornjoj granici, i između raste linearno s prikazom. Jedinica prebacuje ispis između px i rem, s veličinom root fonta koja kontrolira px-to-rem konverziju, a decimalna mjesta kontroliraju koliko preciznosti imaju generirani brojevi. Format ispisa omota istu clamp() kao obična deklaracija, CSS custom svojstvo, ili Tailwind arbitrary-value klasu, tako da je možete direktno umetnuti u whichever codebase radite.
Uključivanje provjere dostupnosti dodaje napomenu kada bi postavka mogla izazvati probleme: px-zasnovna velikost ignora čitačevu postavku veličine fonta preglednika, a minimalna vrijednost koja je premala ostaje teška za čitanje čak i prije nego što počne skalirati se gore. Obje su česte greške u ručno napisanim formulama za fluidni tip, a alat ih označava umjesto da ih šalje u tišini.
Svega se izračunava u vašem pregledniku dok prilagođavate opcije — ništa što unesite nije poslano nigdje. Kada rezultat izgleda kako treba, kopirajte ga, preuzmite kao .txt datoteku, ili ga pošaljite drugom alatom u unos kako biste nastavili raditi na njega.
FAQ
Što clamp() zapravo radi?
clamp(min, preferred, max) odabira preferiranu vrijednost ali je nikad ne pusti da ide ispod min ili iznad max — ovdje preferirana vrijednost linearno raste s širinom prikaza, tako da rezultat glatko skalira između vaših dviju krajnjih točaka veličine.
Zašto odabrati rem umjesto px?
Veličina na osnovu rem-a skalira s veličinom root fonta, tako da še uvijek poštuje čitača koji je promijenio zadanu veličinu teksta svog preglednika. Veličina na osnovu px-a ostaje fiksna bez obzira na tu postavku, što je razlog zašto provjera dostupnosti to označava.
Za što je veličina root fonta?
To je px vrijednost koju 1rem predstavlja na stranici koju stilizujete — 16 po standardu u svakom pregledniku osim ako vi ili reset styleshhet ne promijenite. Alat je koristi da pretvori vaše px veličine u točne rem vrijednosti.
Mogu li koristiti Tailwind ispis direktno u class atributu?
Da. To je potpuna arbitrary-value klasa poput text-[clamp(1rem,0.8rem+1vw,2rem)] s uklonjenim razmakom, što je upravo sintaksa koju Tailwind očekuje.
Je li moj unos prenesen negdje?
Ne. Svaki izračun se zbiva u vašem pregledniku — brojevi koje unesete nikad ne napuštaju vašu napravu.