Web Developer Fundamentals

1

Qué aprenderás sobre HTML y CSS

2

¿Qué es el Frontend?

3

¿Qué es Backend?

4

¿Qué es Full Stack?

5

Páginas Estáticas vs. Dinámicas

Quiz: Web Developer Fundamentals

HTML

6

HTML: anatomía de una página web

7

Index y su estructura básica: head

8

Index y su estructura básica: body

9

Reto: crea tu lista de compras del supermercado

10

Anatomía de una etiqueta de HTML

Quiz: HTML

Etiquetas multimedia

11

Tipos de imágenes

12

Optimización de imágenes

13

Etiqueta img

14

Etiqueta figure

15

Etiqueta video

Quiz: Etiquetas multimedia

Formularios

16

Etiqueta form e input

17

Calendar

18

Autocomplete y require

19

Select

20

Input type submit vs. Button tag

Quiz: Formularios

CSS

21

¿Qué es CSS?

22

¿Cómo utilizamos CSS?: por etiqueta, selector, class y por ID

23

Pseudo clases y pseudo elementos

24

Anatomía de una regla de CSS

25

Modelo de caja

26

Herencia

27

Especificidad en selectores

28

Demo de especificidad y orden en selectores

29

Más sobre selectores

30

Combinadores: Adjacent Siblings (combinators)

31

Combinadores: General Sibling

32

Combinadores: Hijo y Descendiente

33

Medidas

34

Medidas EM

35

Medidas REM

36

Max/Min width

37

Position

38

Display

39

Desafío: Layout 1

40

Display Flex

41

Flexbox layouts

42

Variables

43

Web fonts

Quiz: CSS

Responsive Design

44

Responsive design: media queries

45

Estrategias de responsive: mostly fluid

46

Implementando mostly fluid

47

Layout shifter CSS

48

Column drop

49

Buenas prácticas y ejemplos de responsive

50

Imágenes responsive

Quiz: Responsive Design

Accesibilidad

51

Semántica

52

Textos

53

Labels, alt y title

Próximos pasos

54

Próximos pasos como Web Developer

55

Bonus: tabla de etiquetas HTML

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Medidas EM

34/55
Recursos

Aportes 136

Preguntas 23

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

o inicia sesión.

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

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 💪

Los navegadores tienen por defecto 16px de font-size en el html

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 ^^

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:

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.

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

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>

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í acabe después de esta clase —> 😵‍💫🤯

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:

Resumen del capitulo en Notion
https://n9.cl/vmiv

En CSS, la unidad de medida ‘em’ hace referencia al tamaño en puntos de la letra que se está utilizando. Por ejemplo, si se utiliza una tipografía de 12 puntos, 1em es equivalente a 12 puntos.

La unidad em se utiliza para hacer referencia al tamaño actual de la fuente que ha sido establecido en el navegador, que habitualmente es un valor aproximado de 16px. Normalmente está establecido en la etiqueta <body>, así se aplica a todo el documento en general, otra forma de establecer valores generales es con la pseudoclase :root.
De esta forma, una cantidad de 1em sería este tamaño establecido por el usuario, mientras que una cantidad de 2em sería justo el doble y una cantidad de 0.5em sería justo la mitad.

Con 1ex establecemos la mitad del tamaño de la fuente, ya que 1ex = 0.5em. Realmente, la medida ex está basada en la altura de la x minúscula.

Si quieres tener la vista del Dev tools que tiene el profe, haz click en “Show computed styles sidebar”.

Medida EM: Em es un acrónimo de elemento y lo que hace es que toma el tamaño de fuente de su padre directo. Si un parrafo está encerrado en un div que tiene un tamaño fuente de 16px, entonces:

  • 1em → 16px

  • 2em → 32px

  • 1.5em → 24px

Si usamos em en la propiedad width, por ejemplo:

body
{
    background-color: blueviolet;
    font-size: 16px;
}
.text-container
{
    background-color: aqua;
    width: 18.75em;
}

Calculará el ancho tomando como referencia el tamaño de la fuente(font-size: 16px) de su padre.
Dando como resultado un valor de 300px (16*18.75)

Creo que el profesor cometió un error. En otro curso me explicaron que em toma la medida del elemento con medida absoluta más cercano no de su padre directo como dice el profesor y rem es al contrario la toma del elemento con medida absoluta más lejano. igual se entiende el funcionamiento pero creo que sería bueno aclarar este punto. corrija me si me equivoqué.

Clase 34 - Medidas EM


¿Cómo funciona la medida em en CSS?

  • Con esta medida podemos hacer que un elemento tenga como medida la de su padre directo:
  • Ejemplo:
  • HTML:
<main class="text-container">
        <p>Soy un texto ejemplo</p>
        <div>
            <p>Soy otro texto ejemplo</p>
        </div>
</main>

  • CSS
.text-container{
    font-size: 1.5em;
}

.text-container div
{
    font-size: 1.5em;
}

  • Cómo sabemos todos los elementos HTML toman como su padre directo el elemento <html> el cual por estilos del navegador tiene un font-size de 16px. En este ejemplo vemos que tenemos tenemos un contenedor <main> el cual tiene una clase “text-container” y en el CSS le estamos diciendo que el font-size sea de 1.5em. Entonces lo que pasará es que el contendor <main> tomará por herencia el tamaño de 16px qué tiene de su padre directo <html> y lo multiplicará por 1.5 que tiene de su propio font-size, dándonos un resultado de 24px como su font-size. Este será el valor que tendrá como font-size el primer elemento <p>.
    Con el contenedor <div> pasa más o menos parecido, pero en este caso el padre directo del elemento <div> no es <html> sino <main>. Debido a este cambio de padres directos lo que pasará es que el elemento <div> toma como referencia el valor del elemento <main>, el cual en este momento es de 24px y nuevamente se multiplicará por 1.5 que tiene como font-size el elemento <div>, dándonos como resultado que el elemento <p> tendrá un font-size de 36px.

¿Es buena práctica usar la medida em?

  • La verdad es que no, ya que se puede volver engorroso la asignación de medidas a elementos debido a la herencia de sus padres directos.

Em significa element, está medida toma la medida de su padre, por ejemplo 1em así no más serían 16px que es la medida del html pero si a una etiqueta contenedora le damos una medida, a la etiqueta que está adentro de esa contenedora al usarse em, em ya va a valer lo que se especifico en la medida de la etiqueta contenedora y no la medida del html.

Em es un acrónimo de elemento, lo que hace em va a tomar el tamaño de fuente que tenga el padre directo, quiere decir en este caso a nosotros a main no le hemos puesto ningún tamaño de fuente, esta tomando el tamaño de fuente que tenga el html, si yo le pongo un tamaño de fuente a main por ejemplo de 6px, de ahí va a empezar a tomarlo y 1 em van a ser estos 16px.

En CSS, las unidades em son un múltiplo del tamaño de fuente del elemento.

Por ejemplo, si para un selector CSS hemos especificado un font-size de 16px, entonces 1em = 16px:

✨ sigamos aprendiendo juntos!

Con lo visto en este curso de la parte de medidas, investigue mas e hice una entrada en mi blog explicandolo detalladamente: https://www.comsoft-mexico.com/blog/unidades-de-medida-para-el-desarrollo-web/

EM Calculator Es una herramienta que nos permite convertir el tamaño de unidades de pixeles a unidades em relativas 😄

Lo bueno de aprender en platzi son los comentarios.
Las clases son muy buenas pero con los comentarios entender la clase es mas fácil.

Este tema si esta enredado.

Nota: em podría ser un problema si no se tiene cuidado de donde se mandan a llamar las dimensiones. em no es una de las mejores medidas.

  • em=Tamaño de letra del elemento padre

  • rem =Tamaño de letra elemento raíz

em se trata de una medida que toma como referencia la medida del contenedor padre
.
Veamos el siguiente código:
.
En html

<body>
    <main>
        <div>
            <p>Este es un párrafo</p>
        </div>        
        <section class="main-section">
            <p>Este es otro párrafo</p>
        </section>
    </main>
</body>

En CSS

p {
    font-size: 1em;
}

Por defecto, html tiene como font-size: 16px. Por tanto, 1em es igual a 16px que es el padre de todas las líneas de código antes de aplicar ninguna modificación a los estilos por defecto.
.
Ahora vamos a aplicar un font-size diferente a la clase “main-section” dentro de la etiqueta section

.main-section {
    font-size: 20px;
}

Ahora tenemos dos font-size diferentes. Para todo el código fuera del section el font-size padre será 16px. Mientras que para el código dentro de section el font-size padre será 20px.
.
Si en CSS duplicamos valores:

p {
    font-size: 2em;
}

Para todo el código fuera de section 2em será igual a 32px porque el font-size padre es de 16px. Mientras que para el código dentro de main.section, 2em será igual a 40x porque el font-size padre de esa sección es 20px.

Em no toma como referencia al padre, sino el tamaño de fuente del elemento mismo.
Lo que pasa es que se genera una confusión debido a que si no se establece la propidead font-size antes de usar em, el elemento hereda el tamaño de del padre.
Esto se puede comprobar si cambias la propiedad font-size antes de usar em, por ejemplo:

.container{
	font-size:10px;	
	border:  .1em solid black;
}

El valor en del borde equivalente en px es 1, porque el tamaño de la fuente no se hereda del padre, debido a que éste se cambió en la propiedad font-size.

Medidas absolutas:
MM = milímetros

CM = centímetros

IN = pulgada

PC = picas

PX = pixel

Medidas relativas:
%

EM

REM

34.-Medidas EM

em es un acrónimo de elemento y lo que hace es tomar el tamaño de fuente que tenga el padre directo. Es decir, 1em= 16 pixeles que vienen por defecto en HTML. Y, si cambio el tamaño de main se modifica el valor de em. Pj. font-size: 20px hará que 1em=20px porque toma el tamaño del padre directo.

Hay que tener cuidado donde utilizamos em por lo que no es de las mejores medidas.

em

Represents the calculated font-size of the element. If used on the font-size property itself, it represents the inherited font-size of the element.

https://developer.mozilla.org/en-US/docs/Web/CSS/length

*Recuerda que em toma el tamaño de su elemento padre directo, rem toma su tamaño de la raíz de todo, el html.

Notas de la clase

un muy excelente video


/*Medida EM 

	toma el tamaño de la fuente del padre mas cercano, por ejemplo si el padre
	tiene el tamaño de fuente de 16px entonces 1em seria igual a 16px

*/

.text-container{
	font-size: 20px; /*medida en pixeles */
}

p{
	font-size: 2em; /*1em = 20px*/
}

.text-container div{
	font-size: 16px; /*medida en pixeles*/
}

div p{
	font-size: 1.5em; /*1em = 16px */
}

MEDIDAS EM

  • Depende de quien hereda ese tamaño, es decir, el valor de “em(elemento)” va a estar condicionado por el valor asignado en su elemento padre.
.text-container{
		font-size: 1em;
}
  • Por ejemplo si tenemos que un contenedor de texto tiene 20 pixeles como tamaño original, el texto que se encuentre dentro de ese contenedor va a estar referenciado por ese tamaño.
  • Por consecuencia si nosotros le decimos al texto que esta dentro de ese contenedor que es tenga 1em, eso quiere decir que tendrá el valor de su padre, y como su padre tiene 20 pixeles, 1 em = 20px
.text-container{
	font-size: 20px;
}
p{
	font-size: 1em; /*  1 x 20 = 40px */		
}

Queda claro el concepto Em.

Unidades relativas a la tipografía
em: unidad relativa al tamaño de texto definido en un determinado contexto. El em es una unidad que proviene del diseño tipográfico y equivale al espacio que ocupa el ancho de una letra M (“m” mayúscula) de un determinado cuerpo y alfabeto. El em hace referencia al tamaño de letra que se está usando.

Cuando se utiliza la unidad em, es imprescindible conocer el valor de referencia, de lo contrario saber que un texto tiene 1em ó 5em no nos dice realmente el tamaño de la letra.

Cuando se asigna una medida en ems, su referencia es el tamaño de letra del primer elemento contenedor que tenga establecido un tamaño de letra.

Px: Unidad canonica de una imagen
1Em: Es el tamaño de su padre directo
Rem: Sirve mucho para entornos escalables y responsivos

Muy sencillo de entender las medidas relativas , este tipo de temas son faciles de digerir si ya traes una base de logica matematica

Medida em en css

nota: em es un acronimo de “elemento” y lo que hace es tomar el tamaño fuente que tenga el padre directo.

Aqui el tamaño del div que está dentro de la clase container tendrá un tamaño de 40px ya que 1em=20px como estamos declarando en el ejemplo:

.container {
    font-size: 20px;
}
/* Este es el padre, que le asignamos un font-size de 20px */
.container div {
    font-size: 2em;
}
/*Aquí 2em significa que tiene 40px, tomando su padre .container que tiene 20px */

Y si tendemos el siguiente caso:

.container {
    font-size: 20px;
}
/* Padre de .container div */
.container div {
    font-size: 2em; /* 1em=20px entonces 2em=40px. Heredado de .container */
}
/* padre de container div p */
.container div p {
    font-size: 1.5em; /* 60px */
}
/* .container div p tendrá un tamaño de fuente de 60 ya que toma como referencia su padre directo que es ".container div" y NO ".container" */

"em"
Es una medida que se basa en el tamaño de la fuente actual. Si se establece el tamaño de fuente de un elemento en 1em, significa que el tamaño de fuente será igual al tamaño de fuente del elemento padre.

La ventaja de utilizar “em” es que son más adaptables a diferentes tamaños de pantalla y dispositivos. Los usuarios pueden cambiar el tamaño de fuente de su navegador y la página web aún se verá bien.

.

El tener medidas variables para cada elemento usando em es muy malo luego si se quiere hacer cambios al estilo del proyecto, por eso es mejor tener una fuente raíz para poder trabajar sin problema alguno. Rem es la voz 😁

notese que, para el ejemplo de los DIV anidados, ya no uso los 20px en el body, si no, se verian mas grandes, pero el hecho es el mismo, se multiplicaria una y otra vez por 1.5 en anterior dato que tiene el hemano mas cercano.

Bueno de esta clase, no me quedo del todo clara profe, quede volando.

Jugando un poco con el código y aprovechando ese comportamiento anidado, les dejo una semilla visual para que prueben el resultado…

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <main>
      <div>
        <p>Esto es un texto</p>
        <div>
          <p>Esto es un texto</p>
          <div>
            <p>Esto es un texto</p>
            <div>
              <p>Esto es un texto</p>
              <div>
                <p>Esto es un texto</p>
                <div>
                  <p>Esto es un texto</p>
                  <div>
                    <p>Esto es un texto</p>
                    <div>
                      <p>Esto es un texto</p>
                      <div>
                        <p>Esto es un texto</p>
                        <div>
                          <p>Esto es un texto</p>
                          <div>
                            <p>Esto es un texto</p>
                            <div>
                              <p>Esto es un texto</p>
                              <div>
                                <p>Esto es un texto</p>
                                <div>
                                  <p>Esto es un texto</p>
                                  <div>
                                    <p>Esto es un texto</p>
                                    <div>
                                      <p>Esto es un texto</p>
                                      <div>
                                        <p>Esto es un texto</p>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </main>
  </body>
</html>

y ahora el style.css

* {
  box-sizing: content-box;
  margin: 0;
  padding: 0;
}

html {
  background-color: yellow;
  font-family: 'Courier New', Courier, monospace;
}

main {
  font-size: 0.8em;
}

main div {
  font-size: 1.1em;
  line-height: 0.4em;
  letter-spacing: 1.01em;
  color: blueviolet;

  text-shadow: red 2px 2px 0px;
}

Al heredar las medidas, no es tan recomendable usar esta medida en su lugar es mejor usar REM

em va a tomar la medida del padre directo

em (elemento) toma el tamaño de fuente del elemento o el HTML (16px) si pongo 1.5em nos da 24px ya que 1em = 16px

me costó entender bien esto de la em hasta que vi algo curioso que lo lleve a reflejo de lo que conozco después de verlo como 6 veces, es una lupa, o mejor reflejado, un lente fotográfico, es decir, 16x1em, es 16 no hay zoom, si aumentamos la em a 1.5, aumenta el zoom de la lupa, y si hacemos como en el ejercicio que se presenta, se sobre entiende que hace un aumento del aumento, me costó comprenderlo hasta que vi mi cámara y recordé que hay lentes que tienen ese zoom.

(

Ya entiendo por qué puede llegar a ser algo confunso el uso del EM pero esto solo sucede cuando son etiquetas anidadas unas dentro de otras

La unidad em siempre depende de su elemento padre es relativa al tamaño de texto definido en un determinado contexto cambia a los elementos hijos de acuerdo con el tamaño de fuente
(font-size) del elemento padre

hay que fijarse bien al padre antes de poner la etiqueta em y rem

El font-size por defecto de html es 16px.

EM es = a la medida de su papa (en este caso el padre de main es html)
si le damos 8px a HTML —> MAIN tomara 1 em como 8px—> luego div tomara el resultado de MAIN (si le damos 1.5em = 8x1.5 = 12px) —> si le damos 2em a div seran 24px ya que toma la medida del papa y la multiplica x2.
y asi sucesivamente…

html {
    font-size: 8px;
}
.text-container {
    font-size: 1.5em;
}

.text-container div {
    font-size: 2em;
}

Medida EM

La medida EM toma el tamaño de fuente que tiene el padre directo del elemento al que le estamos colocando dicha medida, y calcula la proporción que le estamos indicando.

NOTA: Tamaño por defecto en un navegador [etiqueta <html> : 16px]


EJEMPLO
En este ejemplo el elemento main tiene un tamaño de fuente por defecto de 16px, dentro de este hay un elemento hijo que en este ejemplo será <p> el cual tendrá un tamaño de 1.5em , lo que significa que <p> tomará el tamaño del elemento padre que en este caso es <main> y lo va a aumentar 1.5 veces, por lo que al multiplicar los 16px que tiene <main> por los 1.5 que indicamos con la medida em nos da como resultado un font-size de 24px, el cuál será el tamaño que tendrá en este caso nuestra etiqueta <p>

main {
	font-size: 16px;
}

p {
	font-size: 1.5em;  /* 16px * 1.5 = 24px */

⚠️ Sin embargo hay un problema con esta medida, y es que si no tenemos cuidado de cuantos elementos padres con un Font-size indicado hay por arriba del al que le indicamos la medida EM podemos empezar a tener texto con medidas muy diferentes a las que buscamos, ya que como comentamos en llenas anteriores, el em asigna como medida la proporción indicada con relación a los elementos padres pudiendo tener el problema de que estos por una mala organización se vayan anidando uno con otro conforme más elementos padres vamos tendiendo en nuestro proyecto).

EM: Toma el tamaño de fuente del Padre.

.text-container{
    font-size: 1.5em;
    /* em agarra el tamaño de fuente del contenedor padre directo, en este caso el tag html que es de 16px y se le agrega 0.5 el valor del mismo, siendo que, 16px * 1.5 = 24px */
}

/* 1 em = pixeles originales o predeterminados del contenedor padre directo

Por ejemplo: en body se tiene un font-size de 20px, pero al momento de asigna un font-size en el contenedor main de 1.5em, este valor será de 30px
*/

.text-container div{
    font-size: 1.5em;
    /* Esto genera un problema de fuente en contenedores anidados al obtener el elemento font-size del contenedor padre haciendo que la fuente se vuelva más y más grande */
}

Yo antes creía que la medida EM era porque se refería al tamaño de la letra M.

1em = 16px

RESUMEN CLASE 34:
MEDIDAS EM

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Medidas EM</title>
    <link rel="stylesheet" href="./style.css">
</head>

<body>
    <main class="text-container">
        <p>Soy un texto ejemplo</p>
        <div>
            <p>Soy otro texto ejemplo</p>
            <div>
                <p>Soy otro texto ejemplo</p>
                <div>
                    <p>Soy otro texto ejemplo</p>
                    <div>
                        <p>Soy otro texto ejemplo</p>
                    </div>
                </div>
            </div>
        </div>

    </main>
</body>

</html>

CSS

.text-container {
    font-size: 1.5em;
}
.text-container div {
    font-size: 1.5em;
}

EM puede ser un dolor de cabeza

Información resumida de esta clase
#EstudiantesDePlatzi

  • em es un acrónimo de elemento y toma el tamaño de la fuente que tiene el padre directo

  • Es importante saber usar em y no es tan bueno usarlo como medida

https://type-scale.com/ Les comparto este recurso que nos permite ayudar a definir la escala de nuestra font en sus distintos niveles (de h1 a h6) ya sea en px o en em. ¡Saludos!

y ahora??.. en que momento pongo en practica todo esto … ay ay ay

Oh que interesante

Medidas EM

.text-container {
    font-size: 1.5em;
}

em toma el tamaño de fuente que tenga el padre directo. Como no tiene, toma la del html. Aquí hace un cálculo, el tamaño de fuente de html (16px) por 1.5, que nos da 24px.

body {
    font-size: 20px;
}

Si agregamos un tamaño de fuente al body, ahora nuestro valor anterior tomará éste como referencia, ya que su padre más cercano.

Pero ojo: Aplicar medidas em puede ocasionarnos problemas. Los valores se acumulan por lo que una de nuestras etiquetas contenidas puede salir del tamaño esperado.

div {
    font-size: 1.5em;
}

El valor de este div tendrá el tamaño aumentado del padre directo, que también está aumentado.

Es por esto que em no es el mejor sistema de medida.

Hola. Les comparto este repositorio que sirve de guía para el examen final, pues contiene las preguntas que se encuentran en el examen, la justificación y el video del curso donde se habla sobre eso. Espero y les sea de utilidad 😄.
Platzi-Test

El EM me recuerda a la escala de fuente de algunos Editores de texto.

unidad em : es una unidad de medida relativa que depende del tamaño de letra asignado al contenedor padre mas cercano. la unidad se llama em (pronunciacion de la m en ingles) porque en imprenta se usa la letra m como referencia ya que es el caracter mas ancho que existe por lo tanto el tamaño de la letra m se usa para calcular el tamaño del resto de letras.
.
.
1em = valor del atributo font-size del contenedor padre mas cercano, osea, si el contenedor <body> tiene el atributo font-size = 10px, entonces, todos los atributos del elemento hijo ya sea padding, margin, etc, donde se asigne 2em tendran un tamaño de 20px, osea, se multiplica el valor de em por el valor que se ponga al font-size del contenedor padre mas cercano. si el contenedor padre no tiene el atributo font-size, entonces, em toma como referencia 16px que es el tamaño de la letra m que tiene la raiz del documento html

EM NO ES DE LAS MEJORES MEDIDAS

DIFERENCIAS DE LAS MEDIDAS EM Y REM:

La unidad em tiene como referencia de medida el font-size del elemento actual.
La unidad rem tiene como referencia de medida el font-size del elemento root, la etiqueta <html> (en inglés sería como “root em”).

Ahora en detalle: Ya sabes que em y rem son dos unidades de CSS relativas. En concreto son relativas al font-size existente. Sin embargo, mientras que em tiene referencia el tamaño de la fuente del elemento donde se usa esa unidad, rem tiene referencia al tamaño de la fuente definido en el elemento root.

Mis notas de clase: Puedes verlo en ejecicón desde aquí

HTML

<section id="em-size" class="text-container">
	<h2>Medidas EM</h2>
	<p>Soy un texto de ejemplo por fuerita de un div, solo dentro de un section</p>
	<div>
		<p>Como parrafo dentro de un div cambio en comparación al otro parrafo!</p>
		<div>
			<p>Souy un parrafo dentro de otro div, con tamaños de locura!</p>
		</div>
	</div>
</section>


CSS

body {
	font-size: 20px;
}

.text-container {
	font-size: 1.5em;
	/* 1em es el 100% del tamaño de fuente del elemento padre, para este caso, quien determina el tamaño es la etiqueta body, ya que en la rama de .text-container ningun otro elemento ha determinado un tamaño distinto*/
}

.text-container div {
	font-size: 1.5em;
	/* hace doble heredado por lo siguiente:
	1 .text-container tiene un font-size de 1.5em (1.5em de body es igual a 30px)
	2 div tiene un font-size de 30px (herdado de .text-container) y este determina el tamaño base para tomar un nuevo font-size. Aqui el font-size es 1.5em de 30px ó 45px
*/
}

¡HEEEEEYYYY! Si no quieren estar haciendo siempre la conversión de px a rem, existe una extensión para ello en VS Code llamada "px to rem"
Una vez la tengamos instalada, lo único que tenemos que hacer es dar “alt izq + z” y automáticamente nos hará la conversión.
La pueden descargar aquí

Espero les sirva 😁

Forma Grafica EM vs REM


Excelente

Excelente

.text-container {
  font-size: 1.5em;
}
.text-container div {
  font-size: 1.5em;
}

em

Hereda el tamaño de su elemento padre directo.

<style>
      
        /*** em: hereda el tamaño de su elemento padre ***/
    
        .text-container {
            font-size: 1.5em;

        }
        .text-container div {
            font-size: 1.5em;

        }
    </style>
</head>
<body>
    <main class="text-container">
        <p>Soy un texto ejemplo</p>
        <div>
            <p>Soy un texto ejemplo dos</p>
        </div>
    </main>
</body>

Si mal no recuerdo es bueno utilizar unidades relativas, ya que al pasar a ver esta pagina en un movil no afecte y se mantenga

En el CSS les dejo esta explicación, del mismo código de ejemplo.

body{
    font-size: 20px;
}

.text-container{
    font-size:1.5em;
}

.text-container div{
    font-size: 1.5em;
}

Como body tiene 20px de tamaño de fuente, el .text-container equivale a (1.520)px = 30px.
Ahora .text-container div, toma como 1em=30px, porque esa es la medida de su padre directo. Entonces el tamaño del texto dentro del div equivale a (1.5
30)px=45px

El plug-in que está usando se llama Alfred, Y no hay para Linux 😦

/* Agrandando el tamaño del texto con em, lo que hace es que toma el tamaño de fuente que tenga el padre directo, es decir esta tomando
el tamaño de fuente del html en este caso
donde 1em correspondería a 1em toma la medida del padre como tal
Para este caso el 1.5 corresponde a 24px, ya que seria 1.5em * 16px(valor del html) =24px /
/
body{
font-size: 20px;
} /
/
.text-container {
font-size: 1.5em;
} */

.text-container {
font-size: 1.5em;
}
/* para este caso el em del div va a tomar es el del texto de arriba, es decir 1.5em * 24px = 36px */
.text-container div{
font-size: 1.5em;
}

body {
    font-size: 20px;
}

.text-container {
    font-size: 1em; /* em toma el tamaño de fuente que tiene el padre y lo multiplica por el valor que le demos */
}

/* em no se considera de las mejores medidas para utilizar ya que en proyectos grandes puede generar confucion y resultados no deseados.

ya que si el padre de una etiqueta que declaramos con em también tiene un em CSS no tomara en cuenta el valor del padre del primer em sino el valor del em y con base a este se realizara la multiplicación, con grandes cantidades de codigo esto puede generar confucion y muchos resultados no deseado, por lo que se recomienda usar rem. */

em: "elemento": toma el tamaño de la fuente de su padre directo.

Gracias al profe entendi em, pero siento que es inventar la rueda. Realizar recalculos porque si y que dependa de un padre, cuando hagas anidacion de dependencias puede ser un total dolor de cabeza y en una pagina muy grande o extensa podrias hacer un codigo poco legible o entendible sobretodo. Siento que fue inventado para hacer las cosas mas complejas.

EM toma como referencia la medida del padre directo para hacer la conversión

Muy buena forma de explicarlo, puede llegar a ser algo complicado de usar esta medida relativa, pero ahora se como funciona

Por fin pude entender bien acerca del EM excelente clase