¿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
Antes de hacer que tu diseño sea responsivo, asegúrate de tener una estructura clara con HTML5.
<!DOCTYPE html><htmllang="es"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Mi sitio responsivo</title><linkrel="stylesheet"href="estilos.css"></head><body><header><h1>Bienvenido</h1></header><main><sectionclass="contenido"><p>Este es el contenido principal</p></section></main></body></html>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">
Flexbox ayuda a que los elementos se acomoden mejor.
.contenido {
display: flex;
flex-direction: row;
gap: 20px;
}
Las media queries permiten cambiar estilos según el tamaño de la pantalla.
@media (max-width: 768px) {
.contenido {
flex-direction: column;
}
}
Puedes usar las herramientas del navegador (F12 en Chrome) para simular móviles y tablets y ajustar tus estilos según sea necesario.
