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
