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.
| px | Píxeles |
| 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.
| 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 |
Aunque el píxel se considera una unidad absoluta, su tamaño físico puede variar según la densidad de píxeles (PPI, píxeles por pulgada) del dispositivo de visualización. En dispositivos con una mayor densidad de píxeles, como pantallas Retina, un píxel puede ser más pequeño en términos físicos, lo que resulta en una apariencia más nítida y detallada de los elementos visuales en pantalla.
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. Aunque se ha mencionado que normalmente es recomendable utilizar unidades relativas en la medida de lo posible, el píxel sigue siendo una opción muy empleada en el diseño web, especialmente cuando se requiere un diseño más estático o se necesita un control exacto sobre el tamaño de los elementos.
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>
Comprueba tu apendizaje