Comprensión del uso de em en CSS: medidas relativas de fuente
Contenido del curso
Yeisson Stik Gutierrez Rivera
Milton Josué Barrera Zepeda
Juan David Merchán Torres
Anderson Josué Oroya Silva
Jesus Velasco
Anderson Josué Oroya Silva
Sura Naileth Cedeño Lopez
Team Platzi
Joel Dominguez Merino
Irving Juárez
Carlos Eduardo Gomez García
María Jimena Rodríguez Contreras
Fernando Xavier Mora Rázuri
Iván Arcos
Jimmy Buriticá Londoño
Juan Christopher
Freddy Zanazzo
Juan Christopher
Jonathan Barzola
José Antonio Zegarra Medina
Jonathan Castillo Flores
Jazmín Lizette Sánchez Neira
Angélica Echeverry
Neva Aliaga
Arnaldo José Cisneros Zambrano
Leobardo Daniel Pineda Salgado
Leonardo Véliz
Héctor Alonso Padilla Ramírez
Juan Torrealba
Federico Gaston Blanco Ortiz
Giuseppe Ramirez
Sebastian Pedroza
María Del Pilar Chávez Gutiérrez
Alba Guzman
jorge llanque
Branny Andere Ruiz Rivera
Rolando Mamani Salas
EDWIN VASQUEZ VALLE
Leandro Cosme Tomassini
Jhon Sebastian Zuluaga Castañeda
Yair Lira
Juan Christopher
MIGUEL EDUARDO OCHOA ARANGUREN
Raúl Adolfo Sánchez Rodríguez
EM = es un acronimo de elemento y lo que hace es tomar el tamaño de fuente que tenga el padre directo ejemplo:
.container { font-size: 20px } .container div { font-size: 2em }
aqui los el tamaño del div que esta dentro de la clase container tenda un tamaño de 40px, ya que . 1em = 20px . y como estamos asignandole 2 em seria como 20px + 20px . y si por ejemplo tenemos el siguiente caso :
.container { font-size: 20px } .container div { font-size: 2em } .container div p { font-size: 1.5em }
a continuacion veremos que la etiqueta p tendra un tamaño de fuente de 60px ya que toma como referencia el tamaño de su padre ( 40px ) y haria la siguiente operacion 40*1.5 que es igual a 60, es por eso que la etiqueta p tomo el valor de 60px
Buena explicación💯
Muy buen aporte
++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.
Si te gustó mi resumen dale me gusta y comenta, así me motivo a hacer más resúmenes ✍
Sigamos aprendiendo juntos 💪
Me encanto!, puedo sumarlo a mis notas?
@jesusrobot Claro que sí :)
Los navegadores tienen por defecto 16px de font-size en el html
Eso es correcto! Mientras no le especifiquemos otro tamaño... ese sera el tamaño por defecto para los elementos que heredan de el :D
Ese es el tamaño por defecto de los párrafos, ya que los h1, h2, etc. tienen otros tamaños por defecto (que son mas grandes).
Una utilidad que se le suele dar a em (Cuando la aplicas bien) es la de escalar una página web, es decir, simplemente cambiando el tamaño de fuente de un padre general, puedes escalar todo un sitio web con base en dicha medida y cambiando solo un valor ^^
gracias
Lo había visto pero le tenía miedo a usarlo. Gracias Master.
Justo como lo explicó Diego, las diferencias de cada uno, acá les dejo esta imagen y que la veremos también en la siguiente clase:
Super claro
Guarde la imagen en mi PC ¡Gracias!
em: va a tomar el tamaño de fuente que tenga el padre directo, o en su defecto, a su ancestro más próximo que tenga un tamaño declarado.
Asi es!
buen aporte!
Está bonito la paleta de colores que utiliza tu VSC.
Gracias por tu aporte, está muy fácil de entender las medidas EM de esta manera :).
Grac
ias esto me ayudo a entender !
Este video también tiene una explicación excelente de estas 2 unidades de medidas "em" y "rem". Recomiendo verlo como un complemento de estas clases: https://www.youtube.com/watch?v=nz6DIeBdZtY&ab_channel=FalconMasters
Súper recomendado!!! El chavo lo explica de maravilla y da un ejemplo muy completo de como escalar todo un header con solo mover un valor. Puedes ver este video y saltarte las clases de EM y REM sin perderte de nada.
La verdad prefiero el método que se explica en la siguiente clase de llevar el font-size a 62.5% porque eso te permite hacer cálculos con múltiplos de 10 y así no dependes de extensiones ni necesitas tener una calculadora abierta para sacar las medidas que necesitas, pero una cosa que sí vi es el potencial de em cuando se aplica de manera correcta para escalar todo un proyecto cosa que el profesor no supo explicar muy bien en esta clase.
Pixel to Em Converter
Tengo una duda cuando debería usar div y cuando debería usar el section?
Es una muy buena pregunta Federico. Ambos son contenedores, pero <section> es un contenedor específico que sirve para contener (en español) secciones del layout, es decir tiene una funcionalidad específica, sería contra intuitivo colocar por ejemplo una imagen dentro de <section> porque para las imágenes hay una etiqueta específica. Por otro lado <div> es un contenedor genérico y sirve para aquellas cosas que colocaríamos pero que no tienen una etiqueta específica que los pueda contener. Ahora mismo tenemos muchas etiquetas (eso es positivo) y la mayor parte de esas cubren muy bien la mayoría de necesidades. Pero por ejemplo usarías section para crear un dibujo en css desde cero. Nope, lo harías con <div> chécate este blog en donde uso <div> para dibujar y me avisas. ;)
Gracias por preguntar, tenia la misma duda 👍
Así acabe después de esta clase ---> 😵💫🤯
Si quieres tener la vista del Dev tools que tiene el profe, haz click en "Show computed styles sidebar".
em = unidad de medida que toma valor por el elemento padre o mas cercano, Ejemplo:
<div> <!-- font-size: 16px --> <p> <!-- font-size: .5em; valor 8px r=16/2 --> <p> <!-- font-size: 2em; valor 16px r= 8*2 --> </p> </p> </div>
Asi es!
Todos asombrados con esto:
Jaja muy bueno.
como saco eso?
Si quieres que un elemento tenga 200 píxeles y el tamaño de la fuente en su contenedor es de 16 píxeles, en em tendrías que darle el valor 200 / 16 = 12.5em
Así es!!
creo que si se puede usar EM, pero hay que tener cierto nivel de habilidad respecto a la aplicación de la medida. para no tener conflictos con etiquetas superiores. es cuestión de gustos y de como se sienta cada desarrollador al trabajar.
Mi aporte:
