CSS - Unidades

Píxeles (px)

Los píxeles (px) son una unidad de tamaño fijo utilizada en CSS. No cambian de tamaño en relación con otros elementos o el viewport. Un píxel representa un solo punto en la pantalla.

Al usar píxeles, se especifica un tamaño exacto para un elemento. Por ejemplo, establecer el ancho de un div a 200px lo hará exactamente 200 píxeles de ancho, independientemente del tamaño de la pantalla o la resolución.

.container {
  width: 300px;
  height: 200px;
  font-size: 16px;
}

Ventajas de usar píxeles:

• Control preciso sobre los tamaños de los elementos
• Apariencia consistente en diferentes dispositivos con la misma densidad de píxeles
• Fácil de entender y usar para principiantes

Desventajas de usar píxeles:

• Falta de flexibilidad y capacidad de respuesta
• Pueden aparecer demasiado pequeños o demasiado grandes en dispositivos con diferentes densidades de píxeles
• No son escalables para usuarios que necesitan ampliar o reducir el zoom

A pesar de estas desventajas, los píxeles aún se usan ampliamente para ciertos elementos que requieren tamaños exactos, como imágenes, iconos y bordes. Sin embargo, para tipografía y diseño, generalmente se recomienda usar unidades relativas para lograr una mejor capacidad de respuesta y accesibilidad.

Porcentajes (%)

Los porcentajes son unidades en CSS que permiten establecer tamaños y posiciones de elementos en relación con su contenedor padre. El tamaño de un elemento establecido en porcentajes será una fracción del tamaño de su elemento padre.

Para calcular el tamaño real de un elemento usando porcentajes, multiplica el valor porcentual por la dimensión correspondiente del elemento padre. Por ejemplo, si un elemento padre tiene un ancho de 500px y su hijo tiene un ancho establecido al 50%, el ancho real del hijo será de 250px (50% de 500px).

.parent {
  width: 500px;
}

.child {
  width: 50%;
  padding: 10%;
}

El hijo tendrá un ancho de 250px (50% del ancho de su padre) y un relleno de 50px (10% del ancho de su padre).

Em (em)

La unidad em se basa en el tamaño de fuente de un elemento. Un em es igual al tamaño de fuente del elemento. Si un elemento tiene un tamaño de fuente de 16px, entonces un em es igual a 16px para ese elemento.

Cuando se usa em para propiedades que no sean el tamaño de fuente, el valor se calcula en relación con el tamaño de fuente. Esto significa que si cambias el tamaño de fuente, los tamaños especificados en em también cambiarán proporcionalmente.

.container {
    font-size: 16px;
}

.heading {
    font-size: 2em; /* 32px (2 * 16px) */
    margin-bottom: 1.5em; /* 24px (1.5 * 16px) */
}

El encabezado tendrá un tamaño de fuente de 32px (2 veces el tamaño de fuente de su padre) y un margen inferior de 24px (1.5 veces su propio tamaño de fuente).

Rem (rem)

La unidad rem (root em) es similar a em, pero siempre es relativa al tamaño de fuente del elemento raíz (html), en lugar del tamaño de fuente del propio elemento. Esto hace que los valores rem sean consistentes en todo el documento, independientemente del nivel de anidamiento o los cambios locales en el tamaño de fuente.

Por defecto, la mayoría de los navegadores tienen un tamaño de fuente raíz de 16px. Así que si estableces el tamaño de un elemento en 1.5rem, se calculará como 1.5*16=24 píxeles.

html {
   font-size: 16px;
}

.container {
   font-size: 1.2rem; /* 19.2px (1.2 * 16px) */
   padding: 2rem; /* 32px (2 * 16px) */
}

El elemento contenedor tendrá un tamaño de fuente de 19.2px y un relleno de 32px, independientemente del tamaño de fuente de su padre.

Usar rem para dimensionar y espaciar elementos ayuda a mantener la consistencia y facilita el escalado de todo el diseño cambiando solo el tamaño de fuente raíz.

Unidades de Viewport (vw, vh, vmin, vmax)

Las unidades de viewport se basan en el tamaño del viewport (el área visible de una página web). Hay cuatro unidades de viewport en CSS:

• vw (ancho del viewport): un vw es un uno por ciento del ancho del viewport.
• vh (altura del viewport): un vh es un uno por ciento de la altura del viewport.
• vmin (mínimo del viewport): un vmin es la dimensión más pequeña entre vw o vh.
• vmax (máximo del viewport): un vmax es la dimensión más grande entre vw o vh.

Estas unidades son útiles para crear diseños responsivos ya que permiten que los elementos se adapten automáticamente a diferentes tamaños de pantalla.

.hero {
   width: 100vw;
   height: 50vh;
   font-size: 5vmin;
}

El elemento hero tendrá un ancho igual al 100% del ancho del viewport, una altura igual al 50% de la altura del viewport, y un tamaño de fuente igual al cinco por ciento de la dimensión más pequeña entre altura o ancho.

Usando unidades de viewport, puedes crear elementos que se escalen proporcionalmente con el tamaño del viewport, haciendo que tu diseño sea más responsivo y adaptable a diferentes dispositivos y tamaños de pantalla.

Ex (ex)

La unidad ex es una unidad relativa en CSS basada en la altura x de la fuente actual. La altura x es la altura de las letras minúsculas (como "x") en una fuente, excluyendo ascendentes y descendentes. Un ex equivale a la altura x de la fuente.

La unidad ex no es tan común como unidades como em o rem, pero puede ser útil cuando quieres dimensionar elementos en relación con la altura x de una fuente.

Para calcular el valor de ex, multiplica el tamaño deseado por la altura x de la fuente. Si la altura x de una fuente es 8px y quieres que un elemento sea 3 veces esta altura, establece su tamaño en 3ex (que sería 24px).

.container {
  font-size: 16px;
}

.example {
  width: 10ex;
  height: 2ex;
  border: 1px solid black;
}

El ancho de .example será diez veces la altura x de la fuente, y su altura será dos veces esa altura.

Ch (ch)

La unidad ch es otra unidad relativa en CSS que representa el ancho del carácter "0" (cero) en las fuentes actuales. Es útil cuando quieres dimensionar elementos basándote en caracteres.

Un ch equivale al ancho del carácter "0" en las fuentes. Esto lo hace ideal para establecer anchos de campos de entrada o contenedores de texto para que se ajusten a un cierto número de caracteres.

Para calcular el valor de ch, multiplica el número deseado de caracteres por el ancho del carácter "0" en las fuentes. Si el carácter "0" tiene aproximadamente ocho píxeles de ancho y quieres que un campo de entrada contenga veinte caracteres, establece su ancho en veinte ch, lo que equivaldría a ciento sesenta píxeles.

.container {
    font-size: 16px;
}

.input-field {
    width: 20ch;
    padding: 0.5em;
    border: 1px solid #ccc;
}

El .input-field tiene un ancho que se ajusta aproximadamente a veinte caracteres, asumiendo que el carácter "0" tiene unos ocho píxeles de ancho en la fuente elegida.