Generator CSS clamp()
Generează o valoare clamp() CSS fluidă care se scalează lin între două lățimi de viewport.
Generator CSS clamp()
Tipografia fluidă și spațierea scalează o valoare lin pe măsură ce viewport-ul se redimensionează, în loc să sară între dimensiuni fixe la câteva breakpoint-uri de media query. Acest instrument construiește acea valoare pentru dvs.: introduceți o dimensiune minimă și maximă și lățimile viewportului la care se aplică, și vă returnează o funcție CSS clamp() cu o interpolare liniară între ele, gata de lipit într-o foaie de stil.
Dimensiunea minimă și maximă stabilesc cele două capete ale scalei; lățimea minimă și maximă a viewportului stabilesc unde intră în vigoare fiecare capăt — sub lățimea minimă valoarea rămâne la minimul ei, deasupra maximului rămâne la maximul ei, și între ele crește liniar cu viewport-ul. Unitatea comută ieșirea între px și rem, cu dimensiunea fontului rădăcină controlând conversia px-la-rem, iar zecimalele controlează precizia numerelor generate. Formatul de ieșire avântează același clamp() ca o declarație simplă, o proprietate CSS personalizată, sau o clasă arbitrary-value Tailwind, pentru a putea s-o lipiți direct în orice bază de cod pe care o folosiți.
Activarea verificării accesibilității adaugă o notă atunci când configurația ar putea cauza probleme: dimensionarea bazată pe px ignoră preferința de dimensiune a fontului browserului cititorului, și un minim prea mic rămâne greu de citit chiar și înainte de a începe să se scaleze. Ambele sunt greșeli frecvente în formule de tip fluid scrise manual, și instrumentul le semnalează în loc să le trimită în tăcere.
Tot este calculat în browserul dvs. pe măsură ce reglați opțiunile — nimic din ceea ce introduceți nu este trimis nicăieri. Când rezultatul arată bine, copiați-l, descărcați-l ca fișier .txt, sau trimiteți-l la intrarea unui alt instrument pentru a continua lucrul.