¿Alguna vez has entrado a una página web desde tu celular y se ve desordenada o difícil de usar? Eso sucede cuando no tiene un diseño responsivo. En este tutorial aprenderás cómo hacer que tu sitio web se vea bien en cualquier dispositivo: Usaremos herramientas como Media Queries y Flexbox.
Paso a paso para implementar un diseño responsivo
- Estructura básica con HTML
Antes de hacer que tu diseño sea responsivo, asegúrate de tener una estructura clara con HTML5.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mi sitio responsivo</title>
<link rel="stylesheet" href="estilos.css">
</head>
<body>
<header>
<h1>Bienvenido</h1>
</header>
<main>
<section class="contenido">
<p>Este es el contenido principal</p>
</section>
</main>
</body>
</html>
- Añade la metaetiqueta viewport
Esta etiqueta es clave para que el navegador adapte el contenido al tamaño del dispositivo.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
- Usa Flexbox para una distribución flexible
Flexbox ayuda a que los elementos se acomoden mejor.
.contenido {
display: flex;
flex-direction: row;
gap: 20px;
}
- Aplica Media Queries
Las media queries permiten cambiar estilos según el tamaño de la pantalla.
@media (max-width: 768px) {
.contenido {
flex-direction: column;
}
}
- Prueba en diferentes dispositivos
Puedes usar las herramientas del navegador (F12 en Chrome) para simular móviles y tablets y ajustar tus estilos según sea necesario.
