Uso de REM en CSS para Fuentes y Dimensiones
Contenido del curso
Yeisson Stik Gutierrez Rivera
Javier Romero
Harrinson Quintero
Efraín Hernández García
Anthony Ismael Manotoa Moreno
Jesus Velasco
marco antonio
Juan Christopher
Julian Camilo Carvajal Mellizo
Anderson Josué Oroya Silva
Andrés Felipe Lopez gomez
Edison Naranjo
Jose Luis Barbosa Cepeda
Nicolás Leal
Bryan Gama Solórzano
Sura Naileth Cedeño Lopez
Team Platzi
Sebastian Cifuentes
Jesus Velasco
Carlos Eduardo Gomez García
Joel Angel David Barrantes Palacios
Eduard Godi
Ricardo Andrés Pabón Rincón
Juan Christopher
Yeicatl Ivan Cuauhtecatl Monroy
Juan Christopher
Mauricio Andres Pacheco Perez
Jesús Miguel Quinto Teran
Jazmín Lizette Sánchez Neira
Aldair Mamani Montalvo
Jhonatan Villamizar
Héctor Alonso Padilla Ramírez
Axl Reyes
Henry Alexander Velásquez Rosas
Ines Valeria Foglino
Henry Alexander Velásquez Rosas
Daniel G. Parrilla
César Palma
Gustavo Manzano Meléndez
Bernardo Ayala Montezuma
Jonathan Macario
Julian Camilo Carvajal Mellizo
Mauricio Moreno Morales
Julian Camilo Carvajal Mellizo
Ramdhei López Arcila
Aldo Miguel Ortiz Parodi
Nicoll Idaly Angulo Mejia
Roman Augusto Tacconi Barraza
Andres Mena Dorantes
Luis David Arias Manjarrez
REM : funciona igual que el em, con la diferencia que es relativo al valor de la fuente del elemento html, y no tiene en cuenta el valor heredado o del elemento que lo contiene.
Por defecto el html viene con un tamaño de fuente de 16px asi que siempre . 1 REM = 16PX . Si queremos aplicar rem de una forma mas sencilla para no tener que hacer tantos calculos asemos lo siguiente . vamos a reescribir en css nuestro html
html { font-size: 62.5%; }
esto lo que hara es darle a el html un valor de 10px ya que 16px - 62.5% = 10px
ahora si por ejemplo a una etiqueta le asignamos 2rem este hara referencia a 20px, o si por ejemplo le damos un valor de 1.5rem su valor sera de 15px
bro gracias por tu aporte :)
Excelente aporte... Gracias
Algo importante que mencionó Diego en un Live que el hizo. Es muy importante usar rem para las fuentes ya que hay gente con problemas de vista que puede que la letra sea muy pequeña para ellos y poco legible. Y al usar rem, damos la oportunidad de cambiar el tamaño de fuente desde el navegador de su dispositivo. Algo que no es posible hacer si usamos medidas absolutas.
Gracias, justo esto que acabas de decir creo que faltó añadirle a la clase, la razón para usar el 62.5% y no directamente los 10px.
Donde puedo ver ese live?
ok sere un buen desarrollador y usare a REM XD
!rem
¡Viva REM y RAM y todo RE:Zero!
Ahora me voy a sentir mal cada vez que desarrolle porque la voy a estar utilizando así sin más :(
++Unidades absolutas++ Generalmente se usa el pixel "px".
h1{ width: 500px; }
El problema de usar medidas absolutas es que pueden ser desproporcionadas para distintos tipos de dispositivos. ++Unidades Relativas++ * Porcentaje
/*Ocupará todo el ancho de la pantalla sin importar el tamaño*/ h1{ width: 100%; }
em Depende exclusivamente del cuerpo tipográfico. Es decir del font-size de la etiqueta de su elemento padre.
body{ font-size: 20px; } h1{ font-size: 2em; /* 2 x 20 = 40px */ }
Lo bueno de esta unidad es que si en un futuro modificamos el valor del font-size, entonces sus otros valores se ajustarán como podría pasar en el siguiente ejemplo de código.
p { font-size: 24px; margin-top: 1em; /* 1 x 24 = 24px */ margin-bottom: 1em; /* 1 x 24 = 24 px*/ }
Lo malo, es que si lo usamos como el profesor planteó como un problema al usar em, podríamos perder la cuenta de cómo calcular el em si es que tenemos muchos elementos anidados (un elemento dentro de otro) ya que depende de su padre directo.
++rem (root em)++ En este caso, rem siempre va a depender del elemento raíz, de la etiqueta html.
html{ font-size: 20px; } h1{ font-size: 2em; /* 2 x 20 = 40px */ }
Truco que nos recomendó el profe ;)
/*Como por defecto el font-size es 16px, el 62,5% nos daría 10px*/ html { font-size: 62.5%; } p { font-size: 1.6rem; /* 1.6 x 10 = 16px */ } /*entonces podemos calcular rem fácilmente multiplicando por 10
Si te gustó mi resumen dale me gusta y comenta, así me motivo a hacer más resúmenes :)
Sigamos aprendiendo juntos 💪
Excelente aporte
¡Supe claro tu resumen!
Amigos les dejo un aporte que me sirve mucho para mis apuntes, cuando tengan algun ejemplo que sea gif, video, url etc, lo que hago yo es pegar el link de la imagen gif etc, en esta pagina https://www.flowcode.com/ y posteriormente imprimirlo para tener el qr en el cuaderno y nadamas escanearlo cuando lo ocupes ver! ;D
Wow esta genial Gracias😮😮
Qué interesante!
Déjemos los px para el border :D
Es triste pero cierto
jajajaja
(10 / 16) * 100 = 62.5
10 Es la medida base que queremos usar 16 es lo que equivale un REM 100 es el porcentaje
De esta forma es que funciona ese porcentaje:D!
porque no le podriamos poner 6.25% y asi tendriamos: 1 rem = 1px seria mas practico que estar multiplicando por 10,
justamente estaba buscando esta formula, gracias!
Para mi Diego es de los mejores instructores de Platzi.
¡Viva Diego!
Igual pueden establecer el html{ font-size=6.25%; } Lo cual haría que 1 rem fuera igual a un pixel entonces para tener 16 px solo basta poner: p { font-size=16 rem; }
También... No te lo puedo negar xD
Con respecto a esto, falla la lógica que el 62.5% puede o no ser de 10px dependiendo del navegador.
Siempre usaba la medida rem, pero no sabía para qué era en concreto. Esta clase me dejó :
CSS rem
En css existen medidas absolutas(px) y relativas(em, rem, %). Utilizar medidas absolutas evita el escalamiento.
Nota: Un Trick en Css es configurar tu archivo inicial de la siguiente forma:
* { box-sizing: border-box; padding: 0; margin: 0; } html { font-size: 62.5%; }
Asi podemos utilizar medidas relativas basadas en REM con una escala
similar a pixeles, (1.6rem => 16px, 3.5rem => 35px)
Les comparto mis apuntes de esta leccion :)
Gracias.
Hey muchas gracias por tus aportes! 💚 🤟🏽
"Usually default font-size of the browser is 16px. Setting font-size: 100% will make 1rem = 16px. But it will make calculations a little difficult. A better way is to set font-size: 62.5%. Because 62.5% of 16px is 10px. Which makes 1rem = 10px."
CSS units for font-size: px | em | rem
Nice article bruh
Esta imagen me ayudó a comprender mejor.😊
Muy buena forma de representación. Muchas gracias!!
De nada :3
¿Cómo se llega al 62.5%? Solución: Es una regla de tres simple Si para 16px corresponde 100%, para 10px será: 10px * 100% / 16px = 62.5%
Aquí se está diciendo al elemento html que a este elemento le de un font-size de 62.5% del valor de la fuente heredada del navegador. Así si por defecto el navegador tiene el valor de 16.
16 * 62.5% = 10px
Si solo pongo el 62.5% en el font-size en la etiqueta html, solo aplicará para el font-size? o también aplica para width, border, etc. Es decir, seteando el font-size en html ya puedo usar el rem para cualquier atributo?
Eso es correcto Gustavo.
Las unidades rem siempre tomarán de base el font-size del root element.
No importa si luego usas ese rem para margins, paddings o borders; el valor base seguirá siendo el font-size que defines para <html>
buena pregunta y buena respuesta, gracias!
¿Cual es la diferencia entre poner font-size: 62.5%; o font-size: 10px;?¿Es alguna cuestión de rendimiento?
Rem lo que hace es tomar como referencia los estilos más lejanos (en este caso la etiqueta html).
La razón por la que pusieron en la etiqueta html 62.5% es por que el valor rem predeterminado es de 16px, y al poner que el tamaño de la fuente será un 62.5% entonces el valor de rem será de 1rem = 10px
Esto se hace para que si necesitas una fuente de 18px de alto escribas 1.8rem, en vez de 1.13rem.
Rem se usa más que nada para que si algún programa de accesibilidad requiere que se aumente el tamaño de fuente de la página, este solo tenga que cambiar el valor de el tamaño de la fuente en la etiqueta html y no el de cada uno de los elementos dentro de la página :D
Si, entiendo esto, lo que no entiendo es porque pone el tamaño de la fuente con porcentaje y no con pixeles si es lo mismo. Me explico mejor:
html{ font-size: 62.5%; } ES LO MISMO QUE : html{ font-size: 10px; }
Entonces cuál es la diferencia entre estos dos, ¿Por qué se coloca en porcentaje y no con pixeles?
En mi Twitter sigo a muchos devs y siempre decían que rem es lo mejor, ahora ya entiendo el por qué jejeje
32. Mis apuntes sobre: "Medidas REM"
Unidad de medida absoluta significa REM = root element, la medida siempre va a tomar como referencia a la etiqueta ROOT.
A diferencia de EM que toma como referencia su padre directo.
Por ejemplo, si <p> tiene por defecto 16px, si ponemos como medida 1rem, te dará 16px, siempre.
Si seteamos el font-size de html en 62.5%, podremos usar <rem> como medida, indicando por ejemplo 1.6rem = 16px, 1rem = 10px, 2rem = 20px, etc:
html { font-size: 62.5%; }
Les comparto el código de la clase:
Código HTML:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="./style.css"> <title>Document</title> </head> <body> <main> <p>I'm a text example</p> <div> <p>I'm another text</p> <div> <p>I'm another text</p> <div> <p>I'm another text</p> <div> <p>I'm another text</p> </div> </div> </div> </div> </main> </body> </html>
Código CSS
* { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 62.5%; } p { font-size: 1.6rem; } main div { font-size: 1.6rem; }
Les comparto un momo al respecto :).
me dio risa jaja.
cual seria la diferencia de ponerle al html directamente font-size: 10px.. ? si es la medida que de ahora en adelante se desea tenga
Min 6:34
Como buenas prácticas se utilizan píxeles para tamaños de fuente y rem para tamaños relativos.
No cambia mucho pero te vuelves un programador con buenas prácticas :D
Y no solo buenas prácticas, resulta que los 16px por defecto de la etiqueta html en realidad son heredados de los ajustes del navegador y las personas mayores tienden a aumentar el tamaño de la fuente en sus navegadores.
Si defines el font-size en 10px, este valor va a sobreescribir los ajustes del navegador, y la fuente no va a poder escalar, haciendo que las personas con estos problemas de visión tengan una mala experiencia porque siempre van a ver el texto a un tamaño fijo.
