Tecnologías de la Información y la Comunicación · 2º Bachillerato
Curso 2016/2017·  

Unidades de medida en CSS

Un aspecto muy importante en el aprendizaje web es estudiar las unidades, tamaños y medidas que podemos utilizar en CSS. Para entenderlo mejor,  imaginanemos que vamos a escribir o 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 de otro modo, el papel serían las diferentes resoluciones de pantalla que van desde los dispositivos móviles, tabletas, portátiles y equipos de escritorio; y los trazos las líneas, las formas y los distintos tipos de letra (fonts). Específicamente sus tamaños, distancia entre cada palabra e incluso entre cada letra.

En CSS nos encontramos con dos grandes grupos de unidades:

  1. Unidades absolutas
  2. Unidades relativas

Unidades absolutas

Son unidades que están completamente definidas, es decir,  su valor no depende de otro valor de referencia. Es conveniente utilizarlas lo menos posible porque limita los gustos de los usuarios y es más dificil trabajar con diseños adaptables (Responsive Web Design). Al usar pixeles para definir las dimensiones de los objetos y los estilos de fuente no solo estamos definiendo tamaños rígidos, sino que también estamos ignorando las configuraciones que cada usuario pueda tener en su navegador.

  • 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 (depende de la pantalla)
  • 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)

Unidades Relativas

Este tipo de unidad es más flexible porque se adapta de acuerdo al tamaño de otro valor de referencia. Son unidades expresadas en porcentajes (%). Es conveniente utilizarlas siempre que podamos, sobre todo para diseños "responsive", adaptables a los distintos tamaños de dispositivos.

Relativas a la tipografía

  • em: relativa respecto de la anchura de la letra M "eme mayúsculas") del tipo de letra que se esté utilizando en el contenedor padre (se hereda).
  • ex: relativa respecto de la altura de la letra x "equis minúscula") del tipo de letra que se esté utilizando.
  • rem: relativa respecto de la anchura de la letra M "eme mayúsculas") del tipo de letra que se esté utilizando en el contenedor raiz (no se hereda).

 Relativas al viewport

  • vw: porcentaje relativo a la anchura del viewport (pantalla).
  • vh: porcentaje relativo a la altura del viewport.
  • vmin: entre vw y vh se escoge el que tenga menor valor.
  • vmax: entre vw y vh se escoge el que tenga mayor valor.

Las medidas vh y vw son medidas relativas de acuerdo al viewport. Vh hace referencia a la centésima parte de la altura del viewport y vw a la centésima parte del ancho del viewport. Estas medidas tienen múltiples usos, por ejemplo cuando queremos tener una imagen de fondo que ocupe todo el ancho y alto de nuestro pantalla. También cuando queremos que nuestro texto varíe de acuerdo a las medidas del dispositivo.

1vh = 1% de la altura del viewport
100vh = altura del viewport
1vw = 1% del ancho del viewport
100vw = ancho del viewport

Unidades de medida recomendadas

Ha quedado claro el por qué no es una buena idea usar los pixeles como unidad de medida para el diseño web pero entonces ¿Cuál es la alternativa?

Como he dicho antes te recomiendo 3 unidades de medida en CSS que son las que creo se deberían usar en el diseño web actual y explicarte (en términos generales) en qué circunstancias deberíamos usar cada una de ellas:

Porcentajes

La unidad de medida porcentual es la que se usa por defecto en los elementos HTML en donde de manera predeterminada cada elemento de bloque usa un ancho del 100%, es por eso que cuando reducimos la ventana del navegador con una página que no tenga estilos, la página se adapta, ya que siempre usará el ancho total visible.

Pero nosotros podemos utilizar  los porcentajes de una manera más avanzada tratando de generar "layouts" más complejos.

Supongamos, por ejemplo, que tienes un div que contiene todos los elementos de la página y, según el diseño, este elemento debe medir 1280 pixeles. En lugar de caer en la tentación de simplemente usar esa medida en pixeles, te recomendaría usar una medida en porcentajes, en donde el máximo ancho del elemento sean esos 1200px.


.container {
	margin: 0 auto;
	width: 96%;
	max-width: 1280px;
}

Con estas 3 propiedades de CSS conseguimos que a) El elemento se centre en la página, b) tenga un ancho del 96% de la ventana y c) su ancho nunca sea superior a 1280 pixeles.

Es  decir, hemos conseguido que el elemento con la clase container sea responsive sin la necesidad siquiera de escribir un media query.

El uso de los porcentajes también lo podemos llevar a elementos interiores del layout, en donde, por ejemplo, podemos asignar a la columna principal de contenido y a la barra lateral unas medidas de ancho del 75% y el 25% respectivamente, haciendo que sean completamente adaptables al tamaño de su elemento contenedor.

Em

Un em, es básicamente el tamaño de una letra “M” (como ya hemos dicho) del elemento al cual se esté aplicando esta medida. Es decir, si en elemento tiene aplicado un tamaño de  fuente de 16 pixeles, entonces 1 em será igual a 16px (los navegadores de manera predeterminada definen un font-size de 16px al elemento HTML, por lo tanto, por defecto 1em es igual a 16px).

La unidad em es escalable y siempre depende de su elemento padre. Por ejemplo, si el elemento body tiene un tamaño de fuente de 16px y un elemento hijo tiene una fuente con tamaño 1.3em, este texto se mostrará con un tamaño un 30% más grande que el del body (20.8px), mientras que si dentro de ese elemento tenemos otro hijo con un font-size de 1.3 em, el tamaño de fuente de este objeto sería un 30% más grande que el tamaño de su padre (27.04px).

Body = 1em (16px)
Hijo = 1.3em (16px x 1.3 = 20.8px)
Nieto = 1.3em (20.8px x 1.3 = 27.04px)

Es recomendable usar la unidad de medida em para definir los tamaños de fuente, los altos de línea y también para elementos de diseño que no requieran ser muy exactos o que requieran una medida que tenga relación con el tamaño del texto, como por ejemplo el margen entre párrafos, el relleno interior de los blockquotes, etc.

También se puede aplicar a elementos generales del layout aunque no es muy recomendable, ya que si eventualmente se cambia el tamaño de fuente de uno de ellos, se podría estropear el diseño.

Rem

La unidad de medida rem es muy similar a em, con la única diferencia de que no es escalable, esto quiere decir que no depende del elemento padre, sino del elemento raíz del documento, el elemento HTML. Rem significa “Root Em“, o sea, es un em basado en la raíz.

Esto significa que si el elemento HTML tiene un tamaño de fuente de 16px (como es por defecto), entonces 1rem, sería igual a 16px, y si queremos aplicar un tamaño basado en rem a cualquier elemento de la página, no importará cual sea el tamaño de fuente que tenga asociado ese elemento, ya que 1rem siempre será igual a 16 pixeles a no ser que se modifique el elemento raíz.

Usar rem nos permite cierta estructura para poder definir ciertas partes del layout, pero al mismo tiempo nos entrega cierta escalabilidad para respetar las configuraciones de cada usuario.

Esta unidad de medida es recomendable para aplicar a elementos del layout que requieran medidas fijas y eventualmente también para textos que deseemos que tengan un tamaño de fuente que no dependa de su elemento padre.

Los rem, son una unidad muy interesante también para definir los media quieries de CSS. Dale un vistazo al código fuente de esta misma página y verás que los rem, son la unidad más utilizada en diferentes instancias.

Para poder convertir una medida de pixeles a rem solo tienes que multiplicar el tamaño que quieres obtener por el número 0.0625, eso te dará el tamaño que debes usar en rem. Así es como he llegado a definir que 75rem es igual a 1200px:

75rem = 1200px x 0.0625

Etiquetas: Teoría, CSS3

Imprimir

En línea...

Hay 20 invitados y ningún miembro en línea

Prácticas...

aulav

Visitas...

0.png8.png4.png4.png9.png
Hoy ........23
Ayer .......13
Mes ........156

Lunes, 11 Diciembre 2017