In questo articolo
Cosa sono le unità CSS?
Le unità CSS definiscono la dimensione degli elementi in una pagina web. Si dividono in due categorie: unità assolute (px, cm, mm, in, pt, pc) che hanno dimensioni fisiche fisse, e unità relative (rem, em, vw, vh, vmin, vmax, %) che si adattano in base al contesto, come la dimensione del carattere o le dimensioni del viewport.
Il design responsive moderno si basa molto sulle unità relative. L'unità rem si adatta alla dimensione del carattere radice (di solito 16px), em si adatta alla dimensione del carattere dell'elemento genitore e le unità del viewport (vw, vh) si adattano alla finestra del browser, rendendo i layout fluidi su tutti i dispositivi.
Come funziona la conversione delle unità CSS
Convertire tra unità CSS richiede di conoscere il contesto di base: la dimensione del carattere radice per rem, la dimensione del carattere del genitore per em e le dimensioni del viewport per vw/vh. La maggior parte delle conversioni usa una semplice moltiplicazione o divisione.
- px a rem — dividi il valore in pixel per la dimensione del carattere radice (predefinita 16px), quindi 24px = 1.5rem quando la radice è 16px
- rem a em — rem ed em sono uguali quando l'elemento eredita la dimensione del carattere radice; altrimenti moltiplica per il rapporto tra la dimensione del carattere del genitore e quella della radice
- px a vw/vh — dividi il valore in pixel per la larghezza (o l'altezza) del viewport e moltiplica per 100, quindi 192px = 10vw su un viewport largo 1920px
Prova gratuitamente — nessuna registrazione richiesta
Converti le unità CSS →Quando usare la conversione delle unità CSS
Convertire tra unità CSS è un'attività quotidiana nello sviluppo front-end moderno.
- Design responsive — converti i mockup a pixel fissi in layout basati su rem o vw che si adattano in modo fluido a schermi di ogni dimensione, dal mobile al desktop
- Accessibilità — usare le unità rem garantisce che il testo si ridimensioni correttamente quando gli utenti modificano la dimensione del carattere predefinita del browser, un requisito di accessibilità fondamentale
- Token dei design system — converti le specifiche dei designer (in genere in pixel) in token basati su rem che mantengono spaziatura e proporzioni tipografiche coerenti
Domande frequenti
Dovrei usare rem o em per le dimensioni dei caratteri?
Usa rem nella maggior parte dei casi. Le unità rem sono relative alla dimensione del carattere radice, il che le rende prevedibili indipendentemente dalla profondità di annidamento. Le unità em si sommano quando sono annidate (un 1.2em dentro un altro 1.2em diventa 1,44x), il che può causare dimensioni impreviste. Riserva em ai componenti specifici in cui il ridimensionamento relativo al genitore è intenzionale.
Qual è la dimensione predefinita del carattere radice nei browser?
Tutti i principali browser usano 16px come dimensione predefinita del carattere radice. Ciò significa che 1rem = 16px se non sovrascritto dal CSS. Gli utenti possono modificare questo valore nelle impostazioni del browser per motivi di accessibilità, ed è per questo che usare rem invece di px per le dimensioni dei caratteri e le spaziature è importante per un design accessibile.
Quando dovrei usare le unità del viewport invece di rem?
Usa le unità del viewport (vw, vh) per gli elementi che dovrebbero adattarsi alla finestra del browser anziché alla dimensione del carattere. Esempi comuni sono le sezioni hero a schermo intero (height: 100vh), la tipografia fluida (clamp con vw) e il padding responsive nei contenitori. Evita vw per il testo del corpo: ignora le preferenze dei caratteri dell'utente.