Se hai trascorso più di dieci minuti a stilizzare una pagina web, ti sarai probabilmente scontrato con il classico muro del CSS: cercare di capire esattamente quanto sia largo in pixel un div al 50%.
A volte il CSS sembra come cercare di seguire una ricetta in cui le dosi sono semplicemente “un po’ di farina” e “un po’ d’acqua”. Tu vuoi numeri esatti, ma il CSS ti dà proporzioni relative.
La buona notizia? Convertire le percentuali in pixel non è magia nera. In realtà è solo aritmetica di base e, una volta compresa la regola d’oro delle percentuali CSS, non dovrai mai più tirare a indovinare le dimensioni del tuo layout.
Analizziamolo passo dopo passo.
La regola d’oro: dipende tutto dal genitore
Prima di fare qualsiasi calcolo, dobbiamo parlare di come “ragiona” il CSS.
Immagina di avere una gigantesca cornice vuota appesa al muro. Quella cornice è larga 1000 pixel. Se dici a una foto di occupare il 50% dello spazio, questa occuperà metà della cornice (500 pixel).
In CSS, quella cornice viene chiamata contenitore genitore (parent container). Un valore percentuale in CSS non esiste nel vuoto. È sempre, sempre, sempre una percentuale del suo genitore diretto.
Se non conosci le dimensioni del contenitore genitore, non puoi calcolare il valore in pixel dell’elemento figlio. È così semplice!
La semplice matematica dietro la conversione
Una volta nota la larghezza (o altezza) in pixel del contenitore genitore, il calcolo è semplicissimo. Ecco la formula:
(Dimensione genitore in pixel × Percentuale) ÷ 100 = Pixel finali
Mettiamo che il tuo <div> genitore sia largo 800px e tu voglia che un <div> figlio sia largo il 75%.
-
800 × 75 = 60.000
-
60.000 ÷ 100 = 600px
Il tuo contenitore figlio verrà reso esattamente a 600 pixel di larghezza.
Esempio passo passo: mettiamolo in pratica
Esaminiamo uno scenario reale. Stai creando il classico layout per un blog: un’area per il contenuto principale e una barra laterale, posizionate affiancate all’interno di un contenitore wrapper.
Ecco il tuo HTML:
<div class="wrapper">
<div class="main-content">Questo è l'articolo.</div>
<div class="sidebar">Questa è la barra laterale.</div>
</div>Ecco il tuo CSS:
.wrapper {
width: 1200px;
}
.main-content {
width: 70%;
}
.sidebar {
width: 30%;
}Passo 1: Identifica il genitore
Il genitore sia di .main-content che di .sidebar è .wrapper.
Passo 2: Trova il valore in pixel del genitore
Guardando il nostro CSS, .wrapper ha un valore fisso di 1200px.
Passo 3: Fai il calcolo
-
Contenuto principale: (1200 × 70) ÷ 100 = 840px
-
Barra laterale: (1200 × 30) ÷ 100 = 360px
Se ispezioni quegli elementi con gli strumenti per sviluppatori del tuo browser, vedrai che corrispondono esattamente a 840px e 360px.
Gli imprevisti: Padding, Margins e Box-Sizing
In un mondo perfetto, questa matematica sarebbe tutto ciò di cui hai bisogno. Ma il CSS ha un modo subdolo di complicare le cose: il box model.
Per impostazione predefinita, se dici a un box di essere largo il 50% e poi gli aggiungi 20px di padding, il CSS aggiunge quei 20px sopra al 50%. Improvvisamente, il tuo box diventa più largo di quanto calcolato e l’intero layout va a capo.
La soluzione: Usa sempre box-sizing: border-box;.
* {
box-sizing: border-box;
}Pensa a border-box come a un modo per dire al browser: “Quando dico 50%, intendo il 50% totale, inclusi padding e bordi. Gestiscilo tu.” Questo mantiene accurate le tue conversioni in pixel ed evita che il layout si rompa.
Nota: i margini vengono comunque applicati all’esterno del box, quindi dovrai tenerne conto separatamente!
La tua tabella di riferimento rapido
Non vuoi tirare fuori la calcolatrice ogni volta che scrivi in CSS? Ecco un prospetto riassuntivo per le percentuali più comuni in base alle larghezze standard dei contenitori genitori.
| Larghezza Genitore | 10% | 25% | 33.33% (Un terzo) | 50% | 75% |
| 800px | 80px | 200px | ~266px | 400px | 600px |
| 1000px | 100px | 250px | ~333px | 500px | 750px |
| 1200px | 120px | 300px | 400px | 600px | 900px |
| 1440px | 144px | 360px | 480px | 720px | 1080px |
Convertire le percentuali in pixel è in realtà solo un esercizio per individuare il contenitore genitore. Una volta stabilita la grandezza della “cornice”, ridimensionare i contenuti al suo interno diventa un gioco da ragazzi.
E se ti dovesse capitare di dover fare l’esatto contrario — ricavare la percentuale da un valore fisso in pixel — puoi risparmiarti del tutto i calcoli e usare semplicemente un rapido Convertitore da Pixel a Percentuale.