min(), max() e clamp() per valori fluidi
Limiti i valori tra minimi e massimi usando min(), max() e la sintassi abbreviata clamp().
min(), max() e clamp() per valori fluidi è una lezione CSS Academy gratuita su CoddyKit. Questa è la lezione 2 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento CSS Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso CSS Academy include 4 lezioni in totale.
Perché utilizzare le funzioni di confronto?
Le funzioni di confronto CSS (min(), max(), clamp()) consentono di impostare dimensioni responsive che si adattano al contesto senza media query: un approccio più elegante e conciso rispetto a quello basato sui breakpoint.
min() — Scegliere il valore più piccolo
min(a, b, ...) valuta tutti gli argomenti e utilizza il più piccolo. In questo caso, "minimo" indica il risultato visivo, cioè l'opzione più restrittiva.
<div class="container">Container</div>max() — Scegliere il valore più grande
max(a, b, ...) sceglie il valore più grande, garantendo sempre il rispetto di una soglia minima.
<p>Responsive text</p>clamp(min, preferred, max)
clamp() vincola un valore all'interno di un intervallo. Il valore preferito (l'argomento centrale) è in genere fluido. Il minimo e il massimo forniscono limiti assoluti.
<h1>Clamped Heading</h1>Scala tipografica fluida con clamp()
Sostituisca più override basati sui breakpoint con un singolo clamp() per ogni livello di intestazione:
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>Spaziatura fluida con clamp()
Applichi dimensioni fluide anche a padding, margin e gap: è una tecnica fondamentale per il design "intrinseco":
<div class="section">
<div class="grid"><div>A</div><div>B</div></div>
</div>min() come limite per la larghezza
Il pattern più semplice per un contenitore: deve occupare sempre il 90% della viewport, ma non superare mai 1200px, con una sola espressione:
<div class="wrapper">Wrapper</div>max() per la dimensione minima del carattere
Si assicuri che il testo del corpo non diventi mai troppo piccolo nelle viewport di dimensioni ridotte:
<p class="text-body">Body text that never gets too small.</p>Annidare min/max/clamp
Queste funzioni possono essere annidate per creare vincoli complessi:
<div class="element">Padded element</div>Funzioni di confronto in Grid
Utilizzi min() all'interno di minmax() per definire una soglia minima delle colonne più sicura:
<div class="grid"><div>Card</div></div>Supporto dei browser
Tutte e tre le funzioni di confronto sono pienamente supportate dai browser moderni (Chrome 79+, Firefox 75+, Safari 11.1+). Non sono necessari prefissi del vendor.
Verifica rapida
Un'intestazione utilizza font-size: clamp(1rem, 3vw, 2.5rem). A quale larghezza della viewport 3vw equivale a 1rem (ipotizzando una radice di 16px)?
Riepilogo
min() sceglie il valore più piccolo (il limite superiore). max() sceglie quello più grande (la soglia minima). clamp(min, preferred, max) vincola un valore fluido. Insieme, queste funzioni permettono di creare tipografia e spaziatura fluide senza media query. Il pattern più potente è clamp(1.5rem, 4vw, 3rem) per intestazioni automaticamente responsive.
Domande Frequenti
La lezione «min(), max() e clamp() per valori fluidi» è gratuita?
Sì — il testo completo di «min(), max() e clamp() per valori fluidi» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso CSS Academy, passa a CoddyKit PRO. Il corso CSS Academy include 4 lezioni in totale.
Cosa imparerò in «min(), max() e clamp() per valori fluidi»?
Limiti i valori tra minimi e massimi usando min(), max() e la sintassi abbreviata clamp(). Eserciti CSS Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare CSS Academy?
Non è richiesta alcuna esperienza precedente. CSS Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 2 di 4.
Quanto tempo richiede la lezione «min(), max() e clamp() per valori fluidi»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione CSS Academy?
Sì. Ogni lezione CSS Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- calc() per calcoli dinamici
- min(), max() e clamp() per valori fluidi
- repeat() e minmax() in Grid
- color-mix() e sintassi dei colori relativi