Calcolatore CSS Clamp()

CSS clamp(MIN, PREFERRED, MAX) permette a una singola dichiarazione di sostituire un'intera pila di media query: il valore rimane a MIN sotto il viewport più piccolo, a MAX sopra quello più grande, e scala fluidamente nel mezzo. La parte difficile è il termine PREFERRED — un'espressione relativa al viewport come 0.833rem + 0.833vw — che nessuno vuole derivare a mano. Questo calcolatore la calcola concretamente da quattro numeri: una dimensione minima, una dimensione massima e la larghezza del viewport a cui ciascuna si applica.

Viene mostrato ogni numero intermedio, non solo la riga finale: la pendenza (quante unità di dimensione cresce il valore per pixel di viewport), la stessa pendenza espressa come coefficiente vw, e l'intercetta sull'asse Y — la costante aggiunta al termine vw affinché la retta passi esattamente per i due punti specificati. Chiunque abbia incollato un valore clamp() preso da un tutorial senza capirlo può vedere e verificare qui il calcolo reale.

Uno slider per la larghezza del viewport governa un riquadro di anteprima dal vivo, così il ridimensionamento fluido è visibile, non solo calcolato: trascinalo tra i breakpoint minimo e massimo e guarda il testo campione ridimensionarsi esattamente come farebbe ridimensionando una vera finestra del browser. La riga di output e la scomposizione si aggiornano a ogni tasto premuto — si abbina naturalmente al convertitore da px a rem quando anche la dimensione base del font deve essere convertita.

Passa alla modalità scala tipografica per un sistema tipografico fluido completo in un solo passo: inserisci una dimensione base e un rapporto modulare (da 1,125 a 1,5) e ottieni sei dimensioni — small, base, h4, h3, h2 e h1 — ciascuna calcolata come una propria riga clamp() tra una progressione più delicata per il mobile e il rapporto pieno per il desktop, pronte da copiare come blocco di proprietà personalizzate CSS.