InstagramTwitterYoutubeGithubLinkedInStackOverflow

¿Qué es 1 rem?

Freddy Montes - Frontend Developer, Designer and TeacherFreddy Montes|

Al igual que px o % es una unidad de CSS que te permite establecer longitudes en tú página web, pero dicha longitud es dependiente del elemento raíz (Root element), de allí su nombre.

¿Qué es el root element?

El root element la caja que contiene el resto de elementos de la página web, es la etiquetas html. Lo especial de esta caja es que su font-size va a servir como base para establecer las longitudes de los elementos que usen medidas rem.

🌟Por defecto el tamaño de fuente del root element es 16px.

¿Cómo afecta el root element al rem?

Entonces, basado en que el font-size del root element es 16px, cuando tú haces por ejemplo:

El ancho y el alto de la caja se va a traducir en 16 x 16 píxeles. Es decir, 1rem es igual al font-size del root element y como lo sospechas, al ser relativo:

  1. 0.5rem es 8px (16 * 0.5)
  2. 2rem es 32px (16 * 2)
  3. 4rem es 64px (16 * 4) y así sucesivamente.

¿Cómo cambiar el font size del root element?

Necesitas añadir una regla a tu hoja de estilos, donde especifiques el font-size que quieres usar.

Por ejemplo, para establecer el font-size del elemento raíz a 14px, usa la siguiente regla:

Al hacer este cambio todas las longitudes que usaste en tus estilos van a ser relativas a 14px entonces.

  1. 0.5rem es 7px (14 * 0.5)
  2. 2rem es 28px (14 * 2)
  3. 4rem es 56px (14 * 4) y así sucesivamente.

Conclusión

En resumen, rem es una unidad de medida relativa que se basa en el font-size del elemento raíz (root element) de tú página web y esto te permite establecer longitudes relativas a dicho elemento y con este patrón puedes hacer tus páginas web y aplicaciones más “responsive”.

Twitter

Gracias por leer esta entrada del blog. Cualquier comentario o pregunta llegame a mi Twitter.

Tweet Me

Copyright © 2023. Design and code by myself with Next.js. Fork it and create yours