Cuando comienza un viaje de diseño web, una cosa queda clara: dominar cómo los elementos se escala y el tamaño correctamente en diferentes pantallas es crucial. Ya sea que esté trabajando en una pantalla de escritorio masiva o en el teléfono móvil más pequeño, la clave para que un diseño se vea bien en todas partes es comprender las unidades de tamaño CSS. Pero, ¿qué son exactamente? ¿Y cómo puedes hacer que funcionen a tu favor? Vamos a desglosarlo y ayudarlo a aprovechar al máximo estas herramientas de cambio de juego.

Por qué importan las unidades de tamaño CSS

Las unidades de tamaño CSS son la columna vertebral de la capacidad de respuesta de su diseño. Estas unidades definen cuán grande o pequeño debe aparecer un elemento en relación con los demás o la vista en sí. Es como la fórmula mágica que le dice a su sitio web cómo comportarse en diferentes tamaños de pantalla. Sin estas unidades, su diseño podría terminar pareciendo incómodo, estirado o demasiado estrecho en ciertos dispositivos.

Pero aquí está la cosa: hay diferentes tipos de unidades de tamaño, y no todas son las mismas. Algunos son fijos, mientras que otros cambian según la pantalla o el contenido circundante. Vamos a sumergirnos en estas unidades para que pueda elegir la adecuada para el trabajo.

Unidades Absolute vs. Relativas: ¿Cuál es la diferencia?

Para comprender las diferentes unidades de tamaño, primero necesita conocer las dos categorías básicas en las que caen: unidades absolutas y relativas.

• Las unidades absolutas son bastante sencillas. Son fijos y no cambian, sin importar el tamaño de la pantalla. Piense en ellos como una regla que nunca cambia.
• Unidades relativas, por otro lado, cambian según el entorno en el que se usan. Aquí es donde entra la flexibilidad, y es lo que hace posible el diseño receptivo. Echemos un vistazo a ambas categorías.

Unidades absolutas: la vía de la vieja escuela

Las unidades absolutas son justo lo que suenan: se desarrolle en piedra. No les importa el tamaño de la pantalla, el diseño o ningún otro factor. Cuando usa unidades absolutas, está bloqueando el tamaño de los elementos. Si bien esto le brinda un control total, también significa que su diseño podría no adaptarse bien a diferentes pantallas.
Estas son algunas de las unidades absolutas más comunes:

• píxeles (px): la opción clásica para el tamaño preciso. Un píxel corresponde a un punto en la pantalla.
• centímetros (cm), milímetros (mm), pulgadas (in): estas unidades son más comunes para los diseños de impresión, pero pueden usarse en el diseño web si es necesario.
• puntos (PT), Picas (PC): Toma prestado del mundo impreso, estos son útiles para cosas como estilos de impresión, pero no se usan a menudo para el diseño web. Si bien las unidades absolutas pueden ayudar a que las cosas se vean bien, no ofrecen mucha flexibilidad para los sitios web modernos receptivos. Y ahí es donde intervienen las unidades relativas.

Unidades relativas: el poder real de la flexibilidad

Las unidades relativas son donde sucede la magia. Estas unidades se basan en el contenido circundante o el tamaño de la pantalla, lo que las hace perfectas para crear diseños que se ven muy bien en todas partes, desde pantallas pequeñas hasta monitores enormes.
Echemos un vistazo a las unidades relativas clave:

Porcentajes (%)

La unidad porcentual tiene que ver con la flexibilidad. Si establece el ancho de un elemento en 50%, ocupará la mitad del tamaño de su contenedor principal, sin importar cuán grande o pequeño sea ese contenedor. Es ideal para diseños receptivos, donde desea que las cosas se ajusten en función del espacio disponible.

.container {
  width: 100%; /* Takes up 100% of the parent container */
}

EM y REM: Escala con texto

Tanto las unidades EM como las REM se basan en el tamaño de la fuente, pero funcionan de manera diferente:

• em es relativo al tamaño de fuente del elemento principal.
• rem es relativo al tamaño de fuente establecido en el elemento raíz (). Estas unidades son perfectas para crear una tipografía o un espacio escalable que se sienta consistente en todo su sitio web, especialmente cuando los usuarios cambian el tamaño de fuente predeterminado de su navegador.

html {
  font-size: 16px; /* Set base font size */
}

h1 {
  font-size: 2rem; /* 32px */
}

p {
  font-size: 1.5em; /* 24px, based on the parent element's font size */
}

Unidades de ventanas gráficas (VW, VH)

Las unidades de la visión son fantásticas para crear secciones o elementos de pantalla completa que se ajusten en función del tamaño real de la ventana del navegador. Estas unidades se escala de acuerdo con el ancho o la altura de la ventana gráfica, por lo que puede diseñar secciones de héroe de pantalla completa o tipografía dinámica que responda al tamaño de la pantalla del usuario.

• vw: 1VW es 1% del ancho de la vista.
• vh: 1VH es 1% de la altura de la visión. Estos son especialmente útiles para diseños modernos y fluidos.

.hero {
  width: 100vw; /* Full width of the viewport */
  height: 100vh; /* Full height of the viewport */
}

¿Qué unidad debes usar?

Entonces, ¿cómo decide qué unidad usar para su diseño? Aquí hay algunos consejos:

• Para elementos fijos: use PX cuando necesite control absoluto. Cosas como íconos, bordes y otros elementos pequeños que necesitan dimensiones precisas son perfectas para píxeles.
• Para diseños de fluidos: use % cuando desea que los elementos se adapten en función del tamaño de su contenedor. Esto es ideal para cuadrículas, columnas o secciones que deben escalar o bajar con el tamaño de la pantalla.
• para tipografía: use REM para consistencia en su sitio y EM para ajustes locales basados ​​en el tamaño de fuente del contenedor principal.
• Para secciones de pantalla completa: use VW y VH para crear secciones que tomen todo el tamaño de la visión, independientemente de las dimensiones de la pantalla.

Errores comunes para evitar

Incluso los diseñadores experimentados a veces cometen errores al usar unidades de tamaño CSS. Esto es lo que debe tener en cuenta:

1. depender demasiado de los píxeles: si bien PX es fácil de usar, no ayuda mucho para el diseño receptivo.
2. Ignorando el tamaño de fuente de raíz: si está usando REM, asegúrese de establecer un tamaño de fuente base en el elemento HTML. De lo contrario, su tipografía puede parecer inconsistente.
3. Uso de la unidad inconsistente: mezclar PX, %y EM sin una estrategia clara pueden conducir a resultados impredecibles. Mantenga el uso de su unidad consistente.

Envolviendo: unidades de tamaño CSS

Las unidades de tamaño CSS son esenciales para crear sitios web que funcionan bien en cualquier pantalla. Con unidades absolutas como PX y las unidades flexibles como %, EM, REM y las unidades de la ventana gráfica, puede diseñar diseños receptivos que se adapten maravillosamente a través de los dispositivos.

La clave es comprender cuándo usar cada unidad y cómo interactúan entre sí. Al dominar las unidades de tamaño CSS, desbloqueará todo el potencial del diseño web receptivo y creará sitios que se ven increíbles en todas partes.
Entonces, ¡salga, experimente con estas unidades y haga que sus diseños sean más fluidos y receptivos que nunca!
¡Feliz diseño!