Unidades de medida

👀 Hay un dilema donde algunas personas dicen que los px no deberían ser medidas absolutas porque dependen del DPI de la pantalla, aclaremos esto 👇:
.
Cuando hablamos de “medidas fijas” o “estáticas” nos referimos a que esta medida siempre va a medir lo mismo es una misma pantalla (sin importar su DPI). No en todas las pantallas 1px mide lo mismo, de hecho incluso cuando hacemos zoom el tamaño de ese píxel se modifica (mide más de 1px, aunque le hayamos puesto 1px).
.
☝ Entonces aclarando esta duda, hablamos de medidas estáticas cuando es una medida que, en una misma pantalla, siempre medirá lo mismo, sin depender de nadie.
.
Las medidas relativas dependen de algo para poder calcular su medida, por ejemplo, los porcentajes dependen del elemento padre, los em rem dependen del font-size, los vw y vh dependen del tamaño del viewport.
.
Básicamente esa es la diferencia entre medidas relativas y absolutas, de nuevo, ninguna es mejor que otra y todas tienen sus casos de uso 👀

La mejor opcion siempre es rem

Medidas Absolutas

Es la unidad de medida que no va a cambiar sin importar el tamaño de la pantalla.

Una unidad absoluta puede ser los píxeles.

p {
    font-size: 18px;
}

Medidas Relativas

Estás si pueden cambiar en relación con el dispositivo que lo estamos viendo.

Las unidades relativas pueden ser porcentajes, em (elemento), rem (root em o root elemento), max-width, max-height, min-width, min-height. Estas últimas varían basándonos en el tamaño de la pantalla.

main {
    background-color: red;
    width: 100%; /*Unidad relativa*/
    height: 500px;
}

em

EM es un acrónimo de elemento, va a tomar el tamaño de fuente que tenga el padre directo.

Por default un em es 16px que es de la etiqueta html.

Ejemplo

Yo al colocar 1.5em al tamaño de fuente de un elemento, este elemento pasa a tener un tamaño 50% más grande que la fuente que tiene el padre directo. Esto pasa cada vez que usamos la medida relativa em, los hijos toman como medidas de referencia las medidas que tiene su padre directo y esto puede causar confusiones.

EM no es de las mejores medidas.

REM

Esta medida relativa siempre va a tener referencia o correlación con el estilo que tenga la etiqueta root o el root de nuestro proyecto, que siempre es nuestra etiqueta html.

Por defecto el navegador le da a la etiqueta html un font-size de 16px.

Aun que coloquemos textos anidados veremos que no tendremos ningún cambio como pasaba antes con la medida em.

REM es menos confuso que EM.

Truco para usar rem

Debemos setear nuestra etiqueta html de la siguiente forma:

html {
    font-size: 62.5%; 
}

Con esto estamos estableciendo un tamaño de 10px al tamaño de fuente.

vw

Lo que hace esta unidad relativa es que toma como referencia el tamaño del viewport o pantalla.

vh

Lo que hace esta medida relativa es que toma como referencia el alto del viewport o pantalla.

Min-width y max-width

Una regla impórtate cuando los usamos es que necesitamos tener un width base que casi siempre es en porcentajes.

Lo que sude con estos dos que limitan el crecimiento del contenedor (max-width) o la reducción del contenedor (min-width). Una vez que llegue al límite que establecemos este contenedor deja de crecer o reducirse.

En este caso el selector crece como máximo hasta los 500 px y se reduce como máximo hasta los 320 px.

selector {
	width: 80%;
	min-width: 320px;
	max-width: 500px;
}

Min-height y max-height

En este caso no necesitamos un height base. Se utiliza para evitar problemas de overflow.

Con min-height estamos diciendo que la altura mínima del contenedor va a ser X, pero si tiene contenido que exceda esa altura mínima que se expanda hasta donde el contenido deje de crecer.

Con max-height limitamos cuanto puede crecer el contenedor a lo alto.

Buenas prácticas

• Es buena práctica utilizar el rem y em.

• No es buena práctica tener un scroll horizontal en dispositivos mobiles.

Estilos que siempre debe estar al comienzo de nuestro archivo.css

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

html {
    font-size: 62.5%; 
}

El bug de Safari con vh

.
Investigando sobre el comportamiento de vh en distintos navegadores que menciona la profe, encontré algo interesante.

Resulta que varios frontends se toparon con problemas en los iphones cuando intentan ocupar el 100% del viewport. Resulta que parte de su contenido se oculta detrás de la barra inferior del teléfono.
.
Para afrontar este problema, surgieron varias propuestas. Sin embargo, la solución de Matt Smith me pareció muy elegante. El propone indicar el valor -webkit-fill-available además del 100vh de esta manera…

body {
  min-height: 100vh;
  /* mobile viewport bug fix */
  min-height: -webkit-fill-available;
}

html {
  height: -webkit-fill-available;
}

Pueden leer más de este bug en este post.
Aquí encuentran el artículo de la propuesta de Matt.

Esta es una opción más explícita del cálculo realizado y funciona 😄

html {
  font-size: calc((100% * 10) / 16);
}

Valió la pena endeudarme para pagar la suscripción, buenas explicaciones. Gracias.

Esto también te lo mencionan en el curso Definitivo de HTML y CSS. La verdad es que con ese curso y este complementas mucho los conocimientos de estos dos lenguajes.

Chrome/Safari vs Firefox/IE

Encontré una pregunta muy bien elaborada en stackoverflow al respecto. Brevemente dice que chrome y safari resuelven los porcentajes para el alto, en ítems flex, basados en el valor height del padre. Firefox y IE prioriza la propiedad heightde los padres.

Es como un trabalenguas, pero en la primera respuesta, la persona lo explica muy bien.

Si no quieres que se haga scroll del contenedor al usar vh o vw por los márgenes establecidos por el navegador, lo mejor siempre es resetear esto al inicio con el selector universal:

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

NO sabia que podías manipular de esa forma el valor de 1rem, excelente dato y muy util.

podemos normalizar el html con un archivo css muy popular llamado normalize.css asi mismo lo pueden buscar en google, eso ayudara a tener la misma apariencia en todos los navegadores

Usando 62.5% como el tamaño de rem y viendo en 2 navegadores diferentes (Edge y OperaGX) he podido comprobar que poseen el mismo tamaño predeterminado (16px), ya que he abierto el mismo archivo y poniendo los navegadores del mismo tamaño para evitar cualquier error posible, por consiguiente el alto también es el mismo ya que use 15 rem para los cuadraditos del archivo. Perdón por no poder comprobar en Safari, no tengo Mac 😦 .

¿Cómo funciona el VH en los diferentes navegadores?

Soporte en los distintos navegadores
Basándonos en la información mostrada en Can I use ( https://caniuse.com/viewport-units), podemos observar que la mayoría de los navegadores soportan estas unidades. Igualmente se pueden encontrar algunos bugs e irregularidades que debemos tener en cuenta al momento de usar estas unidades. Por ejemplo, IE9 ( En Internet Explorer9 ) soporta vm en vez de vmin y los exploradores IE10+/Edge no soportan vmax.

Algunas irregularidades son:

1. En Internet Explorer9 dentro de un iframe, las unidades se calcularan en el contexto de área de la ventana y no del iframe.
2. Internet Explorer9 no calcula las unidades correctamente cuando el explorador o sistema operativo esta ampliado.
3. En Internet Explorer 10 y 11 cuando se usan las unidades vw con 3D Transform puede generar extraños comportamientos.
4. iOS 7 Safari recalcula anchos establecidos en vh como vw, y altos en vw como vh, cuando la orientación cambia.
5. Internet Explorer 9 en print-mode interpreta vh como paginas. 30vh= 30paginas
6. Chrome, Safari & iOS Safari (ambos 6 y 7) no soporta estas unidades en anchos de bordes, valores de transform, sombras.
7. En Firefox hay un bug documentado donde 100vhno tiene efecto alguno cuando su disposición sea establecido como display:table.

Los em toman el tamaño de si padre directo.
.
Los rem siempre tienen la referencia al tamaño de fuente en el root de css.
.
vh y vw se refieren a todo el espacio y se usan de 0-100vh o 0-100vw.

ahorita conseguí un trabajo de front end gracias a este curso y es curioso que muchos de los lineamientos que siguen casi siempre se guían por porcentajes dentro de la pantalla, muy pocas veces utilizo rem espero eso cambie pronto

Las unidades se dividen en dos grupos: absolutas y relativas. Básicamente las unidades absolutas definen su valor de forma concreta y determinada, por ejemplo el centímetro.

En cambio las medidas relativas lo hacen tomando otro elemento de referencia y a veces su contexto. En el caso del porcentaje, por ejemplo, cuando se indica sobre el valor width, éste se toma respecto del elemento contenedor.

Es decir que, si tengo un contenedor que mide un ancho máximo de 1000 px y dentro coloco una <div> con un ancho de 25%, esta medida se tomará respecto de los 1000 px del contenedor, por lo tanto, en principio medirá 250px, pero si el contenedor se achica se achicará también.

Es una muy buena practica el use de rem para el font-size de nuestra pagina o aplicación web, básicamente por el tema de la accesibilidad, muchas personas no cuentan con una visión muy buena y tienen que agrandar las letras del navegador para poder ver bien las letras, sin embargo con el uso de pixeles (px) no se va a notar ningún cambio, debido a que es una medida que siempre va a tener su tamaño original.

Es mala práctica asignar 62.5% al font-size del html, este artículo de Lupita code lo explica muy bien:
https://lupitacode.medium.com/em-vs-rem-cuál-debería-usar-938376e92da0
.
Lo mejor es usar el 100% del font-size, o si estás trabajando con un preprocesador, desarrollar un mixin que te haga se cálculo y trabajar con px dentro del preprocesador para que cuando transpiles lo convierta a rem

En resumen, 62.5% constante universal de todo frontend 🧐

El problema de estos cursos por ejemplo en mi caso que no se NADA pero NADA de programacion es que todo lo que enseña estefany se me hace paisaje osea no encuetro diferencia y menos en que me puede servir o como aplicarlo para obtener resultados o como darle manejo en la vida real. otra cosa es que en todos los videos hace los mismo pero con diferentes comandos. las personas que no saben nada y pagan este curso no quieren las cosas tecnicas pues si quiero lo tecnico me voy directo a google y lo busco nostros queremos ejercicios practicos y ejemplos de como aplicarlos. la verdad estoy desepcionado y arrepentido de comprar este curso ya que muchas cosas las he tenido que buscar en Youtube para entender para que sirven… si me preguntan no recomiendo pagar platzi es mejor aprender en youtube y google.

Cuando usamos width: 100vw, si aparece el scroll horizontal debemos hacer: max-width:100%

Mis apuntes en Notion

Lupita Code tiene una excelente artículo sobre estos temas:
https://lupitacode.medium.com/em-vs-rem-cuál-debería-usar-938376e92da0

Léanlo les ayudará mucho 😃

Unidades de Medidas CSS3

Sobre la investigación de Safari que dejó la profesora:
https://vilcins.medium.com/viewport-bug-in-mobile-safari-ea706efc9c74

Según este artículo, Safari Mobile toma parte del espacio del vh (espacio vertical) para poner su interface. Al parecer no es un bug, sino una interpretación diferente del tema vh.
Ese artículo ofrece 4 soluciones a este tema. Conviene darle una leída.
Espero que sea útil. 😄

Hola, ¿matemáticas? jeje volví.

Mis apuntes en Notion💚

Clase 18 - Unidades de medida

¿Qué son las unidades de medida?

• Son aquellos valores que nos permiten establecer el tamaño de un elemento o tipografía.

¿Qué tipos de unidades de medida existen?

• Absolutas.
• Relativas.

¿Cuáles son las medidas absolutas?

• Px
• Pt
• Pc
• In
• Cm
• Mm

¿Cuál es la medida absoluta más usada en desarrollo frontend?

• Px - Pixels.

¿Cuáles son las medidas relativas?

• Rem
• Em
• Vw
• Vh
• Vmin
• Vmax
• Ex
• Ch

¿Qué son las unidades de medida absolutas?

• Son medidas cuyo valor es absoluto por lo cual el tamaño de un elemento o tipografía no cambiará.

¿Qué son las unidades de medida relativas?

• Son medidas cuyo valor puede varias ya que su valor depende de factores externos.

¿Por qué debemos de tener cuidado al usar las medidas relativas?

• Porque si no tenemos cuidado con el uso de estas, todos los tamaños de nuestros elementos pueden verse alterados con un único cambio.

¿Cuál es la diferencia entre las medidas relativas rem y em?

• La medida em depende del tamaño que tenga el elemento contenedor, mientras que la medida rem únicamente depende del tamaño que tenga el elemento raíz, es decir, el elemento <html>.

¿Cuál es la diferencia que hay entre las medidas relativas de porcentaje, Vh y Vw?

• Las medidas de porcentaje dependen del tamaño que le asignemos a un contenedor padre, por ejemplo, si nuestro contenedor padre le asignamos un valor absoluto de 20px y a uno de sus elementos hijos le decimos que tenga un width de 50% esto significa que el elemento hijo tendrá un width de 10px.
  Por el lado de las medidas Vh y Vw son determinadas por el tamaño de la pantalla, es decir, si decimos que el width de un elemento sea de 100vw esté ocupará el 100% del ancho de la pantalla.

¿Cómo podemos usar de manera correcta la medida rem para dar un tamaño relativo a los textos?

• Lo que se recomienda es que asignemos al elemento <html> un tamaño de fuente del 62.5% de la siguiente manera:

html
        {
            font-size: 62.5%;
        }

• Esto lo hacemos con el fin de que cuando queramos asignar un tamaño a los textos con la medida rem simplemente tengamos que multiplicar el valor que queremos por 10, para asi poder usarlos como si fueran pixeles. Por ejemplo:

html
        {
            font-size: 62.5%;
        }
       
  p
        {
            font-size: 1rem;
        }

• Cómo vemos en este ejemplo lo que estamos haciendo es dar un tamaño de texto a todos los elemento p de 10px.

Absolutas

• No cambian de tamaño por ningún motivo, en caso de que la pantalla sea más pequeña que la medida establecida se generar un overflow (scroll tanto horizontal y/o vertical)

Relativas

• Cambian de tamaña dependiendo de un externo (tamaño del contenedor o tamaño de la pantalla).

  Unidad	Depende de
  em	El elemento que lo contiene
  rem	El elemento raíz :root o <html>
  vw	1% del ancho de la pantalla (view width)
  vh	1% de la altura de la pantalla (view height)
  vmin	1% de la dimensión más pequeña de la pantalla
  vman	1% de la dimensión más grande de la pantalla
  ch	Anchura del carácter “0” del elemento que lo contiene
  lh	Altura de la línea del elemento que lo contiene
  %

  • em: Toma el tamaño del padre directo en donde se haya declarado un font-size.

    • nota: Al tomar el tamaño del padre directo se puede generar un crecimiento desmedido.

    div {
    	font-size: 16px;
    }
    /* output: 16px */
    
    div div {
    	font-size: 1.5em;
    }
    /* output: 24px - Toma como base el tamaño de su padre 16px*/
    
    div div div {
    	font-size: 1.5em;
    }
    /* output: 32px - Toma como base el tamaño de su padre 24px*/
    
    

  • rem: Medida calculada a partir del “agent-user”

    • 1rem === 16px (por default).

    • El valor de rem puede ser modificado dentro de la etiqueta <html> o :root

    • Truco: Usado para que 1.6 rem === 16px

      :root {
      	font-size: 62.5%; /* 1rem === 10px*/
      }
      

  • vw (viewport width): Toma como base le ancho de la pantalla.

    • 1vw === 1% del ancho del área de visualización.
    • Si es responsivo

  • hw (viewport height): Toma como base le alto de la pantalla.

    • 1vw === 1% del alto del área de visualización.
    • Si es responsivo

  • max-width: Estable el máximo width que puede alcanzar un elemento.

    • nota: Normalmente trabaja con un width base.

  • min-width: Estable el mínimo width que puede alcanzar un elemento.

    • nota: Normalmente trabaja con un width base.

  • max-height: Estable el máximo alto que puede alcanzar un elemento.

    • nota: max-height ≠ height para el DOM “visualmente es igual”

  • %: En caso de fuentes toman como medida a calcular el valor declaro en el :root que es de 16px.

  • min-height: Estable el mínimo alto que puede alcanzar un elemento.

    • nota: min-height ≠ height para el DOM “visualmente es igual”

Gracias a este curso he podido tanto repasar cosas como aprender otras que en mi ignorancia había pasado por alto. En 3 años que llevo de aprender desarrollo Frontend no había aprendido a usar los rem, es un sentimiento de culpa que he tenido siempre, pero ahora ya lo se y siento que ya lo domino.

Si configuraron su navegador con otro tamaño de fuente por problemas visuales, como fue mi caso (tenía 18px), recuerden que esa será la medida del tamaño de fuente del html y no de 16px. Por lo tanto Rem tomará ese valor como referencia.

herramienta aprendida autodraw… xd

Les dejo mis apuntes, en vez de cuadernos o libretas, uso mejor los comentarios.

<!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>
    <style>
    /*Medidas Absoulutas: El tamaño no cambiará. (px, mm, cm, in, pc, pt).
    Medidas Relativas: El tamaño va a variar. (rem, em, vw, vh, vmin, vmax, ex, ch)*/
    /*Medidas Absolutas
        Es la unidad de medida que no va a cambiar sin importar el tamaño de la pantalla.
        
        Una unidad absoluta puede ser los píxeles*/
        /*Medidas Relativas
        Estás si pueden cambiar en relación con el dispositivo que lo estamos viendo.

        Las unidades relativas pueden ser porcentajes, em (elemento), rem (root em o root elemento), max-width, max-height, min-width, min-height. Estas últimas varían basándonos en el tamaño de la pantalla.

main {*/
        html{
            font-size: 100%;/*es para que el rem equivalga a 16px,
            pero si ponemos el font size en 62.5, equivaldra a 10px
            esto es para que el calculo de medida sea mas facil*/
        }
        body{
            margin: 0;/*es para que vh y wh tengan margen cero*/
        }
        div{
            width: 100px;
            height: 100px;
            background: blue;
        }
        p{
            font-size: 1rem;/* 1 rem equivale a 16px 
            y se puede aumentar*/
        }
        .container{
            width: 100px; /**wh hace lo mismo que vh pero en width/
            height: 100vh;/*la unidad de medida vh que solo se aplica en heigth
            sirve para alargar un elemento y se hace un scroll*/
            background-color: lightblue;
        }
    </style>
</head>
<body>
    <div>platzi</div>
    <p>Master</p>
    <div class="container"></div>

</body>
</html>

El segundo método es utilizando la unidad vh. Seguramente ya sabréis que para determinar el «tamaño» de un elemento en css podemos utilizar unidades como los píxeles, puntos, porcentajes o incluso em. Pero quizá no hayáis oído hablar de las unidades vh y vw. Una unidad vh (viewport height) equivale a un 1% de la altura del viewport (el total de la pantalla del dispositivo que muestre nuestra web). 1vh = 1% del total de la pantalla, 100vh = 100%. Como os habréis imaginado, la unidad vw es el equivalente para el ancho.

Usando estas unidades podemos determinar una altura fullheight de la siguiente manera:

.fullHeight {
height: 100vh;
}
El problema de este método es su compatibilidad con los navegadores. Actualmente las medidas en vh y vw funcionan en: ie9+, Chrome 34+, Firefox 19+, Safari 7+, Android 4.4+ y iOS 6+. Debemos ser conscientes además de que pueden causar problemas tanto en Safari y Chrome de iOS 6 y 7.

Fuente: https://www.espai.es/blog/2017/02/height-100-css/

Mi duda es cuando deberia usar una y cuando la otra , parecen hacer lo mismo

en safari el width no ocupa todo el espacio si no que un poco más de la mitad del navegador

Adiós pixeles, hola rem! jaja

em y rem se basan en el valor de font-size, se comportan o se traducen a valores de pixel. Si ponemos 1em o 1rem como valor, el navegador va a convertir ese valor en valor pixel(px).
em son relativas al font-size del elemento padre
rem son relativas al font-size del elemento raiz (html)

Cuando usar em y rem en CSS?
Pues los dos van de la mano al momento de responsive design, usabilidad y accesibilidad. Ahora dependerá todo de tu proyecto o preferencia.
Recuerda también que:
em tiene valor de herencia al padre y este puede ocasionar ciertos conflictos en ciertas partes de tu proyecto.
rem se basa en html y esto puede proporcionar un accesibilidad por parte del usuario.

Se puede cambiar el font-size al 62.5% = 10px para tener un calculo fácil al utilizar em o rem, pero esto dificulta al navegador y a nosotros porq duplicaremos el código ya que el tamaño de fuente será pequeño.

Se me olvidó la regla del 3 😦. Y yo que sacaba 4.6 en los parciales de análisis numérico y ecuaciones diferenciales.
aclaro que la nota máxima era de 5 :v

¿Cuándo utilizar em en lugar de rem? 🤔
Cuando quieras algo relativo al tamaño de fuente del mismo elemento o de cualquier elemento padre del que heredará.

También ayuda a la accesibilidad ya que el usuario podrá cambiar el tamaño de tu página web y la letra no sera un problema

rem es una buena practica, así se ajusta el texto según la necesidad de tamaño del usuario.

Usando estas unidades podemos determinar una altura fullheight de la siguiente manera:

.fullHeight {
height: 100vh;
}
El problema de este método es su compatibilidad con los navegadores. Actualmente las medidas en vh y vw funcionan en: ie9+, Chrome 34+, Firefox 19+, Safari 7+, Android 4.4+ y iOS 6+. Debemos ser conscientes además de que pueden causar problemas tanto en Safari y Chrome de iOS 6 y 7.
.
lee aqui el artículo completo

Medidas Absoulutas: El tamaño no cambiará. (px, mm, cm, in, pc, pt).
Medidas Relativas: El tamaño va a variar. (rem, em, vw, vh, vmin, vmax, ex, ch).

ese truco esta espectacular

✅

Que cool, y recuerden 62.5 por los siglos de los siglos

El alto de un elemento en CSS se puede definir en porcentajes, pero el resultado puede variar dependiendo del navegador que se esté utilizando. Esto se debe a que cada navegador tiene su propia forma de interpretar las especificaciones de CSS y puede haber diferencias en la forma en que se calcula el alto de un elemento. En general, los navegadores modernos como Chrome y Safari deberían tener una interpretación similar de las especificaciones de CSS y no debería haber grandes diferencias en la forma en que manejan el alto de un elemento. Sin embargo, siempre es una buena práctica probar el diseño en diferentes navegadores para asegurarse de que se vea bien en todos ellos.

Excelente clase profe…

los porcentajes en los altos varian mucho dependiendo del navegador utilizado por el usuario.

Con devTools del navegador se ve el valor en píxeles

Como cambiar el valor del rem

La Guerra de los Navegadores…

Hay que tener cuidado con el VW y VH, porque estos toman las dimensiones totales del display del navegador, y aquí viene lo importante, incluyendo los sliders, verticales para VW y horizontales para VH

.

Hola señor Dev de platzi, la siguiente s epuede tomar como sugerencia, me gustaria que la parte de los comentarios de las clases aportes o preguntas, pudiesen tener una opción de Pop up, para que se agranden los comentarios y que ocupen el centro de la pantalla, ya que muchas veces la información que se poste aquí, tiene mucho valor complementario a las clases Gracias

Unidades de medida

Las unidades de medida en css se utilizan para definir el tamaño de los elementos, se clasifican en 2 Absolutas y Relativas.

Absolutas

Las medidas absolutas definen un tamaño que nunca va a cambiar aunque el elemento contenedor si cambie, el tamaño va a ser siempre fijo, un ejemplo son las medidas en pixeles px.

Relativas

Las medidas relativas como su nombre lo dice, son relativas a algo, ya sea al elemento que los contiene, al body o al html, su tamaño varía si los tamaños de estos elementos varían, un ejemplo son las medidas em que son relativas al body y las medidas rem que son relativas al html

Tremenda explicacion, estoy empezando, tips que ayudan mucho.

REM PARA FONTS y PX PARA LO DEMÁS (WIDTH, HEIGHT, MARGIN, PADDING).

Unidades de medida relativas
Las unidades de medida en CSS de tipo relativo dependen del elemento o factor al que hagan referencia. Aunque pueden ser inicialmente más complejas, algunos prefieren las unidades de medida relativas porque los tamaños de los elementos dependen el uno del otro. Esto hace que las proporciones entre los elementos se mantengan y todo encaje.

em
Esta unidad es relativa al tamaño de letra o font size establecida en el navegador. Su nombre es em porque el tamaño de letra se basa en el tamaño de la letra eme. A menos que haya sido modificada por el usuario, normalmente este tamaño es de 16px.

ex
Esta unidad es relativa a la altura de la «x» del elemento. También se conoce por ser más o menos la mitad del tamaño de la fuente del navegador o 0.5em.

ch
Conocido en inglés como zero width, esta unidad de medida es relativa al tamaño del ancho del cero en la fuente del navegador.

%
Esta unidad es relativa al tamaño del elemento padre.

rem
La unidad rem o root em es similar a la unidad em, pero, en vez de tomar como base el tamaño de letra del navegador, la unidad em toma el tamaño base del documento HTML. Este tamaño se personaliza bajo la etiqueta :root {font-size}. De este modo, podemos usar rem para dimensionar nuestros elementos con un múltiplo del tamaño base.

Esta unidad puede ser muy útil a la hora de dimensionar una página cuando el usuario hace zoom, pues los elementos serán relativos unos a otros y mantendrán su proporción.

Unidades del viewport
Las siguientes unidades son relativas al viewport, que es el espacio o trozo de pantalla donde se renderiza y se muestra la página web. Estas unidades sirven para dimensionar la pantalla y organizar los elementos dentro de esta.

vw
Como sigla de la unidad en inglés viewport width, esta unidad es relativa al ancho del viewport.

vh
Como sigla de la unidad en inglés viewport height, esta unidad es relativa a la altura del viewport.

vmin
Esta unidad, también conocida como viewport minimum, es relativa al factor que sea más pequeño entre el ancho y al alto del viewport.

vmax
Esta unidad, conocida como viewport maximum, es relativa al factor que sea más grande entre el ancho y el alto del viewport. Junto con vmin, esta unidad puede ser muy útil si queremos que nuestros diseños sean flexibles y se adapten al tamaño visible de la página web.

Las unidades de medida en CSS de tipo absoluto hacen referencia a las unidades que no cambian, esas que en todos lo contextos son iguales. En CSS, existen siete unidades de medida absolutas, te las presentamos a continuación:

in: hace referencia a las pulgadas, que son iguales a 2.54cm.
cm: se refiere a los centímetros.
mm: hace referencia a los milímetros.
q: se refiere a un cuarto de la unidad mm. 1q=0.248mm.
pt: un punto es igual a 1/72 de una pulgada o 0.35mm.
pc: una pica es igual a 12 puntos, o sea 4.23mm.
px: esta etiqueta se refiere a los píxeles que, aunque son absolutos (0.26mm), también son relativos a la densidad de la pantalla

Lo que sucede con los píxeles es que a medida que se le cambia el % a la pantalla, van cambiando los elementos.

• Rem equivale a 16px, para poder tener un equivalente correcto se debe hacer una regla de 3 para saber a cuanto equivalen 10px en un rem, donde el porcentaje correcto será de el 62.5% de nuestro archivo html.
• Con vie witdh y view height se le puede indicar cuánto porcentaje de la pantalla tomar.

En lo personal uso la equivalencia de 1rem = 1px se me hace mas cómodo, por que antes solo utilizaba px; así el salto a rem no es tan doloroso y mas fácil de manejar

(100/1) x 16 = 6.25%;

	   html {
                font-size: 6.5%;
            }

Al fin!! jajajaj luego revisar los códigos de los compañeros unas 20 veces el video de la profe unas 20 veces encontré la solución a mis problemas subo mi Ejercicio.

No confundir a la unidad rem con la una unidad de medida para indicar la peligrosidad de una radiación —Röntgen equivalent man, rem — , que debe su nombre al físico alemán Wilhelm Röntgen. 🤓

RESETEO DE PX A REM

html{
font-size: 62.5%; (equivale a 16px)

entonces poniendo el 62.5%
1 rem = 10px
2 rem = 20px
etc

por que 62,6?
R= 10(pixeles que quiero hacer) * 100 / 16 (pixeles automaticos)

10 * 100 = 1,000 / 16 = 62.5%

LO MEJOR ES REM !!!

la medida relativa rem se utiliza para mejorar la accesibilidad con el navegador ya que las medidas absolutas no varian en ningun momento

Unidades de Medidas

Absolutas

• Px (Píxeles)
• pt (Puntos)
• pc (Picas)
• in (PLugadas)
• cm (Centimetros)
• mm (Milimetros)

El valor que usarás frecuentemente es px (Píxeles)

Relativas

• em (Tamaño de letra del elemento padre, en el caso de propiedades tipográficas como font-size, y tamaño de la fuente del propio elemento en el caso de otras propiedades, como width.)
• ex (Altura x de la fuente del elemento.)
• ch (La medida de avance (ancho) del glifo “0” de la letra del elemento.)
• rem (Tamaño de la letra del elemento raíz.)
• lh (Altura de la línea del elemento.)
• vw (1% del ancho de la ventana gráfica.)
• vh (1% de la altura de la ventana gráfica.)
• vmin (1% de la dimensión más pequeña de la ventana gráfica.)
• vmax (1% de la dimensión más grande de la ventana gráfica.)

Unidades Relativas

Es como mejor definir 6.25% el font así un rem = 1 px, con eso se colocan exactamente los pixeles que se requieren y nos ahorramos un punto

Cálculo de los rem: font-size: 62,5% para que un rem sea 10px.

1 rem equivale a 16px cuando el font-size: 100%

Dejo mis apuntes aquí:
https://drive.google.com/file/d/1CdyrV35NIZzdNcCNEEYwlQhZHQRZQh5F/view?usp=sharing

Para diseño responsivo lo mejor es usar medidas relativas. Ya que las pantallas no van a tener la misma medida de tu pantalla siempre. Incluso las pantallas de los teléfonos tienen diferente tamaño. EM, REM y VH son las mejores opciones, y aprender a usarlas es súper fácil.

Encontré esta calculadora que me ayudó a entender un poco mejor: https://codepen.io/piccalilli/pen/Yrmxqw

Me siento algo confuso, pero continuaré!
He tenido esa duda del responsive y creo que lo planteado por la profe tiene bastante que ver con ello.
No me congestionaré con mas lecturas! Sigamos despejando dudas!!!

Hacía el cálculo de rem pero no sabia cómo obtenía la solución de 62.5 %.

Notes:

• En CSS existen 2 tipods de medidas:
  • Absolutas → No dependen de nadie para ser ellas mismas
  • Relativas → Si dependen de alguien mas para calcular su tamaño
• La medida absoluta mas usada son los px
• rem → root element que es el HTML y tiene un valor por defecto de font-size de 16px
• Un “truco” utilizado para modifcar el valor de rem a 10px es sobreescrbiir el font-size del html con un valor de 62.5%
• vh y vw son de las medidas relativas mas utilizadas, y hacen referencia de manera respectiva a: view height y view width

No se me había ocurrido que ese truco salía de una regla de 3

Las alturas es un problema, pero la solución es usar la medida vh, que por safari y chrome.

Yo prefiero en la etiqueta HTML especificar en PX el font size base del sitio para que ese sea mi tamaño general de fuente y los elementos que lo requieran manejarlos en REM así es más fácil calcular. Ejem: Ya se que un título 2rem = 2 veces mi tamaño base

<!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>
<style>
section {
width: 100%;
display: flex;
justify-content: center;
}
.card {
width: 300px;
height: 300px;
background: papayawhip;
border-radius: 20px;
overflow: hidden;
}
.card img {
width: 100%;
}
.card p {
text-align: center;
}
.card p:nth-child(3) {
color: Turquoise;
}
</style>
</head>
<body>
<section>
<div class=“card”>
<img src=“https://images.pexels.com/photos/1056251/pexels-photo-1056251.jpeg?auto=compress&cs=tinysrgb&h=650&w=940” alt=“cat”>
<p>Cat: Mimi</p>
<p>Love</p>
</div>
</section>
</body>
</html>

Lo básico para la mayoria de las páginas 😁

/* Eliminar márgenes  y bordes de toda la pag web*/
*{
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

/* Se escala la pag web al 62.5% (todo el contenido del html)*/
html{
    font-size: 62.5%; /* 100% = 16px, por lo cual 62,5% es igual a 10px para los calculos con unidades rem. 1rem = 10px */
} 

Resolviendo la duda sobre como diferentes browsers toman el height: https://stackoverflow.com/questions/35532987/heights-rendering-differently-in-chrome-and-firefox

La explicación más corta y concisa que encontré fue la siguiente:

In other words, for percentage height to work on an in-flow child, the parent must have a set height.

Básicamente en Firexfox (desktop y mobile) para que el alto (height) funcione con porcentajes en los elementos hijos, el elemento padre debe tener definido un alto también.

Yo Uso porcentaje para backgrounds y sections
uso px para texto e imagenes… Todos trabajamos totalmente diferente XD

Es más fácil clavar un font.-size en px al body y de ahí partis con los rem. Y no andar haciendo cálculos partiendo de los 16 px por defecto.

Encontre articulos donde indican algunas cosas curiosas sobre el alto en los navegadores Safari, Chrome y Firefox, claro que no sé que tan veridico sea, pero aquí lo dejo:

Indican que en Safari hay un problema que ya se encuentra solucionado en Chrome y Firefox, y es que si se define un max-height a un elementos padre, la altura que se defina en los elementos hijos toman un valor incorrecto al que se defina.

El que sepa del tema, puede complementar o corregir esta información.