Unidades de medida en CSS

En un post anterior prometí hablar sobre las unidades de medida en CSS, y es que estamos acostumbrados a usar por lo general «px», o porcentaje, pero realmente son varias las unidades de medida que podemos usar y algunos son casi desconocidos.

Píxeles (px)

La unidad de medida más utilizada. Un píxel en realidad no tiene relación directa con un pixel físico de tu pantalla, ya que eso varía mucho según el dispositivo.  Existe una convención que hace que esta unidad funcione de manera consistente en todos los dispositivos.

Porcentajes

Otra medida muy útil, los porcentajes le permiten especificar valores en porcentajes de la propiedad correspondiente de ese elemento padre.

Ejemplo:

.parent {
  width: 400px;
}

.child {
  width: 50%; /* = 200px */
}

Unidades de medida del mundo real

Existen otras unidades de medida que se traducen del mundo exterior. Mayormente inútiles en la pantalla, pueden ser útiles para imprimir hojas de estilo. Son:

• cm un centimétro corresponde a 37.8 px
• mm u milímetro corresponde a 0.1cm
• q un cuarto de milimetro
• in una pulagada corersponde a 96 px
• pt un punto(1 pulgada= 72 puntos)
• pc una pica (1 pica = 12 puntos)

Unidades relativas

• em es el valor asignado al tamaño de fuente de ese elemento, por lo tanto, su valor exacto cambia entre los elementos. No cambia dependiendo de la fuente utilizada, solo del tamaño de fuente. En tipografía, esto mide el ancho de la letra m.
• rem es similar a em, pero en lugar de variar el tamaño de fuente del elemento actual, utiliza el tamaño de fuente del elemento raíz (html). Establece ese tamaño de fuente una vez, y rem será una medida consistente en toda la página.
• ex es como em, pero insertado de medir el ancho de m, mide la altura de la letra x. Puede cambiar dependiendo de la fuente utilizada y del tamaño de fuente.
• ches como ex pero en lugar de medir la altura de x mide el ancho de 0 (cero).

Unidades del viewport

• vw la unidad de ancho de la ventana representa un porcentaje del ancho de la ventana. 50vw significa el 50% del ancho de la ventana gráfica.
• vh la unidad de altura de la vista representa un porcentaje de la altura de la vista. 50vh significa el 50% de la altura de la ventana gráfica.
• vmin la unidad mínima de ventana representa el mínimo entre la altura o el ancho en términos de porcentaje. 30vmin es el 30% del ancho o alto actual, dependiendo de cuál sea más pequeño
• vmax la unidad de vista máxima representa el máximo entre la altura o el ancho en términos de porcentaje. 30vmax es el 30% del ancho o alto actual, dependiendo de cuál es más grande

Unidades de fracción

fr son unidades de fracciones, y se usan en CSS Grid para dividir el espacio en fracciones.