Generatore CSS clamp
Inserisci larghezze dello schermo e dimensioni per schermi piccoli e grandi per generare CSS che modifica in modo fluido la dimensione del testo o la spaziatura. Visualizza l'anteprima dell'output in px o rem, poi copia il CSS e il codice Tailwind oppure salvali come testo.
Che cosa puoi fare
Specifica 2 coppie di larghezza e dimensione
Specifica le dimensioni per un viewport piccolo e uno grande. Supporta 6 tipi: dimensione del carattere, spaziature, padding, margin, larghezza e altezza.
Genera codice in px o rem
Inserisci tutti i valori in px e scegli px o rem per l'output. Ottieni una dichiarazione CSS e il codice della proprietà arbitraria di Tailwind.
Controlla subito il CSS generato
Applica il CSS a due elementi nell'anteprima. Controlla come appaiono testo e spaziatura alla larghezza attuale della cornice.
Come si usa
Scegli la proprietà da modificare
Scegli la proprietà CSS che vuoi specificare, ad esempio font-size per la dimensione del testo o gap per la spaziatura tra gli elementi.
Inserisci due larghezze viewport e dimensioni
Inserisci in px ciascuna delle due larghezze viewport e la relativa dimensione. La dimensione per il viewport minore non deve superare quella per il viewport maggiore.
Controlla l'unità di output e genera
Scegli px o rem nelle impostazioni avanzate. Per rem, controlla anche la dimensione di base del carattere prima di premere Genera CSS.
Anteprima e recupero del codice
Copia il CSS e incollalo dove lo userai. Apri il codice Tailwind per recuperarlo. Puoi anche copiare tutti e 2 gli elementi insieme o salvarli come testo.
Utile quando
Cambia senza scatti la dimensione dei titoli
Quando vuoi impostare le dimensioni del testo per viewport stretti e larghi e farle variare in modo continuo tra queste larghezze, invece che a scatti.
Adatta la spaziatura al viewport
Quando vuoi che lo spazio tra le schede o il padding interno vari entro le dimensioni minima e massima che hai impostato.
Specificare dimensioni fluide e leggere l'anteprima
I 3 valori in clamp
clamp è una funzione CSS che specifica un valore minimo, un valore fluido e un valore massimo. La formula generata collega due punti di riferimento con un'espressione lineare e limita le dimensioni fuori dall'intervallo alle dimensioni degli estremi.
Input in px; output in px o rem
Sia le larghezze viewport sia le dimensioni vengono inserite in px. Per l'output in rem, le dimensioni e il termine fisso vengono divisi per la dimensione di base del carattere, mentre il coefficiente vw per la larghezza viewport viene usato invariato.
Allinea la base rem a dove viene usato il codice
Per impostazione predefinita, il codice tratta 1rem come 16px. Se la dimensione del carattere dell'elemento radice è diversa dove viene usato il codice, cambiano anche le dimensioni degli estremi e il modo in cui la dimensione varia. Controlla anche dove lo usi.
La cornice dell'anteprima definisce la larghezza viewport
L'anteprima è una cornice di visualizzazione indipendente. Calcola vw dalla larghezza interna alla cornice, non dalla larghezza dell'intero schermo. A seconda della proprietà, lo stesso CSS generato viene applicato al testo, allo spazio tra i due elementi, alla spaziatura o alle dimensioni degli elementi.
Controlla anche dove viene usato il codice
Il testo e la struttura dell'anteprima sono fissi. Controlla anche font, testi lunghi, ritorno a capo e ingrandimento del testo del browser dove usi il codice. Il codice Tailwind usa il formato della proprietà arbitraria; controlla anche che venga rilevato e generato dove lo usi.
Domande frequenti
Che cosa succede fuori dall'intervallo di larghezze viewport specificato?
Le larghezze inferiori alla larghezza minore specificata usano la dimensione minima, mentre le larghezze superiori alla larghezza maggiore specificata usano la dimensione massima. Per rem, devi usare la stessa dimensione di base del carattere usata quando è stato generato il codice.
Qual è la dimensione di base del carattere per rem?
Specifica quanti px vengono usati per calcolare 1rem. Il valore predefinito è 16px e puoi cambiarlo a 1–1000px nelle impostazioni avanzate. Allinea la dimensione del carattere dell'elemento radice dove userai il codice.
Posso specificare dimensioni uguali o valori negativi?
Imposta minimo e massimo sullo stesso valore per una dimensione costante. I valori negativi sono consentiti solo per margin. Le dimensioni che diminuiscono man mano che il viewport si allarga non sono supportate.
Le modifiche a proprietà o valori si applicano subito?
Modificarli cancella il codice generato e l'anteprima. Premi Genera CSS per aggiornarli. Lo stesso vale quando cambi l'unità di output o la dimensione di base del carattere.
Posso cambiare il testo dell'anteprima?
Il testo di esempio e Aa 123 sono entrambi fissi. Non esiste una funzione di modifica del testo. Controlla anche il testo reale e la larghezza di visualizzazione nella pagina che usa il CSS generato.
Input e risultati
- Larghezza viewport
- 1–100000px. La larghezza viewport minore deve essere inferiore a quella maggiore. Sono ammessi anche i decimali.
- Dimensione
- 0–10000px. Solo margin può scendere fino a −10000px. La dimensione per il viewport minore non deve superare quella per il viewport maggiore.
- Output
- Una dichiarazione CSS e una proprietà arbitraria di Tailwind. Salva tutti e 2 gli elementi come css-clamp-generator.txt.
- Precisione
- La formula generata usa coefficienti con un massimo di 13 cifre significative. Si verifica un errore, ad esempio, per larghezze così vicine che la formula arrotondata non riesce a riprodurre i punti di riferimento.