UNIDADES DE MEDIDA CSS

Las unidades y medidas en CSS están divididas en dos grandes grupos:

• Unidades Absolutas
• 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: <h1>Medidas en CSS3</h1> RESULTADO:

Medidas en css3

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:

• Relativas a la tipografía
• 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.

BIBLIOGRAFIA:

https://msdn.microsoft.com/es-es/library/dn602493.aspx