Unidades de medida en CSS

En CSS, hay varias unidades de medida que puedes utilizar para especificar tamaños y dimensiones de elementos en tu página web. Veamos detalladamente sus tipos y sus usos.

4. Unidades de medida

El tamaño de los elementos de una web se puede expresar en unidades absolutas y relativas.

4.1. Unidades absolutas

Las unidades absolutas mantienen su aspecto y se visualizan siempre igual independientemente de las características del dispositivo.

in	Pulgadas (1 pulgada = 2.54 cm)
cm	Centímetros
mm	Milímetros
pt	Puntos (1 pt = 1/72 pulgadas)
pc	Picas (1 pica = 12 puntos)

4.2. Unidades relativas

Las unidades relativas se ajustan a cada tipo de dispositivo ya que dependen de la resolución de cada pantalla.

px	Píxeles (relativo al dispositivo)
em	Relativo al tamaño de la fuente del elemento ( 2 em significa 2 veces el tamaño de la fuente actual)
%	Porcentaje (relativo al elemento padre)
vh y vw	Medidas relativas de acuerdo al viewport 1vh = 1% de la altura del viewport 100vh = altura del viewport
fr	Flexible Grid Units (fr) Se utiliza en Grid Layout y representa una fracción del espacio disponible en un contenedor

4.3. Usos de unidades

Normalmente es recomendable usar unidades relativas en la medida de lo posible, ya que mejora la accesibilidad de la página web y permite que los documentos se adapten fácilmente a cualquier medio. Por tanto, para la creación de una página web, el uso de medidas absolutas queda descartado.

Centímetros (cm), milímetros (mm), pulgadas (in) y puntos (pt)

Unidades de medida físicas para impresión y otros usos específicos.

Unidad em

Es especialmente útil para establecer tamaños proporcionales al tamaño de fuente. Aunque no hay un criterio definido, el organismo W3C, recomienda el uso de la unidad em para indicar el tamaño del texto. El tamaño de los ems se establece en base al tamaño que tenga definido el navegador.

Usualmente el tamaño de una fuente por defecto en los navegadores es de 16px. Por tanto, tendríamos que  16px = 1em y podríamos definir la siguiente conversión entre unidades.

px	em	%
12	0,750	75
14	0,875	87,5
16	1,000	100
18	1,125	112,5
20	1,250	125

Hay que tener en cuenta que el tamaño base definido en los navegadores puede ser modificado por los usuarios. Este tema lo trataremos en detalle en la unidad sobre accesibilidad web.

Existe también la unidad REM (rem) que es similar al em, pero se basa en el tamaño de fuente del elemento raíz (generalmente el tamaño de fuente del elemento HTML). No vamos a trabajar con esta unidad de medida.

Píxeles (px)

Es la unidad más utilizada y representa un punto en la pantalla. Se usa para tamaños fijos y proporciona control preciso sobre el diseño.

Porcentaje (%)

Representa una proporción del tamaño del elemento padre. Es útil para hacer diseños fluidos y responsivos teniendo en cuenta la relación de los elementos con su contenedor padre.

Viewport Width (vw) y Viewport Height (vh)

Representan un porcentaje del ancho y alto de la ventana del navegador, respectivamente. Son útiles para crear diseños responsive basados en el tamaño de la pantalla.

Flexible Grid Units (fr)

Se utiliza en Grid Layout y representa una fracción del espacio disponible en un contenedor. Es útil para distribuir el espacio disponible entre elementos flexibles.

Ejercicio propuesto

• Si el tamaño de fuente por defecto en un navegador es de 12px. ¿Cuántos em son 16px? Puedes ver la conversión de píxel a ems en el conversor online de w3schools: w3schools.com/tags/ref_pxtoemconversion.asp

• Observa el resultado del siguiente código en un navegador y estudia las diferencias que hay entre los distintos tamaños definidos.

<p style="font-size: 16px;">Párrafo de 16px</p>
<p style="font-size: 12px;">Párrafo de 12px</p>
<p style="font-size: 1em;">Párrafo de 1em</p>
<p style="font-size: 1.5em;">Párrafo de 1.5em</p>
<p style="font-size: 0.5in;">Párrafo de 0.5 pulgadas</p>
<p style="font-size: 8mm;">Párrafo de 8 milímetros</p>
<p style="font-size: 12pt;">Párrafo de 12 puntos</p>

dark

Test