Converteix entre píxels (PX), rem arrel (REM) i em (EM) unitats CSS amb aquesta senzilla calculadora. Essencial per al disseny i desenvolupament web responsiu.
Converteix entre píxels (PX), root em (REM) i em (EM). Introdueix un valor en qualsevol camp per veure els valors equivalents en les altres unitats.
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.
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}
6Característiques clau dels píxels:
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}
10Característiques clau de les unitats REM:
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}
9Característiques clau de les unitats EM:
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:
Per convertir píxels a unitats REM, divideix el valor en píxels per la mida de la font arrel:
Per exemple, amb la mida de font arrel per defecte de 16px:
Per convertir píxels a unitats EM, divideix el valor en píxels per la mida de la font de l'element pare:
Per exemple, amb una mida de font pare de 16px:
Per convertir unitats REM a píxels, multiplica el valor REM per la mida de la font arrel:
Per exemple, amb la mida de font arrel per defecte de 16px:
Per convertir unitats EM a píxels, multiplica el valor EM per la mida de la font de l'element pare:
Per exemple, amb una mida de font pare de 16px:
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:
Si tant la mida arrel com la del pare són iguals (per exemple, 16px), llavors 1rem = 1em.
Per convertir unitats EM a unitats REM, utilitza la següent fórmula:
De nou, si ambdues mides són iguals, llavors 1em = 1rem.
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:
<html> del vostre projecteEntendre 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:
Convertir entre unitats és essencial per crear dissenys realment responsius:
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}
9Utilitzar unitats relatives millora l'accessibilitat respectant les preferències de l'usuari:
Els sistemes de disseny moderns es beneficien d'un ús reflexiu de les unitats:
Crear una tipografia harmònica requereix una selecció acurada d'unitats:
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 */
8En implementar dissenys d'eines com Figma o Photoshop:
Si bé PX, REM i EM són les unitats més comunes, hi ha alternatives que val la pena considerar:
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.
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.
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.
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.
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.
El desenvolupament web d'avui abraça una combinació d'unitats per a diferents propòsits:
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.
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
311: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}
341// 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}
261def 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
21Les 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.
No hi ha una "millor" unitat per a totes les situacions. Una combinació d'unitats és típicament la més efectiva:
L'enfocament ideal és utilitzar cada unitat per al que millor s'adapta dins d'un sistema cohesionat.
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.
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.
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}
10Aquest efecte de compounding pot ser útil per crear dissenys proporcionals, però requereix una gestió acurada per evitar escalats no desitjats.
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.
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.
"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/
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!
Descobreix més eines que podrien ser útils per al teu flux de treball