Como usar unidades rem de css para paginas responsivas
CSS tiene muchas unidades de medidas, algunas absolutas (px) y otras relativas (rem). Te explico como usar rem para hacer tu página responsiva.
¿Que es la unidad rem?
Significa “root em” y es una unidad relativa basada en la medida del font size del “root element” y por root element entiéndase el elemento <html>.
¿Como funciona?
La mayoría de los navegadores ponen el font-size por defecto de el elemento html a 16px. Entonces sí a cualquier propiedad de CSS le pones 1rem es el equivalente a hacer 16px.
Veamos un ejemplo, pongamos el font-size a 10px en el elemento html (el elemento root)
html {
font-size: 10px;
}
h1 {
font-size: 4rem; /* 10 * 4 = 40px */
}
main {
width: 60rem; /* 60 * 10 = 600px */
}
Si ponemos 10px en nuestro elemento root, 2rem equivalen a 20px, 7rem a 70px y así sucesivamente.
¿Y para qué sirve?
Usar rem en todas las unidades de tu CSS te permite aumentar el tamaño tu pagina (ya sea por cambio de diseño o por tamaño de la pantalla) con solo aumentar o disminuir el font-size en el elemento html .
Aumentar el tamaño de tu pagina para aprovechar la mayor cantidad de espacio disponible es ofrecerle a tus usuarios una mejor experiencia visual y de accesibilidad a tu página.
html {
font-size: 16px;
}
@media only screen and (min-width: 720px) {
html {
font-size: 18px;
}
}
@media only screen and (min-width: 960px) {
html {
font-size: 20px;
}
}
@media only screen and (min-width: 1240px) {
html {
font-size: 24px;
}
}
h1 {
font-size: 3.5rem; /* 56px, 63px, 70px o 84px */
}
h2 {
font-size: 2.5rem; /* 40px, 45px, 50px, 60px */
}
h3 {
font-size: 2rem; /* 32px, 36px, 40px, 48px */
}
Usando media queries podemos aumentar o disminuir el tamaño del font-size del html. Luego usar rem en los font-size y width para aprovechar mejor el espacio disponible en la pantalla.
Conclusión
CSS nos da muchas herramientas para hacer nuestras paginas responsive pero rem es una de las más importantes ya que te permite escalar tu pagina relativamente a único elemento html (root) de la página.