Px contra Em contra Rem: ¿Qué unidad de CSS deberías usar?

Aprenderá algunas unidades de CSS para personalizar el tamaño de fuente del texto al crear páginas web. Hay muchas unidades, como pt, pc, ex, etc., pero en la mayoría de los casos debe centrarse en las tres unidades más populares: px, em y rem. Muchos desarrolladores no suelen entender cuáles son las diferencias entre estas unidades; por lo tanto, a continuación se muestra una explicación detallada de estas unidades.

Antes de continuar, tenga en cuenta que hay dos tipos de unidades de longitud: absoluto y relativo.

Longitudes absolutas

Las unidades de longitud absoluta son fijas, y una longitud expresada en cualquiera de ellas aparecerá exactamente como ese tamaño.

Las unidades de longitud absoluta no se recomiendan para usar en pantalla, porque los tamaños de pantalla varían mucho. Sin embargo, se pueden usar si se conoce el medio de salida, como para un diseño impreso.

Longitudes relativas

Las unidades de longitud relativa especifican una longitud relativa a otra propiedad de longitud. Las unidades de longitud relativa escalan mejor entre diferentes medios de renderizado.

1. Px (píxel)

Pixel es probablemente la unidad más utilizada en CSS y es muy popular cuando se trata de configurar el tamaño de fuente del texto en las páginas web. Un píxel (1px) se define como 1/96 de pulgada en medios impresos.

Sin embargo, en las pantallas de las computadoras, generalmente no se relacionan con medidas reales como centímetros y pulgadas como puede pensar; simplemente se definen como pequeños pero visibles. Lo que se considera visible depende del dispositivo.

Los diferentes dispositivos tienen una cantidad diferente de píxeles por pulgada en sus pantallas, lo que se conoce como densidad de píxeles. Si usó la cantidad de píxeles físicos en la pantalla de un dispositivo para determinar el tamaño del contenido en ese dispositivo, tendría problemas para hacer que las cosas se vean iguales en pantallas de todos los tamaños.

Ahí es donde entra en juego la proporción de píxeles del dispositivo. Básicamente, es solo una forma de calcular cuánto espacio ocupará un píxel CSS (1 px) en la pantalla del dispositivo que permitirá que se vea del mismo tamaño en comparación con otro dispositivo.

A continuación se muestra un ejemplo:-

<clase div="envase">
<división>
<h1>Este es un párrafo</h1>
<pag>
 Lorem ipsum, dolor sit amet consectetur adipisicing elit.
 Reprehenderit incidunt perferendis iure veritatis cupiditate delectus
 omnis en! Officiis praesentium oficia, nemo veniam consequatur
 nostrum sunt aliquid ipsam, corporis quas quaerat. lorem ipsum dolor
 sit amet consectetur adipisicing elit. Hic quam beatae voluptatibus
 amet possimus iure impedit asumenda distintio aliquid debitis, autem
 vel ullam aut, quod corporis ratione atque ducimus dolorum.
</pag>
</div>
</div>

.envase {
 ancho: 100%;
 altura: 100vh;
 pantalla: flexible;
 justificar-contenido: centro;
 alinear elementos: centro;
}
.envasedivisión {
 ancho máximo: 500px;
 relleno: 5px 20px;
 borde: 1px gris sólido;
 borde-radio: 10px;
}
pag {
 tamaño de fuente: 16px;
}

producción

El cuadro superior es cómo se ve cuando se muestra en una pantalla más grande como una computadora portátil, y el cuadro inferior es cómo se ve cuando se muestra en una pantalla más pequeña, como un teléfono.

Observe cómo el texto en ambos cuadros es del mismo tamaño. Básicamente, así es como funciona el píxel. Ayuda a que el contenido web (no solo el texto) tenga el mismo tamaño en todos los dispositivos.

2. Em (M)

La unidad em obtuvo su nombre de la letra mayúscula 'M' (em) ya que la mayoría de las unidades CSS provienen de la tipografía. Utiliza el tamaño de fuente actual del elemento principal como base. Se puede usar para escalar hacia arriba o hacia abajo el tamaño de fuente de un elemento en función del tamaño de fuente heredado del padre.

Digamos que tiene un div principal que tiene un tamaño de fuente de 16 px. Si crea un elemento de párrafo en ese div y le asigna un tamaño de fuente de 1 em, el tamaño de fuente del párrafo será de 16 px.

Sin embargo, si le da a otro párrafo el tamaño de fuente de 2em, se traducirá a 32px. Considere el siguiente ejemplo:

<clase div="div-uno">
<clase p ="uno-em">1 em basado en 10px</pag>
<clase p ="dos-em">2 em basado en 10px</pag>
</div>
<clase div="div-dos">
<clase p ="uno-em">1 em basado en 10px</pag>
<clase p ="dos-em">2 em basado en 10px</pag>
</div>
</div>

.div-uno {
 tamaño de fuente: 15px;
}
.div-dos {
 tamaño de fuente: 20px;
}
.uno-em {
 tamaño de fuente: 1em;
}
.dos-em {
 tamaño de fuente: 2em;
}

producción

Puede ver cómo em puede escalar el tamaño del texto y cómo se ve afectado por el tamaño de fuente actual heredado del contenedor principal. No es recomendable usarlos, especialmente dentro de páginas estructuradas complejas.

Si no se usa correctamente, puede encontrarse con problemas de escalado en los que los elementos pueden no tener el tamaño adecuado en función de una herencia compleja de tamaños en el árbol DOM.

3. Rem (Root Em)

Rem funciona casi igual que em, pero la principal diferencia es que rem solo hace referencia al tamaño de fuente del elemento raíz en la página en lugar del tamaño de fuente principal. El tamaño de fuente raíz es el tamaño de fuente predeterminado especificado por el usuario en la configuración de su navegador o por usted, el desarrollador.

El tamaño de fuente predeterminado de un navegador web suele ser de 16 píxeles, por lo que 1 rem será de 16 píxeles y 2 rem será de 32 píxeles. Sin embargo, en el caso de que el tamaño de fuente raíz se cambie a 10px, por ejemplo; 1rem será 10px y 2rem será 20px.

Aquí hay un ejemplo para hacer las cosas más claras:

<clase div="div-uno">
<!--EM-->
<clase p ="uno-em">1 em basado en contenedor (40px)</pag>
<clase p ="dos-em">2 em basado en contenedor (40px)</pag>
<!-- REM -->
<clase p ="un rem">1 rem basado en raíz (16px)</pag>
<clase p ="dos rem">2 rem basado en raíz (16px)</pag>
</div>

.div-uno {
 tamaño de fuente: 40px;
}
.uno-em {
 tamaño de fuente: 1em;
}
.dos-em {
 tamaño de fuente: 2em;
}
.one-rem {
 tamaño de fuente: 1 rem;
}
.dos-rem {
 tamaño de fuente: 2rem;
}

producción

Como puede ver, los párrafos definidos con unidades REM no se ven afectados por el tamaño de fuente declarado en nuestro contenedor y se representan estrictamente en relación con el tamaño de fuente raíz definido en el selector de elementos HTML.

Px contra Em contra Rem: ¿Qué unidad es la mejor?

Em no se recomienda debido a la posibilidad de tener una jerarquía compleja de elementos anidados. REM generalmente se escala adecuadamente con el nuevo tamaño de fuente base/predeterminado especificado en la configuración del navegador en lugar de PX. Esto explica por qué debería usar REM cuando trabaja con contenido de texto en sus páginas web. REM gana la carrera. Un mejor diseño y escalado de su contenido con REM agrega estilo a su sitio, ya que es ideal para los creadores de sitios web. Las mediciones puntuales de su contenido dictarán la apariencia de su sitio web, sin embargo, deberá ser creativo.