Generatore di morsetti CSS

Un generatore di morsetto () CSS costruisce una singola dichiarazione di morsetto (minimo, preferito, massimo) che scala un valore in modo uniforme tra due larghezze dello schermo Invece di scrivere diverse query multimediali per passare un'intestazione da 24 px sui telefoni a 48 px sui desktop, si imposta una dimensione minima, una dimensione massima e l'intervallo di viewport su cui si mappano e il generatore restituisce una riga di CSS che interpola ogni dimensione nel mezzo.

La funzione clamp () accetta tre argomenti: un limite inferiore, un valore preferito e un limite superiore Il browser utilizza il valore preferito a meno che non scenda al di sotto del minimo o al di sopra del massimo, nel qual caso si blocca a quel limite Questo generatore calcola il valore preferito come funzione lineare della viewport, combinando un termine rem fisso con un termine vw, quindi il risultato cresce di pari passo con la finestra senza mai scendere al di sotto del minimo o superare il massimo Questa tecnica è spesso chiamata tipografia fluida, sebbene funzioni altrettanto bene per margini, imbottitura, spazi vuoti e larghezze.

Tutto viene calcolato nel browser con JavaScript lato client, quindi nulla di ciò che inserisci viene caricato e lo strumento funziona offline una volta caricato Puoi inserire le dimensioni in pixel o rem, impostare una dimensione del carattere root personalizzata e leggere una tabella di anteprima che mostra il valore calcolato alle larghezze comuni della finestra, in modo da poter confermare che la curva si comporta prima di incollare il morsetto () nel foglio di stile.

Il dimensionamento fluido ha una trappola per l'accessibilità che vale la pena evitare deliberatamente Un'espressione clamp il cui termine intermedio è espresso esclusivamente in unità viewport ignora l'impostazione della dimensione del carattere del lettore, perché vw non risponde ad essa e il testo che non può crescere fallisce WCAG 1.4.4 Mantenere un componente rem nel valore preferito, che è ciò che fa l'output generato, significa che la dimensione risponde ancora allo zoom del browser e a un carattere predefinito più grande Imposta sempre entrambi i limiti: senza di essi il valore scala senza limite in entrambe le direzioni.

Ecco il generatore di morsetti CSS su una rotta reale Inserisci 24 e 48 px come le dimensioni, 360 e 1440 come viewport, mantieni la radice 16px, e premi Genera morsetto () L'uscita è font-size: clamp (1.5rem, 1rem + 2.2222vw, 3rem); La tabella di anteprima lo conferma: 24px a 360, 33.07px a 768, 38.76px a 1024 e 48px a 1440. Sotto 360 l'intestazione rimane a 1.5rem e sopra 1440 si ferma a 3rem, che è il punto intero della tipografia fluida con limiti.