width, height, min-width, max-width, min-height, max-height

Ora che abbiamo sistemato il calcolo delle scatole con border-box, possiamo parlare in sicurezza di come ridimensionarle.

Le proprietà base sono intuitive:

• width: Imposta la larghezza.
• height: Imposta l’altezza.

Puoi usare diverse unità di misura:

• Pixel (px): Valori fissi e assoluti (es. width: 300px).
• Percentuali (%): Valori relativi al contenitore genitore (es. width: 50% significa “occupa metà dello spazio che ti mette a disposizione chi ti contiene”).
• Viewport (vw, vh): Valori relativi alle dimensioni dello schermo. 100vw è la larghezza totale dello schermo, 100vh è l’altezza totale dello schermo.

Il problema dei valori rigidi (width e height)

Nel web moderno, gli schermi degli utenti variano dai microscopici smartwatch agli enormi monitor 4K.

Se imposti width: 800px, cosa succede se l’utente guarda il sito dal cellulare (largo in media 400px)? Il tuo elemento “straborderà” dallo schermo, creando una fastidiosa barra di scorrimento orizzontale.

Allo stesso modo, se imposti height: 200px su un articolo di blog, ma l’utente aumenta la dimensione del font, il testo uscirà fuori dalla scatola tagliandosi o sovrapponendosi.

Regola d’oro: Evita di impostare altezze fisse (height) su contenitori che ospitano testo. Lascia che sia il contenuto a decidere quanto in alto espandersi!

La soluzione flessibile: Limiti Minimi e Massimi

Per creare layout che si adattano fluidamente, il CSS mette a disposizione proprietà di limite (constraints).

max-width (Larghezza Massima)

È il migliore amico del web responsive. Dice all’elemento: “Puoi stringerti quanto vuoi se lo schermo è piccolo, ma non superare mai questa larghezza massima”.

.container {
  width: 100%; /* Sii largo quanto puoi... */
  max-width: 1200px; /* ...ma fermati a 1200px. */
}

Se lo schermo è largo 800px, l’elemento sarà 800px. Se lo schermo è 1920px, l’elemento si fermerà a 1200px. È così che si centrano le pagine nei grandi monitor!

min-height (Altezza Minima)

Garantisce che una scatola non diventi troppo schiacciata se c’è poco contenuto, ma le permette comunque di crescere se il testo aumenta.

.hero-section {
  min-height: 100vh; /* Sii alto almeno quanto l'intero schermo... */
  /* ...ma se il testo dentro è lunghissimo, cresci pure in altezza! */
}

min-width e max-height

Esistono anche queste, ma si usano molto meno frequentemente. Un esempio tipico di max-height è nei menu a tendina o nelle finestre di chat, dove, superata una certa altezza, compare una scrollbar interna (combinandola con overflow-y: auto).

In sintesi: sostituisci width fisse con max-width e height fisse con min-height, e i tuoi layout smetteranno magicamente di “rompersi” sui telefoni cellulari!