Unidades de Medida en CSS

Unidades de medida en CSS

 

Una vez hemos visto que es el CSS y para que se utiliza, pasamos a definir las unidades de medida más utilizadas

Unidad de medida en CSS

La unidad de media, simplificando, indica el tamaño que ocupa el elemento, ya sea un texto, una caja, un margen, etc., en pantalla o en el espacio de trabajo.

Tipos de unidades de medida en CSS

En CSS tenemos dos tipos de unidades de medida, las absolutas y las relativas.

Unidades de medida Absolutas.

Las unidades de medida absolutas establecen un valor fijo para el elemento, y que siempre va a ser el mismo, no varía en ningún momento

En CSS existen todas estas unidades de medida, aunque realmente solo se utiliza el px (pixel)

cm – Centímetros
mm – Milímetros
Q – Cuartos de milímetros
in – Pulgadas
pc – Picas
pt – Puntos
px – Píxeles

 

Unidades de medida Relativas.

Las unidades relativas, son unas medidas flexibles y donde los elementos que las usan se adaptan al espacio de trabajo que los contiene. Son ideales para escalar perfectamente todo el maquetado independientemente del tamaño de la ventana gráfica.

Las unidades Relativas utilizadas en CSS son las siguientes.

em – Tamaño de letra del elemento padre.
ex – Altura x de la fuente del elemento.
ch – La medida de avance (ancho) del glifo “0” de la letra del elemento.
rem – Tamaño de la letra del elemento raíz.
lh – Altura de la línea del elemento.
vw – 1% del ancho de la ventana gráfica.
vh – 1% de la altura de la ventana gráfica.
vmin – 1% de la dimensión más pequeña de la ventana gráfica.
vmax – 1% de la dimensión más grande de la ventana gráfica.
% – Porcentaje

En el caso de los porcentajes se establecen siempre en relación con otro valor. Por ejemplo, si estableces el atributo font-size como un porcentaje, será un porcentaje del font-size del elemento padre. Si usas un porcentaje para un valor width, será un porcentaje del atributo width del elemento padre, ya sea el <body> o cualquier <div> que lo contenga.

 

Ejemplo de utilización de px, em y rem:

 

See the Pen
px, em y rem
by Alberto (@alnuper)
on CodePen.

 

Con respecto a los porcentajes, normalmente los utilizaremos para medidas de cajas contenedoras. En este ejemplo podemos ver como los elementos div que utilizan unidades porcentuales para especificar el tamaño se van adaptando al elemento padre que los contiene.

See the Pen
porcentaje
by Alberto (@alnuper)
on CodePen.

 

Ahora veamos un ejemplo con vw, que es una medida que representa el 1% de la ventana gráfica. En este ejemplo vemos un párrafo fuente de un tamaño de letra del 1% del tamaño de la ventana gráfica (1vw), otro párrafo, en este caso de la clase “ejemplo2” (más adelante veremos las clases), con un tamaño de fuente del 2% del tamaño de la ventana gráfica (2vw), y también hemos puesto ese mismo párrafo dentro de un contenedor de tamaño 50% de la ventana gráfica (50vw) para que veáis que también se puede usar para medidas de tamaños de caja y que el texto que hay dentro es independiente al tamaño de la caja que lo contiene (padre), al llevar la unidad vw siempre es relativa al tamaño de la ventana gráfica y solo a ella.

 

See the Pen
vw
by Alberto (@alnuper)
on CodePen.

 

Realmente como irás viendo, las unidades con las que más vamos a trabajar son con los px – pixeles, como medida absoluta y los % – Porcentajes, aunque también se suele utilizar bastante el vw, y el em