Funzioni min, max e clamp
Utilizzate min(), max() e clamp() per dimensionamenti adattivi che rispondono alle dimensioni del contenitore o della viewport.
Funzioni min, max e clamp è una lezione CSS Academy gratuita su CoddyKit. Questa è la lezione 4 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 CSS?
Le funzioni di confronto CSS consentono di esprimere un dimensionamento condizionale senza JavaScript: "utilizza questa dimensione, ma non renderla mai inferiore o superiore a questi limiti". Sono alla base del moderno design fluido e responsivo.
Funzione min()
min() restituisce il valore più piccolo di un elenco di valori separati da virgole. Il browser sceglie il valore più piccolo alle dimensioni correnti del viewport.
<div class="container">Container width: min(800px, 90%)</div>
Funzione max()
max() restituisce il valore più grande. È utile per impostare dimensioni minime che possano anche aumentare.
<p>Text sized with max(1rem, 2vw)</p>
Funzione clamp()
clamp(min, preferred, max) mantiene un valore tra un minimo e un massimo. Il valore preferito è generalmente fluido, ad esempio vw.
<h1>Clamped Heading</h1>
clamp() per la tipografia fluida
La tipografia fluida con clamp() elimina la necessità di usare più sovrascritture di font-size nelle media query:
<h1>Main Heading</h1>
<h2>Subheading</h2>
<p>Body copy that scales fluidly with the viewport.</p>
clamp() per la spaziatura fluida
Può applicare lo stesso schema alla spaziatura per ottenere margini e padding naturalmente responsive:
<div class="section">Section with fluid padding</div>
min() per i contenitori
Uno schema sicuro per i contenitori, che non supera mai una larghezza massima e non aggiunge mai lo scorrimento orizzontale:
<div class="wrapper">Safe wrapper container</div>
Funzioni annidate
Può annidare le funzioni di confronto per creare espressioni complesse:
<p class="hero-text">Nested min/max inside clamp()</p>
calc() combinato con clamp()
Utilizzi calc() all'interno di clamp() per un'interpolazione fluida e precisa tra due dimensioni:
<h1>Precise fluid heading</h1>
min-content max-content fit-content
CSS include anche valori di dimensione espressi tramite parole chiave:
min-content: la dimensione minima possibile senza overflowmax-content: occupa tutto lo spazio necessario al contenutofit-content(): simile a max-content, ma limitato a un limite specificato
<span class="tag">Tag label</span>
Supporto dei browser
min(), max() e clamp() sono supportati da tutti i browser moderni. Non sono necessari prefissi. Può utilizzarli ovunque sia previsto un valore di lunghezza, frequenza, tempo o numero.
Verifica rapida
Un'intestazione utilizza font-size: clamp(1rem, 4vw, 3rem) in una viewport larga 600px. Qual è la dimensione del carattere?
Riepilogo
min() seleziona il valore più piccolo, mentre max() seleziona quello più grande. clamp(min, preferred, max) mantiene un valore fluido entro determinati limiti. Queste funzioni permettono di realizzare tipografia e spaziatura fluide moderne, eliminando spesso la necessità di usare più sovrascritture nelle media query.
Impara CSS con un tutor IA — gratis
Scrivi ed esegui vero codice nel tuo browser, ricevi aiuto istantaneo da un tutor IA disponibile 24/7, e riprendi da dove hai lasciato sul web o nell'app.
- Corsi
- 40
- Lezioni
- 159
Domande Frequenti
La lezione «Funzioni min, max e clamp» è gratuita?
Sì — il testo completo di «Funzioni min, max e clamp» è 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 «Funzioni min, max e clamp»?
Utilizzate min(), max() e clamp() per dimensionamenti adattivi che rispondono alle dimensioni del contenitore o della viewport. 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 4 di 4.
Quanto tempo richiede la lezione «Funzioni min, max e clamp»?
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
- Unità assolute: px, pt, cm
- Unità relative: em e rem
- Unità della viewport: vw, vh, dvh
- Funzioni min, max e clamp