Creați o dimensiune CSS fluidă cu clamp()

Dezvoltatorii front-end îl folosesc atunci când vor ca dimensiunea textului sau a spațiilor să se adapteze fluid la lățimea ecranului printr-o valoare CSS clamp().

Generați un clamp responsive între două dimensiuni. Întreaga procesare rămâne în browser; datele introduse nu sunt încărcate, distribuite sau salvate.

Cum se folosește

Introduceți dimensiunea minimă în pixeli dorită pe ecranele mici.
Furnizați dimensiunea maximă în pixeli pentru ecranele mai mari.
Completați lățimea minimă a ferestrei de vizualizare și lățimea maximă a ferestrei de vizualizare în pixeli.
Rulați generatorul pentru a obține o declarație CSS clamp gata de integrat.

Exemplu

Un exemplu comun definește o dimensiune a textului care se scalează între un ecran mic și un ecran mare. După generare, copiați valoarea clamp și testați-o în foaia dvs. de stiluri pentru a verifica dacă textul urmează lățimea ferestrei de vizualizare conform așteptărilor.

Date de intrare

Rezultat

clamp(16px, 13.090909px + 0.909091vw, 24px)

Limite și formate

Instrumentul generează doar valoarea dimensiunii fluide, nu întregul aspect sau alte stiluri.
Funcția clamp trebuie să fie acceptată de browserul folosit de vizitatorii dvs.
Valorile de fereastră de vizualizare alese prost pot face scalarea prea rapidă sau prea lentă.
Testați întotdeauna rezultatul la mai multe lățimi de ecran înainte de implementare.

Unde are loc procesarea

Calculul valorii fluide rulează în browserul dvs. Dimensiunile pe care le introduceți rămân pe dispozitivul dvs. și nu sunt trimise către un serviciu extern. Puteți pregăti CSS-ul fără a transmite date.

Întrebări frecvente

Ce înseamnă cele patru valori?

Furnizați dimensiunea minimă și maximă în pixeli, apoi lățimea minimă și maximă a ferestrei de vizualizare. Instrumentul folosește aceste puncte pentru a construi o progresie între cele două dimensiuni.

Pot folosi rezultatul pentru margini sau spațiere?

Da, valoarea generată poate fi folosită pentru o dimensiune a textului, o margine sau un spațiu, atâta timp cât proprietatea CSS acceptă o funcție clamp. Trebuie doar să adaptați unitatea și proprietatea în foaia de stiluri.

Rezultatul funcționează în orice browser?

Funcția clamp este acceptată pe scară largă de browserele moderne, dar versiunile mai vechi s-ar putea să nu o recunoască. Furnizați o valoare de rezervă dacă trebuie să acceptați browsere foarte vechi.