Genera un clamp responsive tra due dimensioni

Gli sviluppatori front-end lo usano quando dimensioni, spaziature o testi devono crescere in modo fluido tra due limiti seguendo la larghezza dello schermo.

Genera un clamp responsive tra due dimensioni. L'intera elaborazione resta nel browser; i dati inseriti non vengono caricati, condivisi o salvati.

Come si usa

Inserisci la dimensione minima in pixel che vuoi sugli schermi piccoli.
Fornisci la dimensione massima in pixel per gli schermi più grandi.
Inserisci la larghezza minima e la larghezza massima del viewport in pixel.
Avvia il generatore per ottenere una dichiarazione CSS clamp pronta da integrare.

Esempio

Un esempio comune definisce una dimensione del testo che scala tra uno schermo piccolo e uno schermo grande. Dopo la generazione, copia il valore clamp e provalo nel tuo foglio di stile per controllare che il testo segua la larghezza del viewport come previsto.

Input

Risultato

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

Limiti e formati

Lo strumento genera solo il valore di dimensione fluida, non l'intero layout o altri stili.
La funzione clamp deve essere supportata dal browser usato dai tuoi visitatori.
Valori di viewport scelti male possono rendere la scalatura troppo veloce o troppo lenta.
Prova sempre il risultato a diverse larghezze di schermo prima di distribuirlo.

Dove avviene il trattamento

Il calcolo del valore fluido viene eseguito nel tuo browser. Le dimensioni che inserisci restano sul tuo dispositivo e non vengono inviate a un servizio esterno. Puoi preparare il tuo CSS senza trasmettere dati.

Domande frequenti

Cosa significano i quattro valori?

Fornisci la dimensione minima e massima in pixel, poi la larghezza minima e massima del viewport. Lo strumento usa questi punti per costruire una progressione tra le due dimensioni.

Posso usare il risultato per margini o spaziatura?

Sì, il valore generato può essere usato per una dimensione del testo, un margine o una spaziatura, purché la proprietà CSS accetti una funzione clamp. Adatta semplicemente l'unità e la proprietà nel tuo foglio di stile.

Il risultato funziona in tutti i browser?

La funzione clamp è ampiamente supportata dai browser moderni, ma le versioni più vecchie potrebbero non riconoscerla. Fornisci un valore di fallback se devi supportare browser molto vecchi.