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%; 
}

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

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

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.

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

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.

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.

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

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

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;
}

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

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

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

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

Unidades de Medidas CSS3

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 😃

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

herramienta aprendida autodraw… xd

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.

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.