Diferencia entre REM y EM en CSS

Portada para mostrar el artículo con un fondo de código y el título del post

Las unidades de medida en CSS pueden ser algo complejas y hoy quiero explicar y dar mi opinión sobre la diferencia entre rem y em que a veces puede confundirse, pero no es nada complicado.

Hacer artículos técnicos todavía me cuesta por síndrome de la impostora, pero si ves algún error o algo con lo que no estés de acuerdo, dímelo que estaré encantada de ver otro punto de vista y rectificar.

Unidades de medida en CSS

Muchas veces, pienso que todos decimos que sabemos de CSS, al principio parece sencillo, coges la herramienta DevTools y solo tienes que cambiar un poco las medidas ¿verdad? Donde pone un padding de 15px, voy a probar así a ojo 25 y si queda bien… ¡Ya lo tenemos! ¡Cómo controlo de CSS!

Con todas las medidas y los viewports que tenemos hoy en día, nos recomiendan desde los estándares de desarrollo web que usemos unidades relativas, sobre todo rem y em.

Ya que estamos, te voy a definir algunos de las unidades que puedes ver en cualquier archivo de CSS:

Unidades Absolutas

  • Pixeles: Los pixeles se consideran una unidad absoluta porque dependen de la resolución del dispositivo en el que lo visualices. Muchas veces, nos pueden dar problemas cuando tenemos elementos que pueden cambiar de tamaño, por eso, se recomienda el uso exactamente para eso, cuando utilizamos elementos que no vayan a cambiar de tamaño.

Unidades Relativas

  • Porcentaje: Es la que más se usa. Se usa por defecto en los elementos HTML
  • Rem: Esta es la que utilizo yo habitualmente. Tiene como referencia la medida de font-size del navegador, que casi siempre es de 16px, si hemos definido nosotros otra, pues será esa otra medida. Es decir, que 1rem será igual a 16px.
  • Em: En cambio, em hace referencia al font-size del elemento actual. Es decir, si nos encontramos en un elemento con un font-size especifico, lo calculará en ese elemento. Si no hay ninguna medida declarada, calculará el valor del elemento «padre».
  • Max-width /Max-Height: Coloca el máximo ancho o alto de un elemento.
  • Min-width / Min- Height: Coloca el mínimo ancho o alto de un elemento.
  • Vw (Viewport width): Es el ancho del viewport, esta medida es cuando queremos usar el ancho, es decir cuando queremos que ocupe el 100% del ancho será 100vw, si queremos usar solo un 10% será 10vw. Acuerdate siempre, que el viewport no es igual que resolución de pantalla.
  • Vh (Viewport Height): Esto es igual que el anterior pero con el ancho del viewport.

Diferencia entre REM y EM

Bueno, en principio eso era un artículo sobre rem y em y al final me he venido arriba y me he currado un artículo con bastantes medidas relativas y alguna absoluta. ¿Bien no?

Espero que te haya quedado claro las definiciones de todas las medidas, si hay algo que tienes duda, escríbeme sin problema.

¿Cuándo uso Rem y em?

Bueno Marta, muy bonito si, pero ¿Cuándo uso rem y cuando em?

Accesibilidad en medidas relativas

Para mi, la accesibilidad es una acto de democratización al acceso de cualquier tipo de contenido digital, es la reivindicación (como me gusta esta palabra) del derecho de una persona con ciertas capacidades diferentes a acceder a las mismas plataformas.

Y no solo vamos a hablar de personas con problemas de visión o algún tipo de problema, la accesibilidad también cuenta que no puedes poner un menú a 10px o un párrafo a 14px, por favor, ESO NO LO VE NADIE. Vengo a revindicar un poco que pensemos un poco en el usuario que va a ver nuestro proyecto web.

No soy ninguna especialista en accesibilidad (tema pendiente), pero en este caso las unidades relativas favorecen a la accesibilidad. Solo intentad hacer una prueba (grabaré un vídeo, lo prometo):

  • Hacer un pequeño html con un título y un pequeño texto (un parráfo).
  • En el CSS pon las medidas en px.
  • Luego vete a la configuración de tu navegador, y aumenta la fuente a grande por ejemplo.
  • Mira si tu html se ve más grande ¿no, verdad?
  • Ahora cambia las medidas de px en rem.
  • Comprueba ahora el html. ¿Se ve más grande no? Pues ya lo tenemos.

Para la accesibilidad es siempre mucho mejor utilizar unidades relativas, no solo hay que pensar en lo que te viene bien a ti cuando desarrollas un proyecto, hay que pensar en la igualdad, y que todos tenemos el derecho de acceder al mismo contenido.

¿Entonces dejamos de usar PX?

No, hombre. ¿Quién ha dicho eso?

Al final, hay que usar las dos medidas, dependiendo de qué estemos maquetando.

Al final, las unidades relativas depende de algo, de otra medida. Por ejemplo, el ancho del viewport: depende del tipo de pantalla que estemos utilizando. En cambio, las unidades absolutas se usan cuando no el elemento no es variable.

Espero que haya quedado claro y que no tengas dudas de cuándo usar uno u otra medida, aunque la persona que mejor lo sabes eres tú, porque todo depende mucho de tu proyecto.

Si tienes cualquier duda, comenta o rellena el formulario de contacto.

Imagen destacada: https://www.shutterstock.com/es/image-photo/software-development-source-code-programming-writing-706676509

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Responsable: Marta Torre Ajo.
Finalidad: Los datos que te pido son los mínimos necesarios para poder responder a las consultas que realices.
Legitimación: Aceptación expresa de la política de privacidad.
Destinatarios: No cederé nunca tus datos a terceros, salvo obligación legal.
Derechos: En cualquier momento puedes limitar, recuperar y borrar tu información.
Información adicional: Puedes consultar la información detallada en este enlace.

Ir arriba Ir al contenido