Conversor d'Unitats PX, REM i EM: Unitats CSS Essencials Explicades

Introducció a la Conversió d'Unitats CSS

Entendre i convertir entre unitats CSS és essencial per al disseny i desenvolupament web responsiu. Les unitats PX (pixel), REM (root em) i EM són blocs de construcció fonamentals que determinen com es dimensionen i posicionen els elements a través de diferents dispositius i mides de pantalla. Aquesta eina de conversió d'unitats PX, REM i EM us permet traduir fàcilment valors entre aquestes tres unitats CSS crítiques, ajudant-vos a crear dissenys web més flexibles i mantenibles.

Els píxels (PX) són unitats de mida fixa que proporcionen un control precís però manquen d'escalabilitat, mentre que les unitats REM escalen en relació a la mida de la font de l'element arrel, i les unitats EM escalen en relació a la mida de la font del seu element pare. Convertir entre aquestes unitats pot ser un repte, especialment quan es treballa amb dissenys complexos o quan es donen suport a funcions d'accessibilitat com el redimensionament del text. El nostre conversor de PX, REM i EM simplifica aquest procés, permetent-vos centrar-vos en la creació de dissenys bonics i responsius.

Entenent les Unitats CSS: PX, REM i EM

Què són els Píxels (PX)?

Els píxels (PX) són la unitat CSS més bàsica i comunament utilitzada. Un píxel és un sol punt en una reixeta d'imatge digital i representa l'element més petit controlable en una pantalla. En CSS, els píxels proporcionen una unitat de mesura de mida fixa que roman constant independentment d'altres factors d'estil.

1.element {
2  width: 200px;
3  font-size: 16px;
4  margin: 10px;
5}
6

Característiques clau dels píxels:

Unitats de mida fixa que no escalen automàticament
Proporcionen un control precís sobre les dimensions dels elements
Fàcil d'entendre i visualitzar
Menys ideals per al disseny responsiu i l'accessibilitat

Què són les Unitats REM?

Les unitats REM (root em) són unitats relatives que escalen en funció de la mida de la font de l'element arrel (normalment l'element <html>). Per defecte, la majoria dels navegadors estableixen la mida de la font arrel a 16px, fent que 1rem sigui igual a 16px a menys que es canviï explícitament.

1html {
2  font-size: 16px; /* Per defecte a la majoria dels navegadors */
3}
4
5.element {
6  width: 12.5rem; /* Equivalent a 200px amb la mida de font arrel per defecte */
7  font-size: 1rem; /* Equivalent a 16px */
8  margin: 0.625rem; /* Equivalent a 10px */
9}
10

Característiques clau de les unitats REM:

Escalen en relació a la mida de la font de l'element arrel
Mantenen proporcions consistents a tot el document
Donen suport a una millor accessibilitat a través d'ajustaments globals de mida de font
Ideals per a dissenys i tipografies responsives

Què són les Unitats EM?

Les unitats EM són unitats relatives que escalen en funció de la mida de la font del seu element pare. Si no s'especifica cap mida de font per al pare, les EM faran referència a la mida de font heretada.

1.parent {
2  font-size: 20px;
3}
4
5.child {
6  font-size: 0.8em; /* Equivalent a 16px (20px × 0.8) */
7  margin: 0.5em; /* Equivalent a 8px (16px × 0.5) */
8}
9

Característiques clau de les unitats EM:

Escalen en relació a la mida de la font del seu element pare
Creen un efecte de cascada quan s'hi aniden
Útils per crear dissenys proporcionals dins dels components
Poden ser complexes de gestionar amb elements profundament anidats

Formules i Càlculs de Conversió

Entendre les relacions matemàtiques entre les unitats PX, REM i EM és crucial per a conversions precises. Aquí teniu les fórmules utilitzades en el nostre conversor:

Conversió de PX a REM

Per convertir píxels a unitats REM, divideix el valor en píxels per la mida de la font arrel:

$REM = \frac{PX}{midaFontArrel}$

Per exemple, amb la mida de font arrel per defecte de 16px:

16px = 1rem
24px = 1.5rem
8px = 0.5rem

Conversió de PX a EM

Per convertir píxels a unitats EM, divideix el valor en píxels per la mida de la font de l'element pare:

$EM = \frac{PX}{midaFontPare}$

Per exemple, amb una mida de font pare de 16px:

16px = 1em
24px = 1.5em
8px = 0.5em

Conversió de REM a PX

Per convertir unitats REM a píxels, multiplica el valor REM per la mida de la font arrel:

$PX = REM \times midaFontArrel$

Per exemple, amb la mida de font arrel per defecte de 16px:

1rem = 16px
1.5rem = 24px
0.5rem = 8px

Conversió de EM a PX

Per convertir unitats EM a píxels, multiplica el valor EM per la mida de la font de l'element pare:

$PX = EM \times midaFontPare$

Per exemple, amb una mida de font pare de 16px:

1em = 16px
1.5em = 24px
0.5em = 8px

Conversió de REM a EM

Per convertir unitats REM a unitats EM, cal tenir en compte tant la mida de la font arrel com la mida de la font de l'element pare:

$EM = REM \times \frac{midaFontArrel}{midaFontPare}$

Si tant la mida arrel com la del pare són iguals (per exemple, 16px), llavors 1rem = 1em.

Conversió de EM a REM

Per convertir unitats EM a unitats REM, utilitza la següent fórmula:

$REM = EM \times \frac{midaFontPare}{midaFontArrel}$

De nou, si ambdues mides són iguals, llavors 1em = 1rem.

Com Utilitzar el Conversor d'Unitats PX, REM i EM

La nostra eina de conversió facilita la traducció de valors entre unitats PX, REM i EM. Aquí teniu una guia pas a pas per utilitzar el conversor de manera efectiva:

Ús Bàsic

Introduïu un valor en qualsevol camp d'entrada (PX, REM o EM)
El conversor calcularà automàticament i mostrarà els valors equivalents en les altres dues unitats
Ajusteu la mida de la font arrel (per defecte: 16px) per veure com afecta les conversions REM
Ajusteu la mida de la font pare (per defecte: 16px) per veure com afecta les conversions EM
Utilitzeu el botó de còpia al costat de cada camp per copiar el valor al vostre porta-retalls

Funcions Avançades

Comparació visual: L'eina proporciona una representació visual de les mides relatives de cada unitat
Control de precisió: Tots els càlculs mantenen 4 decimals per a la precisió
Valors negatius: El conversor admet valors negatius, que són vàlids en CSS per a propietats com marges
Actualitzacions en temps real: Qualsevol canvi en els valors d'entrada o les configuracions de mida de font actualitza instantàniament tots els càlculs

Consells per a Conversió Precisa

Per a les conversions REM més precises, establiu la mida de la font arrel per coincidir amb el valor de la mida de font de l'element <html> del vostre projecte
Per a conversions EM precises, establiu la mida de la font pare per coincidir amb la mida de font de l'element pare amb el qual esteu treballant
Recordeu que les mides de font per defecte del navegador poden variar, tot i que 16px és el més comú per defecte

Casos d'Ús Pràctics per a la Conversió d'Unitats CSS

Entendre quan utilitzar cada unitat CSS i com convertir entre elles és crucial per a un desenvolupament web efectiu. Aquí teniu algunes aplicacions pràctiques i escenaris on el nostre conversor resulta inavaluable:

Disseny Web Responsiu

Convertir entre unitats és essencial per crear dissenys realment responsius:

Enfocament mòbil primer: Comenceu amb un disseny base en píxels, després convertiu a unitats relatives per a l'escalabilitat
Gestió de punts de trencament: Utilitzeu REMs per a un espaiat consistent a través de diferents mides de visualització
Escalat de components: Assegureu-vos que els elements de la interfície mantinguin relacions proporcionals quan canvii la visualització

1/* Convertir valors fixos en píxels a unitats REM responsives */
2.container {
3  /* De: padding: 20px; */
4  padding: 1.25rem; /* 20px ÷ 16px = 1.25rem */
5  
6  /* De: margin-bottom: 32px; */
7  margin-bottom: 2rem; /* 32px ÷ 16px = 2rem */
8}
9

Millores d'Accessibilitat

Utilitzar unitats relatives millora l'accessibilitat respectant les preferències de l'usuari:

Redimensionament de text: Quan els usuaris canvien la mida de la font del seu navegador, els dissenys basats en REM s'adapten adequadament
Funcionalitat de zoom: Les unitats relatives asseguren que els dissenys es mantinguin proporcionals quan els usuaris facin zoom
Respecte a les preferències de l'usuari: Els dissenys basats en unitats relatives honoren les configuracions de mida de font per defecte de l'usuari

Sistemes de Disseny Basats en Components

Els sistemes de disseny moderns es beneficien d'un ús reflexiu de les unitats:

Components consistents: Utilitzeu REM per a la consistència global d'espaiat i dimensionament
Mòduls autoconclosos: Utilitzeu EM per a elements que han d'escalar amb els seus components pare
Tokens de disseny: Convertiu entre unitats quan implementeu tokens de disseny a través de diferents contextos

Sistemes Tipogràfics

Crear una tipografia harmònica requereix una selecció acurada d'unitats:

Escales tipogràfiques: Definiu una escala tipogràfica en REMs per a una progressió consistent
Alçades de línia: Utilitzeu valors sense unitat o EMs per a alçades de línia proporcionals
Text responsiu: Ajusteu les mides de font a través de punts de trencament mentre manteniu proporcions

1/* Sistema tipogràfic utilitzant unitats 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 */
8

Dissenys Perfectes en Píxels

En implementar dissenys d'eines com Figma o Photoshop:

Transferència de disseny: Converteix valors en píxels dels fitxers de disseny a REM/EM per al desenvolupament
Mantenir precisió: Assegureu-vos que l'espaiat i la mida siguin exactes mentre utilitzeu unitats relatives
Integració de sistemes de disseny: Traduïu tokens de disseny basats en píxels a unitats relatives

Altres Unitats CSS

Si bé PX, REM i EM són les unitats més comunes, hi ha alternatives que val la pena considerar:

Unitats de Vista (VW, VH)

VW (amplada de la vista): 1vw és igual a l'1% de l'amplada de la vista
VH (altura de la vista): 1vh és igual a l'1% de l'altura de la vista
Cas d'ús: Crear elements que escalen directament amb la mida de la vista

Percentatge (%)

Relatiu a les dimensions de l'element pare
Cas d'ús: Dissenys fluids i amplades responsives

Unitats CH

Basades en l'amplada del caràcter "0"
Cas d'ús: Crear contenidors amb un nombre específic de caràcters per línia

Unitats EX

Basades en l'altura del caràcter minúscul "x"
Cas d'ús: Ajustar la tipografia, especialment per a ajustaments d'alçada x

L'Evolució de les Unitats CSS en el Desenvolupament Web

La història de les unitats CSS reflecteix l'evolució més àmplia del disseny web, des de dissenys estàtics fins a les aproximacions responsives i accessibles d'avui.

Disseny Web Primerenc (1990s)

En els primers dies de CSS, els píxels regnaven suprems. Els dissenyadors web creaven dissenys d'amplada fixa, normalment de 640px o 800px d'ample per acomodar les resolucions de pantalla comunes. L'accessibilitat i la diversitat de dispositius no eren preocupacions importants, i el control perfecte era l'objectiu principal.

L'Ascens dels Dissenys Fluids (Principis dels 2000s)

A mesura que les mides de pantalla es diversificaven, els dissenys basats en percentatges guanyaven popularitat. Els dissenyadors van començar a crear dissenys més flexibles, tot i que la tipografia sovint seguia sent en unitats de píxels. Aquesta era va veure la introducció de les unitats EM en CSS, tot i que la seva adopció era limitada a causa de la complexitat de gestionar les mides de font en cascada.

Revolució Mòbil (2007-2010)

La introducció de l'iPhone el 2007 va transformar el disseny web. De sobte, els llocs web havien de funcionar en pantalles tan petites com 320px d'ample. Això va catalitzar l'interès en tècniques de disseny responsiu i unitats relatives. Les limitacions de les unitats EM (particularment l'efecte de cascada) es van fer més evidents a mesura que els dissenys es tornaven més complexos.

Era del Disseny Web Responsiu (2010-2015)

L'article influent d'Ethan Marcotte sobre el disseny web responsiu el 2010 va canviar la manera com els desenvolupadors abordaven les unitats CSS. La unitat REM es va introduir en CSS3, oferint els avantatges de l'escalat relatiu sense les complicacions de les unitats EM. El suport dels navegadors per a les unitats REM va créixer constantment durant aquest període.

Enfoques CSS Moderns (2015-Actualitat)

El desenvolupament web d'avui abraça una combinació d'unitats per a diferents propòsits:

Unitats REM per a la consistència global i l'accessibilitat
Unitats EM per a l'escalat específic dels components
Píxels per a vores i detalls petits
Unitats de vista per a elements realment responsius
Funció CSS calc() per a combinar diferents tipus d'unitats

Aquesta evolució reflecteix la transició del web d'un mitjà basat en documents a una plataforma d'aplicacions complexa que ha de funcionar a través de nombrosos dispositius i contextos.

Exemples de Codi per a la Conversió d'Unitats

Funcions de Conversor d'Unitats JavaScript

1// Convertir entre unitats PX, REM i 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// Exemple d'ús
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
31

Propietats Personalitzades CSS per a la Conversió d'Unitats

1:root {
2  /* Mides de font base */
3  --mida-font-arrel: 16px;
4  --mida-font-base: var(--mida-font-arrel);
5  
6  /* Valors de píxels comuns convertits a REM */
7  --espai-4px: 0.25rem;
8  --espai-8px: 0.5rem;
9  --espai-16px: 1rem;
10  --espai-24px: 1.5rem;
11  --espai-32px: 2rem;
12  --espai-48px: 3rem;
13  
14  /* Escala tipogràfica */
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/* Exemple d'ús */
24.card {
25  padding: var(--espai-16px);
26  margin-bottom: var(--espai-24px);
27  font-size: var(--text-base);
28}
29
30.card-title {
31  font-size: var(--text-xl);
32  margin-bottom: var(--espai-8px);
33}
34

Mixin SCSS per a la Conversió d'Unitats

1// Funcions SCSS per a la conversió d'unitats
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// Exemple d'ús
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    // Utilitzant la mida de font pare (18px) per a la conversió EM
22    padding: px-to-em(16, 18);
23    margin-bottom: px-to-em(24, 18);
24  }
25}
26

Conversor d'Unitats en Python

1def px_to_rem(px, root_font_size=16):
2    """Convertir píxels a unitats REM"""
3    return px / root_font_size
4
5def rem_to_px(rem, root_font_size=16):
6    """Convertir unitats REM a píxels"""
7    return rem * root_font_size
8
9def px_to_em(px, parent_font_size=16):
10    """Convertir píxels a unitats EM"""
11    return px / parent_font_size
12
13def em_to_px(em, parent_font_size=16):
14    """Convertir unitats EM a píxels"""
15    return em * parent_font_size
16
17# Exemple d'ús
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
21

Preguntes Freqüents

Quina és la diferència entre les unitats REM i EM?

Les unitats REM (root em) són relatives a la mida de la font de l'element arrel (normalment l'element <html>), mentre que les unitats EM són relatives a la mida de la font del seu element pare. Aquesta diferència clau significa que les unitats REM mantenen una mida consistent a través del vostre document independentment de l'anidament, mentre que les unitats EM poden crear un efecte de compounding quan els elements estan anidats.

Quina unitat CSS és la millor per al disseny responsiu?

No hi ha una "millor" unitat per a totes les situacions. Una combinació d'unitats és típicament la més efectiva:

Unitats REM per a tipografia i espaiat consistent
Unitats EM per a l'escalat específic dels components
Percentatges o unitats de vista per a les amplades de disseny
Píxels per a vores i petits detalls

L'enfocament ideal és utilitzar cada unitat per al que millor s'adapta dins d'un sistema cohesionat.

Per què els navegadors per defecte estableixen la mida de font a 16px?

El 16px per defecte es va establir com un estàndard de llegibilitat que funciona bé a través de dispositius. La investigació ha demostrat que el text al voltant de 16px és òptim per a la lectura en pantalles a distàncies de visualització típiques. Aquest valor per defecte també proporciona una bona base per a l'accessibilitat, assegurant que el text no sigui massa petit per a la majoria dels usuaris.

Puc utilitzar valors negatius amb aquestes unitats?

Sí, CSS admet valors negatius per a moltes propietats utilitzant qualsevol tipus d'unitat. Els marges negatius, les traduccions i les posicions són casos d'ús comuns per a valors negatius. El nostre conversor gestiona correctament els valors negatius per a tots els tipus d'unitats.

Com funcionen les unitats EM amb elements anidats?

Les unitats EM es composen quan els elements estan anidats. Per exemple:

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}
10

Aquest efecte de compounding pot ser útil per crear dissenys proporcionals, però requereix una gestió acurada per evitar escalats no desitjats.

Com gestionen els navegadors el renderitzat subpixel amb unitats relatives?

Els navegadors gestionen valors subpixel de manera diferent. Alguns navegadors arrodoneixen al píxel més proper, mentre que altres admeten el renderitzat subpixel per a un escalat més suau. Això pot ocasionar ocasionalment petites inconsistències entre navegadors, especialment amb petits valors REM/EM o quan s'utilitzen transformacions. Per a la majoria dels casos d'ús, aquestes diferències són negligibles.

Quin és l'impacte en el rendiment de l'ús de diferents unitats CSS?

No hi ha una diferència significativa en el rendiment entre l'ús de píxels, REM o EM en navegadors moderns. L'elecció d'unitats hauria de basar-se en requisits de disseny, comportament responsiu i necessitats d'accessibilitat en lloc de consideracions de rendiment.

Referències i Lectures Addicionals

"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 de maig de 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/

Proveu el Nostre Conversor d'Unitats Avui

Deixeu de lluitar amb conversions manuals d'unitats CSS i deixeu que el nostre Conversor d'Unitats PX, REM i EM faci la feina per vosaltres. Tant si esteu construint un lloc web responsiu, creant un sistema de disseny o simplement aprenent sobre unitats CSS, aquesta eina us estalviarà temps i assegurarà precisió. Introduïu els vostres valors ara per veure com de fàcil pot ser la conversió d'unitats!

Conversor de PX a REM i EM: Calculadora d'Unitats CSS

Conversor d'unitats PX, REM i EM

Fórmules de Conversió

Documentació