Unidades de medida en CSS, la guía definitiva

Cuando nos interesamos en saber “cómo desarrollar una web desde cero”, empezamos a descubrir un mundo de sintaxis, herramientas y otras miles de cosas que pueden confundirnos en un inicio. Y en el peor de los casos nos lleven a eliminar la idea de aprender porque simplemente no supimos por dónde comenzar. Un paso muy importante en el aprendizaje web es estudiar las unidades, tamaños y medidas que podemos utilizar en CSS. Una forma clara de entenderlo y llevarlo al mundo real es imaginar que vamos a dibujar algo, para empezar necesitaremos una hoja de papel, elegir el tamaño de la misma y el tipo de lápices que vamos a utilizar. Sin embargo, estos últimos no son tan importantes como lo son los trazos que podemos hacer con ellos. Dicho esto, ahora lo llevaremos al mundo virtual (al mundo de la web). El papel serán las diferentes resoluciones de pantalla que abarcan los dispositivos móviles, tabletas, equipos de mesa y portátiles; y los trazos son los distintos tipos de letra (fonts). Específicamente sus tamaños, distancia entre cada palabra e incluso entre cada letra. Las unidades y medidas en CSS están divididas en dos grandes grupos:

1. Unidades Absolutas
2. Unidades Relativas

Vamos a profundizar en estos dos grupos para conocer las medidas que los componen:

Unidades absolutas

Como su nombre lo indica, son unidades que están completamente definidas. Esto quiere decir que su valor no depende de otro valor de referencia. En este grupo encontramos los siguientes elementos:

• cm: Aumenta el tamaño de nuestro texto o elemento en centímetros
• mm: Aumenta el tamaño de nuestro texto o elemento en milímetros
• in: Aumenta el tamaño de nuestro texto o elemento en pulgadas (1in = 96px = 2.54cm)
• px: Aumenta el tamaño de nuestro texto en pixeles (Dependiendo del dispositivo, este elemento se clasifica también en Unidades Relativas. Aunque también depende de la versión de CSS que se maneje)
• pt: Aumenta el tamaño de nuestro texto en puntos (1pt = 1/72 de 1in)
• pc: Aumenta el tamaño de nuestro texto en picas (1pc = 12 puntos aprox)

Ya que el pixel es una de las unidades absolutas más utilizadas, realizaremos un ejemplo: CSS: h1 {font-size: 50px;} HTML:

Medidas en CSS3

RESULTADO:

Unidades relativas

Este tipo de unidad es más flexible y se expresa en forma de porcentaje (%). Me refiero a su flexibilidad porque se adapta de acuerdo al tamaño de otro valor de referencia. Por ejemplo, en el mundo real tu hermano y tú tienen dos balones de futbol. Un balón es grande y el otro es pequeño, pero a cada uno le corresponde la mitad de cada uno de esos balones (50%). No importa el tamaño del balón, porque igual siempre vas a ser dueño del 50%. Entonces, si el balón grande redujera su tamaño, igual tendrías el 50% de este. Ahora aplica este ejemplo a los distintos tipos de resolución de pantalla. Ahora bien, las unidades relativas se subdividen en 2 grupos:

1. Relativas a la tipografía
2. Relativas al viewport

Relativas a la tipografía

• em: Relativo al tamaño de fuente de un elemento. Si, por ejemplo, utilizamos 3em (font-size: 3em); mi texto aumentará 3 veces su tamaño en relación al tamaño que se esté utilizando por defecto.
• ex: Aumenta el tamaño de mi letra en cuanto a su altura.
• Rem: Es igual a (em) con la diferencia de que este actúa en la raíz. O sea, en la letra que esté utilizando por defecto.

Relativas al viewport - ventana

• **vw: **Porcentaje relativo a la anchura del viewport.
• vh: Porcentaje relativo a la altura del viewport.
• vmin: Entre vw y vh toma el que tenga menor valor.
• vmax: Entre vw y vh toma el que tenga mayor valor.

Las unidades relativas al viewport son muy importantes y se deben tomar en cuenta cuando realizamos una web para varios tipos de resolución de pantalla. Combinando esta serie de medidas con otros elementos que podemos agregar a nuestra sintaxis conseguiremos realizar un excelente trabajo. Si quieres profundizar más en el uso de las medidas en CSS y aprender a utilizarlos en un proyecto; veremos esto y muchas más técnicas de CSS, Stylus y Responsive Design en nuestro curso profesional de Frontend. ¿Estás listo para ser un experto en la carrera mas demandada de la industria?. ¡Unete ahora!.