Responsive Design en CSS

Inicio / Tema / Responsive Design en CSS / Unidades Responsivas y Media Queries

Unidades Responsivas y Media Queries

En este capítulo, exploraremos dos herramientas clave que permiten crear sitios web adaptables y flexibles: las unidades responsivas y las media queries. Estas técnicas son fundamentales para hacer que tu diseño sea fluido y se ajuste correctamente a diferentes tamaños de pantalla.

Aquí se muestra el diseño siendo adaptado a diferentes tamaños de pantalla Aquí se muestra el diseño siendo adaptado a diferentes tamaños de pantalla

Unidades Responsivas

Las unidades de medida en CSS juegan un papel crucial en el diseño responsivo. Mientras que las unidades absolutas como px (píxeles) son fijas y no se ajustan al tamaño de la pantalla, las unidades responsivas permiten crear diseños más flexibles.

Unidades Relativas

Las unidades relativas se ajustan en función de otros elementos de la página o del tamaño de la pantalla. Las más comunes son:

em: Esta unidad se basa en el tamaño de la fuente del elemento padre. Si el tamaño de fuente del padre es de 16px, 1em equivaldrá a 16px. Si el tamaño de fuente del padre cambia, el valor de em también cambiará.
rem: Similar a em, pero se basa en el tamaño de fuente de la raíz del documento (el html). Esto significa que 1rem será equivalente al tamaño de fuente del elemento html, que normalmente es 16px, a menos que se cambie.
vw y vh: Estas unidades se basan en el ancho y alto del viewport, respectivamente. 1vw es el 1% del ancho de la pantalla y 1vh es el 1% de la altura.

Veamos un ejemplo de cómo usar estas unidades:

css

"En este código, el tamaño de fuente del cuerpo está establecido en 16 píxeles. Luego, el título h1 usa 2 rems, lo que significa que será el doble del tamaño del cuerpo, es decir, 32 píxeles. Los párrafos tendrán 1.5 rems, es decir, 24 píxeles. Por último, la clase container ocupa el 80 por ciento del ancho de la pantalla usando la unidad viewport width, vw."

Media Queries

Las media queries son la base del diseño responsivo, ya que permiten aplicar diferentes estilos en función de las características del dispositivo o del viewport, como el ancho, la altura, la orientación, e incluso la resolución de la pantalla.

Estructura de una Media Query

La estructura básica de una media query es:

css

La condición puede ser, por ejemplo, el ancho de la pantalla:

css

"Aquí estamos usando una media query que aplica cuando la pantalla tiene un ancho máximo de 768 píxeles. Dentro de la media query, establecemos que el ancho de la clase container será del 100 por ciento y tendrá un padding de 1 rem. Esto significa que para pantallas más pequeñas, la caja se expandirá completamente y tendrá más espacio alrededor."

Usando Media Queries para Diferentes Dispositivos

Una de las prácticas comunes en el diseño responsivo es definir varios puntos de ruptura (breakpoints) para ajustar el diseño según el dispositivo. A continuación, un ejemplo de cómo podemos usar diferentes media queries para distintos tamaños de pantalla:

css

"En este código, primero definimos los estilos generales para pantallas grandes. Luego, usamos tres media queries diferentes para ajustar el diseño en función de los puntos de ruptura. Estos puntos incluyen 1024 píxeles para tablets, 768 píxeles para móviles en modo horizontal, y 480 píxeles para móviles en modo vertical."

Ejemplo de Unidades Responsivas y Media Queries en Acción

Combinemos lo que hemos aprendido hasta ahora en un ejemplo práctico:

html

"Este ejemplo combina unidades responsivas como vw para el ancho del contenedor, rem para el tamaño de las fuentes, y una media query que ajusta el diseño cuando la pantalla tiene un ancho menor a 768 píxeles. A medida que se reduce el ancho de la pantalla, el contenedor se expandirá al 100 por ciento del ancho disponible y el padding se reducirá a 1 rem para que el contenido se vea bien en pantallas pequeñas."

Conclusión

El uso adecuado de unidades responsivas y media queries es crucial para crear sitios web adaptables y accesibles. Estas herramientas te permiten diseñar interfaces que se ajustan perfectamente a cualquier dispositivo.

Volver al capítulo anterior

Marcar como leìdo y continuar

Pregúntame lo que sea