Cómo crear una página web responsive con HTML y CSS

El diseño responsive o adaptativo es una técnica que permite crear páginas web que se ajustan al tamaño y la orientación de la pantalla del dispositivo desde el que se accede. De esta forma, se mejora la experiencia del usuario y se evitan problemas de visualización o navegación.

Para crear una página web responsive con HTML y CSS, se deben tener en cuenta los siguientes aspectos:

  • El uso de un viewport meta tag para indicar al navegador cómo escalar el contenido de la página según el ancho de la pantalla.
  • El uso de unidades relativas como porcentajes, ems o rems para definir el tamaño y la posición de los elementos de la página, en lugar de unidades absolutas como píxeles o puntos.
  • El uso de un diseño fluido o flexible que permita a los elementos ocupar el espacio disponible y reorganizarse según el ancho de la pantalla.
  • El uso de las media queries para aplicar diferentes estilos según las condiciones de la pantalla, como el ancho, la altura, la resolución o la orientación.

A continuación, te explicaré cómo usar cada uno de estos aspectos con más detalle.

Viewport meta tag

El viewport meta tag es una etiqueta HTML que se coloca dentro del elemento head de la página y que sirve para indicar al navegador cómo escalar el contenido de la página según el ancho de la pantalla. Esto es importante porque algunos dispositivos móviles tienen una resolución muy alta y pueden mostrar el contenido de la página muy pequeño o muy grande si no se especifica un viewport adecuado.

El viewport meta tag tiene el siguiente formato:

<meta name=“viewport” content=“atributos”>

Donde los atributos pueden ser:

  • width: el ancho del viewport en píxeles o en device-width, que es el ancho de la pantalla del dispositivo.
  • height: el alto del viewport en píxeles o en device-height, que es el alto de la pantalla del dispositivo.
  • initial-scale: el nivel de zoom inicial del contenido de la página, siendo 1 el valor por defecto.
  • maximum-scale: el nivel máximo de zoom permitido para el contenido de la página.
  • minimum-scale: el nivel mínimo de zoom permitido para el contenido de la página.
  • user-scalable: si se permite o no al usuario cambiar el nivel de zoom del contenido de la página, siendo yes o no los valores posibles.

Un ejemplo de un viewport meta tag sería:

<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>

Este viewport indica al navegador que use el ancho de la pantalla del dispositivo como el ancho del viewport y que aplique un nivel de zoom inicial del 100%.

Unidades relativas

Las unidades relativas son unidades que se basan en otras medidas para definir el tamaño y la posición de los elementos de la página. A diferencia de las unidades absolutas como los píxeles o los puntos, las unidades relativas permiten crear diseños más flexibles y adaptables a diferentes tamaños y resoluciones de pantalla.

Algunas unidades relativas son:

  • Porcentajes: se basan en el tamaño del elemento padre o contenedor. Por ejemplo, si un elemento tiene un ancho del 50%, ocupará la mitad del ancho del elemento padre.
  • ems: se basan en el tamaño de la fuente del elemento actual o del elemento padre. Por ejemplo, si un elemento tiene un tamaño de fuente de 16 píxeles y otro elemento tiene un ancho de 2 ems, este último tendrá un ancho de 32 píxeles (16 x 2).
  • rems: se basan en el tamaño de la fuente del elemento raíz o html. Por ejemplo, si el elemento html tiene un tamaño de fuente de 20 píxeles y otro elemento tiene un alto de 1.5 rems, este último tendrá un alto de 30 píxeles (20 x 1.5).
  • vw: se basan en el ancho del viewport. Por ejemplo, si el viewport tiene un ancho de 800 píxeles y otro elemento tiene un ancho de 10 vw, este último tendrá un ancho de 80 píxeles (800 x 0.1).
  • vh: se basan en el alto del viewport. Por ejemplo, si el viewport tiene un alto de 600 píxeles y otro elemento tiene un alto de 20 vh, este último tendrá un alto de 120 píxeles (600 x 0.2).

Estas unidades se pueden usar tanto en HTML como en CSS para definir el tamaño y la posición de los elementos de la página. Por ejemplo:

<div style=“width: 50%; height: 10em; background-color: red;”></div>

Este código crea un elemento div que ocupa el 50% del ancho del elemento padre y que tiene un alto de 10 ems basado en el tamaño de la fuente del elemento actual. También le aplica un color de fondo rojo.

Diseño fluido o flexible

El diseño fluido o flexible es una técnica que consiste en usar unidades relativas y propiedades CSS que permiten a los elementos ocupar el espacio disponible y reorganizarse según el ancho de la pantalla. De esta forma, se evita el uso de medidas fijas o de elementos que se salgan del borde de la pantalla.

Algunas propiedades CSS que facilitan el diseño fluido son:

  • display: flex: permite crear un contenedor flexible que alinea y distribuye a sus elementos hijos según diferentes criterios.
  • flex-direction: permite definir la dirección en la que se alinean los elementos hijos dentro del contenedor flexible, siendo row (horizontal) o column (vertical) los valores más comunes.
  • flex-wrap: permite definir si los elementos hijos se ajustan al ancho del contenedor flexible o si se pueden pasar a otra línea, siendo nowrap (sin saltos) o wrap (con saltos) los valores más comunes.
  • justify-content: permite definir la alineación horizontal de los elementos hijos dentro del contenedor flexible, siendo flex-start (al inicio), flex-end (al final), center (al centro), space-between (con espacio entre ellos) o space-around (con espacio alrededor de ellos) los valores más comunes.
  • align-items: permite definir la alineación vertical de los elementos hijos dentro del contenedor flexible, siendo flex-start (al inicio), flex-end (al final), center (al centro), stretch (estirados) o baseline (en la línea base) los valores más comunes.
  • flex: permite definir el tamaño y la capacidad de crecimiento o decrecimiento de los elementos hijos dentro del contenedor flexible, siendo un valor numérico o una combinación de tres valores numéricos que representan el factor de crecimiento, el factor de decrecimiento y el tamaño base respectivamente.

Un ejemplo de un diseño fluido usando estas propiedades sería:

<style> .container { display: flex; flex-wrap: wrap; }

.item { flex: 1; margin: 10px; }

.item1 { background-color: red; }

.item2 { background-color: green; }

.item3 { background-color: blue; } </style>

<div class=“container”> <div class=“item item1”>Item 1</div> <div class=“item item2”>Item 2</div> <div class=“item item3”>Item 3</div> </div>

Este código crea un contenedor flexible que contiene tres elementos hijos con diferentes colores de fondo. El contenedor usa la propiedad flex-wrap para permitir que los elementos se pasen a otra línea si no caben en el ancho del contenedor. Los elementos usan la propiedad flex para ocupar el espacio disponible y tener el mismo tamaño.

Media queries

Las media queries son una forma de aplicar diferentes estilos según las condiciones de la pantalla, como el ancho, la altura, la resolución o la orientación. De esta forma, se puede adaptar el diseño y el contenido de la página a diferentes dispositivos y situaciones.

Las media queries se escriben usando la regla @media seguida de una o más expresiones que definen las condiciones que deben cumplirse para que se apliquen los estilos. Por ejemplo:

@media (max-width: 600px) { /* Estilos para pantallas con un ancho máximo de 600 píxeles */ }

Este código aplica los estilos entre las llaves solo si la pantalla tiene un ancho máximo de 600 píxeles. Se pueden usar diferentes operadores como max-width, min-width, max-height, min-height, orientation, resolution, etc. para definir las condiciones. También se pueden combinar varias condiciones usando los operadores and, or y not. Por ejemplo:

@media (min-width: 768px) and (orientation: landscape) { /* Estilos para pantallas con un ancho mínimo de 768 píxeles y una orientación horizontal */ }

Este código aplica los estilos entre las llaves solo si la pantalla tiene un ancho mínimo de 768 píxeles y una orientación horizontal. Se pueden usar paréntesis para agrupar las condiciones.

Las media queries se pueden usar tanto en HTML como en CSS para aplicar diferentes estilos. Por ejemplo:

<link rel=“stylesheet” href=“style.css” media=“(max-width: 600px)”>

Este código enlaza un archivo CSS que se aplica solo si la pantalla tiene un ancho máximo de 600 píxeles.

<style> @media (min-width: 768px) { .container { display: flex; justify-content: space-between; } } </style>

Este código aplica un estilo al elemento con la clase container que lo convierte en un contenedor flexible y que distribuye sus elementos hijos con espacio entre ellos, solo si la pantalla tiene un ancho mínimo de 768 píxeles.

Las media queries son una herramienta muy poderosa y versátil para crear páginas web responsive que se adapten a diferentes dispositivos y situaciones. Te permiten modificar el diseño y el contenido de la página según las características de la pantalla, mejorando así la experiencia del usuario.

Conclusión

En este tutorial, te he enseñado cómo crear una página web responsive con HTML y CSS, es decir, una página que se adapta al tamaño y la orientación de la pantalla del dispositivo desde el que se accede. Has aprendido los conceptos básicos del diseño responsive, cómo usar las etiquetas y propiedades adecuadas, y cómo usar las media queries para aplicar diferentes estilos según las condiciones de la pantalla.

Espero que este tutorial te haya sido útil y que hayas aprendido algo nuevo. Si quieres saber más sobre el diseño responsive o sobre otras técnicas de desarrollo web, puedes visitar los siguientes enlaces:

  • Guía completa del diseño responsive: https://developer.mozilla.org/es/docs/Learn/CSS/CSS_layout/Responsive_Design
  • Curso gratuito de desarrollo web: https://www.freecodecamp.org/espanol/learn/responsive-web-design/
  • Otras herramientas para crear páginas web responsive: https://www.makeuseof.com/tag/tools-create-responsive-web-design/

Gracias por leer este tutorial y hasta la próxima.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *