Converti tra pixel (PX), root em (REM) e em (EM) unità CSS con questo semplice calcolatore. Essenziale per il design e lo sviluppo web reattivo.
Converti tra pixel (PX), root em (REM) e em (EM). Inserisci un valore in un campo per vedere i valori equivalenti negli altri unità.
Comprendere e convertire tra le unità CSS è essenziale per il design e lo sviluppo web reattivi. Le unità PX (pixel), REM (root em) ed EM sono i blocchi fondamentali che determinano come gli elementi sono dimensionati e posizionati su diversi dispositivi e dimensioni dello schermo. Questo strumento completo di conversione delle unità consente di tradurre facilmente i valori tra queste tre unità CSS critiche, aiutandoti a creare layout web più flessibili e manutenibili.
I pixel (PX) sono unità di dimensione fissa che offrono un controllo preciso ma mancano di scalabilità, mentre le unità REM si scalano in base alla dimensione del font dell'elemento radice, e le unità EM si scalano in base alla dimensione del font del loro elemento padre. Convertire tra queste unità può essere difficile, specialmente quando si lavora con design complessi o quando si supportano funzionalità di accessibilità come il ridimensionamento del testo. Il nostro convertitore PX, REM ed EM semplifica questo processo, consentendoti di concentrarti sulla creazione di design belli e reattivi.
I pixel (PX) sono l'unità CSS più basilare e comunemente utilizzata. Un pixel è un singolo punto in una griglia di immagini digitali e rappresenta il più piccolo elemento controllabile su uno schermo. In CSS, i pixel forniscono un'unità di misura di dimensione fissa che rimane coerente indipendentemente da altri fattori di stile.
1.element {
2 width: 200px;
3 font-size: 16px;
4 margin: 10px;
5}
6Caratteristiche chiave dei pixel:
Le unità REM (root em) sono unità relative che si scalano in base alla dimensione del font dell'elemento radice (tipicamente l'elemento <html>). Di default, la maggior parte dei browser imposta la dimensione del font radice a 16px, rendendo 1rem equivalente a 16px a meno che non venga esplicitamente cambiato.
1html {
2 font-size: 16px; /* Default nella maggior parte dei browser */
3}
4
5.element {
6 width: 12.5rem; /* Equivalente a 200px con la dimensione del font radice predefinita */
7 font-size: 1rem; /* Equivalente a 16px */
8 margin: 0.625rem; /* Equivalente a 10px */
9}
10Caratteristiche chiave delle unità REM:
Le unità EM sono unità relative che si scalano in base alla dimensione del font del loro elemento padre. Se non viene specificata alcuna dimensione del font per il padre, le EM faranno riferimento alla dimensione del font ereditata.
1.parent {
2 font-size: 20px;
3}
4
5.child {
6 font-size: 0.8em; /* Equivalente a 16px (20px × 0.8) */
7 margin: 0.5em; /* Equivalente a 8px (16px × 0.5) */
8}
9Caratteristiche chiave delle unità EM:
Comprendere le relazioni matematiche tra le unità PX, REM ed EM è cruciale per conversioni accurate. Ecco le formule utilizzate nel nostro convertitore:
Per convertire i pixel in unità REM, dividere il valore in pixel per la dimensione del font radice:
Ad esempio, con la dimensione del font radice predefinita di 16px:
Per convertire i pixel in unità EM, dividere il valore in pixel per la dimensione del font dell'elemento padre:
Ad esempio, con una dimensione del font padre di 16px:
Per convertire le unità REM in pixel, moltiplicare il valore REM per la dimensione del font radice:
Ad esempio, con la dimensione del font radice predefinita di 16px:
Per convertire le unità EM in pixel, moltiplicare il valore EM per la dimensione del font dell'elemento padre:
Ad esempio, con una dimensione del font padre di 16px:
Per convertire le unità REM in unità EM, è necessario considerare sia la dimensione del font radice che la dimensione del font dell'elemento padre:
Se sia la dimensione del font radice che quella del padre sono uguali (ad esempio, 16px), allora 1rem = 1em.
Per convertire le unità EM in unità REM, utilizzare la seguente formula:
Ancora una volta, se entrambe le dimensioni dei font sono uguali, allora 1em = 1rem.
Il nostro strumento di conversione rende facile tradurre valori tra unità PX, REM ed EM. Ecco una guida passo-passo per utilizzare il convertitore in modo efficace:
<html> del tuo progettoComprendere quando utilizzare ciascuna unità CSS e come convertire tra di esse è cruciale per un efficace sviluppo web. Ecco alcune applicazioni pratiche e scenari in cui il nostro convertitore si rivela inestimabile:
Convertire tra unità è essenziale per creare design veramente reattivi:
1/* Converti valori fissi in pixel in unità REM reattive */
2.container {
3 /* Da: padding: 20px; */
4 padding: 1.25rem; /* 20px ÷ 16px = 1.25rem */
5
6 /* Da: margin-bottom: 32px; */
7 margin-bottom: 2rem; /* 32px ÷ 16px = 2rem */
8}
9Utilizzare unità relative migliora l'accessibilità rispettando le preferenze degli utenti:
I moderni sistemi di design traggono vantaggio da un uso attento delle unità:
Creare una tipografia armoniosa richiede una selezione attenta delle unità:
1/* Sistema tipografico utilizzando unità REM */
2h1 { font-size: 2.5rem; } /* 40px */
3h2 { font-size: 2rem; } /* 32px */
4h3 { font-size: 1.5rem; } /* 24px */
5h4 { font-size: 1.25rem; } /* 20px */
6p { font-size: 1rem; } /* 16px */
7small { font-size: 0.875rem; } /* 14px */
8Quando si implementano design da strumenti come Figma o Photoshop:
Sebbene PX, REM ed EM siano le unità più comuni, ci sono alternative da considerare:
La storia delle unità CSS riflette l'evoluzione più ampia del design web, dai layout statici agli approcci reattivi e accessibili di oggi.
Nei primi giorni del CSS, i pixel regnavano sovrani. I designer web creavano layout a larghezza fissa, tipicamente larghi 640px o 800px per adattarsi alle risoluzioni dello schermo comuni. L'accessibilità e la diversità dei dispositivi non erano preoccupazioni principali, e il controllo pixel-perfect era l'obiettivo principale.
Con la diversificazione delle dimensioni degli schermi, i layout basati su percentuali guadagnarono popolarità. I designer iniziarono a creare design più flessibili, anche se la tipografia spesso rimaneva in unità pixel. Questa era vide l'introduzione delle unità EM nel CSS, anche se la loro adozione era limitata a causa della complessità nella gestione delle dimensioni dei font a cascata.
L'introduzione dell'iPhone nel 2007 trasformò il design web. Improvvisamente, i siti web dovevano funzionare su schermi lunghi anche 320px. Questo catalizzò l'interesse per le tecniche di design reattivo e le unità relative. Le limitazioni delle unità EM (particolarmente l'effetto a cascata) divennero più evidenti man mano che i design diventavano più complessi.
L'articolo influente di Ethan Marcotte sul design web reattivo nel 2010 cambiò il modo in cui gli sviluppatori si approcciavano alle unità CSS. L'unità REM fu introdotta nel CSS3, offrendo i vantaggi della scalabilità relativa senza le complicazioni a cascata delle unità EM. Il supporto del browser per le unità REM crebbe costantemente durante questo periodo.
Oggi lo sviluppo web abbraccia un mix di unità per scopi diversi:
Questa evoluzione riflette la transizione del web da un mezzo basato su documenti a una piattaforma di applicazioni complessa che deve funzionare su innumerevoli dispositivi e contesti.
1// Converti tra unità PX, REM ed EM
2const pxToRem = (px, rootFontSize = 16) => {
3 return px / rootFontSize;
4};
5
6const pxToEm = (px, parentFontSize = 16) => {
7 return px / parentFontSize;
8};
9
10const remToPx = (rem, rootFontSize = 16) => {
11 return rem * rootFontSize;
12};
13
14const emToPx = (em, parentFontSize = 16) => {
15 return em * parentFontSize;
16};
17
18const remToEm = (rem, rootFontSize = 16, parentFontSize = 16) => {
19 return rem * (rootFontSize / parentFontSize);
20};
21
22const emToRem = (em, parentFontSize = 16, rootFontSize = 16) => {
23 return em * (parentFontSize / rootFontSize);
24};
25
26// Esempio di utilizzo
27console.log(pxToRem(24)); // 1.5
28console.log(remToPx(1.5)); // 24
29console.log(pxToEm(24, 24)); // 1
30console.log(remToEm(2, 16, 32)); // 1
311:root {
2 /* Dimensioni del font di base */
3 --root-font-size: 16px;
4 --base-font-size: var(--root-font-size);
5
6 /* Valori pixel comuni convertiti in REM */
7 --space-4px: 0.25rem;
8 --space-8px: 0.5rem;
9 --space-16px: 1rem;
10 --space-24px: 1.5rem;
11 --space-32px: 2rem;
12 --space-48px: 3rem;
13
14 /* Scala tipografica */
15 --text-xs: 0.75rem; /* 12px */
16 --text-sm: 0.875rem; /* 14px */
17 --text-base: 1rem; /* 16px */
18 --text-lg: 1.125rem; /* 18px */
19 --text-xl: 1.25rem; /* 20px */
20 --text-2xl: 1.5rem; /* 24px */
21}
22
23/* Esempio di utilizzo */
24.card {
25 padding: var(--space-16px);
26 margin-bottom: var(--space-24px);
27 font-size: var(--text-base);
28}
29
30.card-title {
31 font-size: var(--text-xl);
32 margin-bottom: var(--space-8px);
33}
341// Funzioni SCSS per la conversione delle unità
2@function px-to-rem($px, $root-font-size: 16) {
3 @return ($px / $root-font-size) * 1rem;
4}
5
6@function px-to-em($px, $parent-font-size: 16) {
7 @return ($px / $parent-font-size) * 1em;
8}
9
10@function rem-to-px($rem, $root-font-size: 16) {
11 @return $rem * $root-font-size * 1px;
12}
13
14// Esempio di utilizzo
15.element {
16 padding: px-to-rem(20);
17 margin: px-to-rem(32);
18 font-size: px-to-rem(18);
19
20 .nested {
21 // Usando la dimensione del font padre (18px) per la conversione in em
22 padding: px-to-em(16, 18);
23 margin-bottom: px-to-em(24, 18);
24 }
25}
261def px_to_rem(px, root_font_size=16):
2 """Converti pixel in unità REM"""
3 return px / root_font_size
4
5def rem_to_px(rem, root_font_size=16):
6 """Converti unità REM in pixel"""
7 return rem * root_font_size
8
9def px_to_em(px, parent_font_size=16):
10 """Converti pixel in unità EM"""
11 return px / parent_font_size
12
13def em_to_px(em, parent_font_size=16):
14 """Converti unità EM in pixel"""
15 return em * parent_font_size
16
17# Esempio di utilizzo
18print(f"16px = {px_to_rem(16)}rem") # 16px = 1.0rem
19print(f"2rem = {rem_to_px(2)}px") # 2rem = 32px
20print(f"24px = {px_to_em(24, 16)}em") # 24px = 1.5em
21Le unità REM (root em) sono relative alla dimensione del font dell'elemento radice (tipicamente l'elemento <html>), mentre le unità EM sono relative alla dimensione del font del loro elemento padre. Questa differenza chiave significa che le unità REM mantengono dimensioni coerenti in tutto il documento indipendentemente dall'annidamento, mentre le unità EM possono creare un effetto di accumulo quando gli elementi sono annidati.
Non esiste un'unità "migliore" per tutte le situazioni. Una combinazione di unità è tipicamente più efficace:
L'approccio ideale è utilizzare ciascuna unità per ciò che fa meglio all'interno di un sistema coeso.
La dimensione predefinita di 16px è stata stabilita come standard di leggibilità che funziona bene su dispositivi. Le ricerche hanno dimostrato che un testo di circa 16px è ottimale per la lettura sugli schermi a distanze di visione tipiche. Questa predefinizione fornisce anche una buona base per l'accessibilità, assicurando che il testo non sia troppo piccolo per la maggior parte degli utenti.
Sì, CSS supporta valori negativi per molte proprietà utilizzando qualsiasi tipo di unità. Valori negativi per margini, traduzioni e posizioni sono casi d'uso comuni. Il nostro convertitore gestisce correttamente i valori negativi per tutti i tipi di unità.
Le unità EM si accumulano quando gli elementi sono annidati. Ad esempio:
1.parent {
2 font-size: 16px;
3}
4.child {
5 font-size: 1.5em; /* 24px (16px × 1.5) */
6}
7.grandchild {
8 font-size: 1.5em; /* 36px (24px × 1.5) */
9}
10Questo effetto di accumulo può essere utile per creare design proporzionali, ma richiede una gestione attenta per evitare scalature indesiderate.
I display ad alta DPI vengono gestiti automaticamente quando si utilizzano unità relative come REM ed EM. Poiché queste unità si basano sulla dimensione del font piuttosto che sui pixel fisici, si scalano in modo appropriato su schermi ad alta risoluzione. Per immagini e bordi, considera di utilizzare media query con device-pixel-ratio o risoluzione.
Il supporto del browser per le unità REM ed EM nelle media query è migliorato notevolmente. È generalmente consigliato utilizzare unità EM nelle media query perché:
1/* Utilizzando unità EM per le media query */
2@media (min-width: 48em) { /* 768px con base di 16px */
3 /* Stili per tablet */
4}
5
6@media (min-width: 64em) { /* 1024px con base di 16px */
7 /* Stili per desktop */
8}
9La maggior parte degli strumenti di design funziona principalmente con i pixel. Quando implementi design:
Al alcuni strumenti di design hanno plugin che possono aiutare con questo processo di conversione automaticamente.
I browser gestiscono i valori subpixel in modo diverso. Alcuni browser arrotondano al pixel più vicino, mentre altri supportano il rendering subpixel per una scalatura più fluida. Questo può occasionalmente causare lievi incoerenze tra i browser, specialmente con piccoli valori REM/EM o quando si utilizzano trasformazioni. Per la maggior parte dei casi d'uso, queste differenze sono trascurabili.
Non c'è una differenza significativa nelle prestazioni tra l'uso di pixel, REM o unità EM nei browser moderni. La scelta delle unità dovrebbe basarsi sui requisiti di design, sul comportamento reattivo e sulle esigenze di accessibilità piuttosto che su considerazioni di prestazioni.
"CSS Values and Units Module Level 3." W3C Recommendation. https://www.w3.org/TR/css-values-3/
Marcotte, Ethan. "Responsive Web Design." A List Apart, 25 maggio 2010. https://alistapart.com/article/responsive-web-design/
Rutter, Richard. "The Elements of Typographic Style Applied to the Web." http://webtypography.net/
"CSS Units." MDN Web Docs. https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units
"CSS Pixels vs. Physical Pixels." Stack Overflow Documentation. https://stackoverflow.com/questions/8785643/what-exactly-is-the-difference-between-css-pixels-and-device-pixels
Coyier, Chris. "The Lengths of CSS." CSS-Tricks. https://css-tricks.com/the-lengths-of-css/
"Using CSS custom properties (variables)." MDN Web Docs. https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties
"Understanding and Using rem Units in CSS." SitePoint. https://www.sitepoint.com/understanding-and-using-rem-units-in-css/
Smetti di lottare con le conversioni manuali delle unità CSS e lascia che il nostro Convertitore di Unità PX, REM ed EM faccia il lavoro per te. Che tu stia costruendo un sito web reattivo, creando un sistema di design o semplicemente imparando sulle unità CSS, questo strumento ti farà risparmiare tempo e garantirà precisione. Inserisci i tuoi valori ora per vedere quanto può essere facile la conversione delle unità!
Scopri più strumenti che potrebbero essere utili per il tuo flusso di lavoro