Calcolatrice CSS Clamp()

Il morsetto CSS(MIN, PREFERRED, MAX) consente a una dichiarazione di sostituire un intero stack di query multimediali: il valore rimane su MIN sotto il viewport più piccolo, su MAX sopra quello più grande e si ridimensiona uniformemente nel mezzo. La parte difficile è il termine PREFERITO - un'espressione relativa al viewport come 0.833rem + 0.833vw - che nessuno vuole derivare a mano. Questa calcolatrice lo calcola in modo reale da quattro numeri: una dimensione minima, una dimensione massima e la larghezza del viewport a cui si applica ciascuno.

Viene mostrato ogni numero intermedio, non solo la linea finale: la pendenza (di quante unità di dimensione cresce il valore per pixel del viewport), la stessa pendenza espressa come coefficiente vw e l'intersezione dell'asse y, la costante aggiunta al termine vw in modo che la linea passi esattamente attraverso i due punti specificati. Chiunque abbia incollato un valore clamp() da un tutorial senza capirlo può vedere e verificare l'effettiva aritmetica qui.

Un dispositivo di scorrimento della larghezza della finestra guida una casella di anteprima dal vivo, quindi il ridimensionamento fluido è visibile, non solo calcolato: trascinalo tra i punti di interruzione minimo e massimo e guarda il testo di esempio ridimensionarsi esattamente come farebbe mentre viene ridimensionata una finestra del browser reale. La riga di output e la ripartizione si aggiornano ad ogni pressione di un tasto: questo si accoppia naturalmente con il convertitore da px a rem quando è necessario convertire anche la dimensione del carattere di base.

Passa alla modalità scala di tipo per un sistema tipografico fluido completo in un solo passaggio: inserisci una dimensione di base e un rapporto modulare (da 1,125 a 1,5) e ottieni sei dimensioni: piccola, base, h4, h3, h2 e h1, ciascuna calcolata come una propria linea clamp() tra una progressione mobile più delicata e il rapporto desktop completo, pronto per essere copiato come un blocco di proprietà personalizzate CSS.