CSS

Explore

Medidas
Medidas

Existen varios tipos de unidades, vamos a desglosarlas en grupos y explicar cada una de ellas. Más adelante veremos las propiedades de CSS que pueden utilizarlas.

⁠

⁠
`Unidades absolutas` ⁠
⁠

Las unidades absolutas son un tipo de medida fija que no cambia, que no depende de ningún otro factor. Son ideales en contextos donde las medidas no varían como pueden ser en medios impresos (documentos, impresiones, etc...), pero son unidades poco adecuadas para la web, ya que no tienen la capacidad de adaptarse a diferentes resoluciones o pantallas, que es lo que tendemos a hacer hoy en día.

Unidad

Significado

Medida aproximada

Pulgadas

1in = 25.4mm

Centímetros

1cm = 10mm

Picas

1pc = 4.23mm

Milímetros

1mm = 1mm

Puntos

1pt = 0.35mm

Píxels

1px = 0.26mm

Cuarto de mm

1Q = 0.248mm

There are no rows in this table

⁠

⁠
`Unidades relativas` ⁠
⁠

Las unidades relativas son un tipo de medida mucho más potente y habitual en el CSS que creamos generalmente. Al contrario que las unidades absolutas, las unidades relativas dependen de algún otro factor (resolución, tamaño de letra, etc...).

Las unidades relativas más conocidas son las siguientes:

Unidad

Significado

Medida aproximada

Ejemplo

«M»

Multiplicador del tamaño font-size en ese elemento (o heredado)

1.5em * 16px = 24px

«x»

Multiplicador de la mitad del tamaño font-size (altura de la x minúscula)

1ex ~ 0.5em

«zero width»

Multiplicador del tamaño de ancho del carácter cero ( 0 )

1ch ~ 1 carácter

rem

«root M»

Multiplicador del tamaño font-size del elemento raíz (<html> o similar)

Porcentaje

Relativa a herencia (concretamente, al elemento padre)

50% = mitad del padre

There are no rows in this table

⁠

⁠
`La unidad em` ⁠
⁠

La unidad em se utiliza para hacer referencia al tamaño actual de la fuente en ese elemento HTML. Por defecto, es un valor aproximado a 16px (salvo que se modifique por el usuario). De esta forma, podemos trabajar simplificando las unidades a medidas en base a ese tamaño.

⁠

⁠

Existen ciertas unidades menos utilizadas dentro de las unidades relativas, como por ejemplo las unidades ex o ch. Mientras que la unidad em es el tamaño de la fuente establecida por el navegador del usuario, la unidad ex es la mitad del tamaño de la fuente establecida por el navegador del usuario, por lo que se cumple que 1ex es igual a 0.5em.

⁠

Realmente, la medida ex está basada en la altura de la x minúscula, que es aproximadamente un poco más de la mitad de la fuente actual (depende de la tipografía utilizada). La unidad ch por su parte, equivale al tamaño de ancho del 0 de la fuente actual, aunque como hemos dicho, en la práctica es un tipo de unidad que no se suele utilizar frecuentemente.

⁠
`La unidad rem (root em)` ⁠
⁠

Una unidad muy interesante y práctica para tipografías es la unidad rem (root em). Esta unidad toma la idea de la unidad em, pero permitiendo establecer un tamaño base personalizado (generalmente para el documento en general, utilizando html o la pseudoclase :root). De esta forma, podemos trabajar con múltiplos del tamaño base:

:root {

font-size: 22px; /* Tamaño base */

}

h1 {

font-size: 2rem; /* El doble del tamaño base: 44px */

}

h2 {

font-size: 1rem; /* El mismo tamaño base: 22px */

}

Como podemos ver, posteriormente podremos ir utilizando la unidad rem en ciertas partes del documento. Con esto, estamos indicando el factor de escala (respecto al tamaño base). En el ejemplo anterior, los elementos <h1> tendrán 44 píxels de tamaño, ya que hemos establecido 2rem, que significa «el doble que el tamaño base». Por otro lado, los elementos <h2> tendrían el mismo tamaño: 22 píxels.

Esto nos da una ventaja principal considerable: Si queremos cambiar el tamaño del texto en general, sólo tenemos que cambiar el font-size de la pseudoclase :root, puesto que el resto de unidades son factores de escalado y se modificarán todas en consecuencia al cambio del :root. Algo, sin duda, muy práctico y fácil de mantener.

⁠
`Unidades flexibles (viewport)` ⁠
⁠

Existen unas unidades de "nueva generación" que resultan muy útiles, porque dependen del viewport (región visible de la página web en el navegador). Con estas unidades podemos hacer referencia a un porcentaje concreto del tamaño específico que tengamos en la ventana del navegador, independientemente de si es redimensionado o no.

Estas unidades son las siguientes:

Unidad

Significado

Medida aproximada

viewport width

1vw = 1% ancho de navegador

viewport height

1vh = 1% alto de navegador

vmin

viewport minimum

1vmin = 1% de alto o ancho (el mínimo)

vmax

viewport maximum

1vmax = 1% de alto o ancho (el máximo)

There are no rows in this table

⁠

⁠
`La unidad vw (viewport width)` ⁠
⁠

La unidad vw es un tipo de unidad que hace referencia al ancho del viewport (región visible de la página en el navegador). Por ejemplo, si definimos 50vw, estamos indicando un 50% del ancho actual del navegador. Esto nos permite utilizar tamaños que dependan de las dimensiones de la ventana del navegador.

⁠
`La unidad vh (viewport height)` ⁠
⁠

Por su parte, la unidad vh hace referencia de la misma forma al alto del viewport. Por ejemplo, mientras 50vw hace referencia al 50% del ancho del navegador, si indicamos 50vh estaremos haciendo referencia a la mitad (50%) del alto del navegador.

⁠
`Las unidades vmin / vmax` ⁠
⁠

Por último, tenemos las unidades vmin y vmax. La unidad vmin (viewport minimum), simplemente hace referencia al valor más pequeño (mínimo) entre el tamaño de ancho y el tamaño de alto del viewport del navegador. Por otro lado, la unidad vmax (viewport maximum) hace referencia al valor más grande (máximo) entre el tamaño de ancho y el tamaño de alto del viewport del navegador.

Esto puede ser útil en algunas situaciones donde quieres flexibilidad con diseños adaptables, y no necesitas estar haciendo cálculos previos para saber cuál es el más pequeño o más grande antes de utilizarlos.

Unidades absolutas

Unidades relativas

La unidad em

La unidad rem (root em)

Unidades flexibles (viewport)

La unidad vw (viewport width)

La unidad vh (viewport height)

Las unidades vmin / vmax

Want to print your doc?
This is not the way.