En esta página:
En CSS existen muchas unidades para definir una longitud, los valores de una longitud pueden ser ancho, margen, relleno, tamaño de fuente, ancho de un borde, alto entre otros, si eres diseñador Frontend es importante que sepas cuales son las unidades de medida que puedes usar en CSS, en este artículo compartiremos contigo dichas unidades de medida, vayamos al artículo.
En CSS existen básicamente 2 tipos de unidades de medida que son Relativas y Absolutas
Unidades de Medida Relativas
Este tipo de unidades de medida determinan una medida que es relativa a otra propiedad de medición, este tipo de unidad de medida es escalable entre diferentes medios de representación, a continuación puedes ver los tipos de unidades de medida relativas y como dependen de otros factores
| Unidad | Descripción |
|---|---|
| em | Relativo al tamaño de la fuente del elemento (2em significa 2 veces el tamaño de la fuente actual) |
| ex | Relativo a la altura x de la fuente actual (rara vez se utiliza) |
| ch | Relativo al ancho de 0 |
| rem | Relativo al tamaño de la fuente del elemento raíz |
| vw | Relativo al 1% del ancho de la pantalla |
| vh | Relativo al 1% del alto de la pantalla |
| vmin | Relativo al 1% de la dimensión mínima de la pantalla |
| vmax | Relativo al 1% de la dimensión máxima de la pantalla |
| % | Relativo a los elementos padres |
Unidades de Medida Absolutas
Este tipo de unidades en CSS son fijas cuando son aplicadas a los elementos HTML, no es recomendable usar una unidad de medida fija para los anchos, ya que las pantallas de los dispositivos varían mucho, puedes usar media queries para tal caso, a continuación puedes ver los tipos de unidades de medida absoluta con una pequeña descripción
| Unidad | Descripción |
|---|---|
| cm | centímetros |
| mm | milímetros |
| in | pulgadas (1in = 96px = 2.54cm) |
| px * | pixeles (1px = 1/96th of 1in) |
| pt | puntos (1pt = 1/72 of 1in) |
| pc | picas (1pc = 12 pt) |
Notas
- Todos los Navegadores Modernos soportan las unidades de medidas mencionadas en este artículo.
- Algunas propiedades soportan valores negativos, por ejemplo margin: -10px por eso debes de tener cuidado al utilizarlas.
Síguenos en las Redes Sociales para que no te pierdas nuestros próximos contenidos.