Clamp(), min() e max()
Le funzioni clamp(), min() e max() creano valori responsive senza media queries.
clamp(min, preferred, max)
h1 {
font-size: clamp(1.5rem, 4vw, 3rem);
/* Minimo 1.5rem, preferito 4vw, massimo 3rem */
}
.container {
width: clamp(300px, 80%, 1200px);
}min()
.element {
width: min(500px, 100%); /* Il più piccolo tra i due */
}max()
.element {
width: max(300px, 50%); /* Il più grande tra i due */
}Tipografia fluida
body {
font-size: clamp(16px, 1rem + 0.5vw, 20px);
}