No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Adquiere por un a帽o todos los cursos, escuelas y certificados por un precio especial.

Antes: $249

Currency
$219/a帽o

Paga en 4 cuotas sin intereses

Paga en 4 cuotas sin intereses
Comprar ahora

Termina en:

0D
1H
58M
5S

Unidades de medida

18/24
Recursos

Las unidades de medida establecen una longitud para un determinado elemento o tipograf铆a. Existen dos tipos de medidas: absolutas y relativas.

Medidas absolutas y relativas

Qu茅 son las medidas absolutas

Las medidas absolutas son valores fijos, por lo que la medida no cambiar谩. La unidad absoluta m谩s utilizada son los p铆xeles px, las dem谩s son muy poco utilizadas, pero es bueno que las conozcas.

Unidad Nombre Equivalencia
px p铆xeles 1 px = 1/96 in
cm cent铆metros 1 cm = 96/2.54 px
mm mil铆metros 1 mm = 1/10 cm
Q cuartos de mil铆metros 1 Q = 1/4 mm
in pulgadas 1 in = 2.54 cm = 96 px
pc picas 1 pc = 1/6 in
pt puntos 1 pt = 1/72 in

Qu茅 son las medidas relativas

Las medidas relativas son valores variables, por lo que la medida depende de un valor externo. Se debe tener en cuidado con estas porque un peque帽o cambio puede desencadenar tama帽os muy elevados.

Unidad Depende de
em el elemento que lo contiene
rem el elemento ra铆z
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 caracter 鈥0鈥 del elemento que lo contiene
lh altura de la l铆nea del elemento que lo contiene

Diferencia entre rem y em

La medida em depende del elemento que lo contiene, es decir, si un elemento tiene font-size de 20px, el valor de em es igual a 20px, el valor de 2em ser谩 de 40px y as铆 sucesivamente.

La medida rem depende del elemento ra铆z, el valor del font-size del elemento ra铆z es de 16px, por lo tanto, el valor de 2rem es igual a 32px, y as铆 sucesivamente.

En las herramientas del desarrollador, te muestra el tama帽o de la fuente (font) en p铆xeles.

Medida absoluta en las herramientas de desarrollador

Diferencia entre porcentajes y la anchura y altura de la pantalla

Los porcentajes representan el tama帽o con respecto al total del elemento padre. Si el elemento padre tiene 20px, entonces el 100% ser谩 de 20px.

Por otra parte, las medidas de anchura vw y altura vh representan el tama帽o con respecto al total de la pantalla. Si el elemento tiene un tama帽o de 100vw ser谩 el 100 por ciento de la pantalla.

Si un elemento tiene todo el tama帽o de la pantalla, entonces solamente en ese punto la medida 100% ser谩 igual a 100vw o 100vh.

Problema con las medidas de texto

Los navegadores tienen una opci贸n para cambiar el tama帽o del texto. Con medidas absolutas, el tama帽o de la letra no cambiar谩, por lo que ser谩 un problema para el usuario.

Con medidas relativas, el tama帽o cambiar谩 con respecto a la fuente del elemento ra铆z. Por lo que estas son una buena opci贸n para solucionar este problema de accesibilidad, en espec铆fico la medida rem.

Sin embargo, la medida rem equivale a 16px y puede ser confuso mientras utilices valores altos. Por lo que vamos a cambiar el valor del elemento de la ra铆z para que la medida rem sea igual a 10px.

En la etiqueta <html> cambia el valor de la propiedad font-size a 62.5%, resultado de una regla de tres: si 16px es igual al 100% entonces cu谩l ser谩 el porcentaje para 10px.

html {
    font-size: 62.5%;
}

Con este cambio, la medida rem ser谩 igual a 10px, ahora los puedes utilizar sin problema y tus textos cambiar谩n seg煤n las preferencias de usuario.

Contribuci贸n creada por Andr茅s Guano (Platzi Contributor).

Aportes 99

Preguntas 22

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

馃憖 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 鈥渕edidas fijas鈥 o 鈥渆st谩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%

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 馃槂


Una manera m谩s f谩cil ser铆a agregar . html{ font-size: 10px; } Y funcionaria igual

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铆.

Pregunta Respuesta
驴Cu谩les son los dos tipos de medidas en CSS? Las dos tipos de medidas en CSS son las medidas absolutas y las medidas relativas
驴Qu茅 caracteriza a las medidas absolutas? Son independientes de las dimensiones de la pantalla y mantienen su tama帽o constante, como los p铆xeles, cent铆metros y pulgadas
驴Cu谩l es el ejemplo principal de medida absoluta? Es el uso de p铆xeles (px) para definir tama帽os fijos de elementos en la pantalla
驴Qu茅 son las medidas relativas? Las medidas relativas son aquellas que dependen de factores como el tama帽o de la pantalla o del elemento padre
驴C贸mo afecta el zoom a las medidas absolutas? Las medidas absolutas mantienen su tama帽o constante incluso cuando se hace zoom en la p谩gina, a menos que la resoluci贸n de la pantalla cambie
驴C贸mo se relacionan los porcentajes y los elementos? Los porcentajes se adaptan al tama帽o del elemento padre
驴Qu茅 es un rem y c贸mo se calcula? Un rem es una medida relativa que est谩 relacionada con el tama帽o de fuente del elemento ra铆z. Se calcula dividiendo el tama帽o de fuente del elemento ra铆z por el valor del rem
驴Cu谩l es la ventaja de usar rem en el dise帽o? En el dise帽o permite una forma m谩s f谩cil y consistente de cambiar tama帽os en relaci贸n con el tama帽o de fuente base, en comparaci贸n con los c谩lculos complicados que se necesitan con p铆xeles
驴Cu谩les son algunas unidades de medidas relativas? Incluyen vw, vh, vmin y vmax
驴Qu茅 significa la medida relativa vw y vh, y qu茅 conforman? (vw) viewport width, (vh) viewport high. Es el ancho y alto de la ventana de visualizaci贸n del navegador, es decir, el 谩rea visible en la pantalla donde se muestra el contenido web
驴C贸mo se le llama al conjunto de vw y vh? Viewport (ventana de visualizaci贸n del navegador
驴Qu茅 hacen vmin y vmax? vmin representa el valor m铆nimo entre el ancho y el alto del viewport. vmax representa el valor m谩ximo entre el ancho y el alto del viewport

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)
Unidad Nombre Equivalencia
px p铆xeles 1 px = 1/96 in
cm cent铆metros 1 cm = 96/2.54 px
mm mil铆metros 1 mm = 1/10 cm
Q cuartos de mil铆metros 1 Q = 1/4 mm
in pulgadas 1 in = 2.54 cm = 96 px
pc picas 1 pc = 1/6 in
pt puntos 1 pt = 1/72 in

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 鈥渁gent-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-heightheight para el DOM 鈥渧isualmente 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-heightheight para el DOM 鈥渧isualmente 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 鈥擱枚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%

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

cual es la direferencia entre el borde en s谩fire y chorme como dijo la profe

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 鈥渢ruco鈥 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=鈥渆n鈥>
<head>
<meta charset=鈥淯TF-8鈥>
<meta http-equiv=鈥淴-UA-Compatible鈥 content=鈥淚E=edge鈥>
<meta name=鈥渧iewport鈥 content=鈥渨idth=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=鈥渃ard鈥>
<img src=鈥https://images.pexels.com/photos/1056251/pexels-photo-1056251.jpeg?auto=compress&cs=tinysrgb&h=650&w=940鈥 alt=鈥渃at鈥>
<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.