Unidades de Medida en CSS

Es un tema que suele ser subestimado por muchos Frontend designers pero cuenta con gran relevancia al momento de definir comportamientos de los contenidos de un sitio web en PC, Tabletas y teléfonos inteligentes.

La W3C es quien define los estándares del lenguaje y brinda a los navegadores web una guía de implementación para cada versión de su motor de renderizado. Afortunadamente en 2018 las unidades de medida no son inconvenientes para una buena experiencia de usuario en navegadores (incluyendo Internet Explorer) vamos a entender como funciona cada una.

• Pixeles
• Porcentaje
• Tipográficas
• Viewport

Pixeles (px): Es la unidad de referencia fija para contenidos digitales, utilizada en diseños estáticos.

<button>texto</button>


button{
   width:200px;
}

//Genera una medida que no es influenciada por ningún elemento del DOM

Porcentaje (%): Es relativa al contenedor de último nivel (Padre directo del elemento).

 <article><button>texto</button></article>


article{
  font-size:32px;
}

button{
  font-size:50%;
}

// el elemento hijo realiza el cáculo basado en la medida del padre directo

EM y REM: Provienen del contexto tipográfico en el que se asigna el tamaño de la fuente por la letra "m" aunque puede ser aplicada para definir tamaños de contenedores.

El cálculo es realizado por el navegador donde el número multiplica la variable em ( es asignada por el padre).

<!-- em -->
 <article><button>texto</button></article>


article{
  font-size:32px;
}

button{
  font-size:0.5em;
}
// se multiplica m que es igual a 32 pixeles por 0.5 dando como resultado
// 16px en el tamaño de fuente para el boton.

<!-- rem --><article><button>texto rem</button></article>


article{
  font-size:32px;
}

button{
  font-size:0.5rem;
}
// No obedece el cálculo de su contenedor directo solo al primario en este caso
// a la etiqueta html que por defecto tiene 16px; (varía según navegador) 

• em es relativa al contenedor padre del elemento (al igual que porcentaje)
• rem es relativa al contenedor :root de la página, la etiqueta HTML es consiferada por todos los navegadores actuales como el :root del que todo el contenido derivan (botones, textos, videos, etiquetas semánticas y de configuración).

ViewPort (width, height)

Esta medida surge a la necesidad de representar diseños fluidos según el dispositivo en el que se muestra.

<article><button>texto</button>
</article>
<button id="vw">texto</button>
article{
  width:600px;
}

article> button{
  width: 50%;
}
/* dependerá directamente del tamñano de su padre */

button#vw{
  width: 50vw;
}
/* dependerá del ancho asignado al navegador web por parte del sistema operativo
   Android, IOS, Windows, Linux, SmartWatch, wearables, otros...

• vw: Define su medida basándose en el ancho del documento (no me refiero al body) que en su caso es calculado por el window. El objeto window es el encargado de asignar características al programa (chrome, Safari, Opera, Internet Explorer, Android browser, IOS browser)
• vh Similar al vw pero su cálculo proviene del alto.

Espero dar una claridad de sus ventajas y usos en diseño web profesional, en casos reales es recomendado acompañar el tema con media Queries para garantizar una visualización proporcional al tamaño del Layout (dispositivo o navegador) #css #frontend #responsiveDesign #DiseñoResponsivo #cssResponsive #joshuaDaza