Unidades de medida en CSS

Mateo G. -

Unidades Absolutas

Píxeles (px)

Los píxeles (px) son una unidad de tamaño fijo utilizada en CSS. Son la unidad de medida más básica y ampliamente compatible. Un píxel normalmente corresponde a un punto en la pantalla, aunque esto puede variar según la resolución de la pantalla del dispositivo. Los píxeles son útiles cuando se necesita un control preciso sobre los tamaños y la posición de los elementos.

Las ventajas de usar píxeles incluyen su simplicidad y consistencia en diferentes dispositivos. Permiten mediciones exactas y son fáciles de entender. Sin embargo, los píxeles tienen algunas desventajas. No se ajustan bien cuando el usuario aumenta o reduce el zoom de la página, lo que puede afectar la accesibilidad. Usar tamaños fijos en píxeles puede dificultar la creación de diseños responsivos que se adapten a diferentes tamaños de pantalla.

Puntos (pt)

Los puntos (pt) son otra unidad de medida absoluta. Un punto equivale a 1/72 de pulgada. Los puntos se usan más comúnmente en medios impresos, pero también se pueden usar en CSS. Proporcionan una forma de especificar tamaños relativos a una unidad de medida fija.

En comparación con los píxeles, los puntos se usan con menos frecuencia en la web. Pueden ser útiles al crear estilos para elementos que se imprimirán, como facturas o informes. Sin embargo, los puntos no ofrecen el mismo nivel de precisión que los píxeles y es posible que no siempre se muestren de manera consistente en diferentes dispositivos.

Pulgadas (in) y Centímetros (cm)

Las pulgadas (in) y los centímetros (cm) son unidades absolutas tomadas de medidas físicas. Una pulgada equivale a 96 píxeles en una resolución de pantalla de 96 DPI (puntos por pulgada). Los centímetros son similares, con un centímetro equivalente a 37.8 píxeles a 96 DPI.

Estas unidades se usan raramente en diseño web porque no se adaptan bien a los medios basados en pantallas debido a que los tamaños y resoluciones de monitor variables hacen difícil predecir cómo aparecerán con precisión los elementos medidos en pulgadas o centímetros en las pantallas.

Unidades relativas

Porcentajes (%)

Los porcentajes (%) son unidades de medida relativas en CSS. Definen tamaños, espaciado y posicionamiento de elementos en relación con su contenedor padre. El tamaño de un elemento establecido en porcentajes se calcula basándose en el tamaño de su elemento padre.

Consejo: Ejemplo de porcentaje

<div style="width: 50%;">Este div ocupa la mitad del ancho de su contenedor padre.</div>

Em (em)

Em (em) es una unidad relativa basada en el tamaño de fuente de un elemento. Un em equivale al tamaño de fuente del elemento. Por ejemplo, si un elemento tiene un tamaño de fuente de 16 píxeles y estableces el relleno en 1em, el relleno será igual a 16 píxeles.

Consejo: Ejemplo de Em

<div style="font-size: 16px; padding: 1em;">Este div tiene un relleno igual a su tamaño de fuente de 16 píxeles.</div>

Rem (rem)

Rem (rem) es similar a em pero es relativo al tamaño de fuente del elemento raíz (generalmente ). "Rem" significa "root em".

La principal diferencia entre rem y em es que las unidades rem siempre se basan en el tamaño de fuente raíz, mientras que las unidades em se basan en el tamaño de fuente del propio elemento. Esto hace que las unidades rem sean más predecibles y fáciles de manejar cuando se trata de elementos anidados.

Consejo: Ejemplo de Rem

<div style="font-size: 16px;"> 
    <div style="font-size: 2rem;">El tamaño de fuente de este div es el doble del tamaño de fuente raíz.</div>
</div>

Unidades de ventana gráfica (vw, vh, vmin, vmax)

Las unidades de ventana gráfica son medidas relativas basadas en el tamaño de la ventana gráfica—el área visible de una página web:

  1. vw (ancho de la ventana gráfica): 1vw equivale al 1% del ancho de la ventana gráfica.
  2. vh (alto de la ventana gráfica): 1vh equivale al 1% del alto de la ventana gráfica.
  3. vmin (mínimo de la ventana gráfica): 1vmin equivale al valor más pequeño entre vw o vh.
  4. vmax (máximo de la ventana gráfica): 1vmax equivale al valor más grande entre vw o vh.

Las unidades de ventana gráfica ayudan a crear elementos que se adaptan a las dimensiones de la ventana gráfica independientemente del tamaño de la pantalla:

  • Establecer el ancho de un elemento en 50vw hace que ocupe la mitad del ancho de la ventana gráfica.
  • Son útiles para secciones de pantalla completa o tipografía responsiva que se adapta a diferentes dispositivos y orientaciones.

Consejo: Ejemplo de unidades de ventana gráfica

<div style="width: 50vw; height: 50vh;">Este div ocupa la mitad del ancho y alto de la ventana gráfica.</div>

Cuándo Usar Cada Unidad

La elección de la unidad de medida correcta en CSS depende de la situación y de cómo quieres que los elementos se comporten en tu página web. Aquí tienes algunas pautas para usar unidades absolutas frente a unidades relativas:

Usa unidades absolutas como píxeles (px) cuando necesites un control exacto sobre los tamaños y el posicionamiento de los elementos. Los píxeles son útiles en estos casos:

  • Crear diseños de ancho fijo
  • Definir bordes y grosor de línea
  • Especificar dimensiones exactas para imágenes y elementos multimedia

Evita usar píxeles para tamaños de fuente, ya que no se escalan bien cuando el usuario aumenta o disminuye el zoom de la página.

Usa unidades relativas como porcentajes (%) cuando quieras que los elementos se adapten al tamaño de su contenedor padre. Los porcentajes son útiles en estas situaciones:

  • Crear diseños responsivos que se ajusten a diferentes tamaños de pantalla
  • Definir anchos y alturas de elementos en relación con su padre
  • Posicionar elementos usando valores relativos (por ejemplo, left: 50%; top: 25%)

Usa unidades em cuando quieras tamaños relativos al tamaño de fuente de un elemento. Las unidades em funcionan bien para:

  • Establecer relleno y márgenes que se escalen con el tamaño de la fuente
  • Definir tamaños para elementos anidados que heredan el tamaño de fuente de su padre
  • Crear tipografía escalable que mantiene las proporciones

Usa unidades rem cuando quieras tamaños relativos al tamaño de fuente del elemento raíz. Las unidades rem ayudan con:

  • Definir tamaños de fuente y espaciado de forma consistente en todo el documento
  • Crear componentes escalables independientes del tamaño de fuente de su padre
  • Mantener proporciones consistentes incluso si cambia el tamaño de fuente raíz

Usa unidades de viewport (vw, vh, vmin, vmax) cuando quieras que los elementos se adapten al tamaño del viewport. Las unidades de viewport son buenas para:

  • Crear secciones de pantalla completa o imágenes de héroe
  • Hacer que la tipografía sea responsiva en diferentes tamaños de pantalla
  • Definir tamaños y espaciado basados en las dimensiones del viewport

También puedes combinar diferentes unidades de medida para diseños más flexibles.

Consejo: Combinando unidades para flexibilidad

<div style="width: 50%; border: 2px solid black; font-size: 1rem; padding: 1em;"> 
    Este elemento combina porcentajes para el ancho, píxeles para el grosor del borde, rems para el tamaño de fuente y ems para el relleno.
</div>

La elección de la unidad de medida depende de las necesidades de tu proyecto y de cuán responsivo quieres que sea. Experimenta con diferentes unidades y combinaciones para encontrar lo que mejor funcione.