Diseño Web Responsivo y Viewport
Aprende cómo HTML5 y la etiqueta meta viewport permiten que tus páginas web se adapten a teléfonos móviles, tabletas y computadores de escritorio.
¿Qué es el Diseño Web Responsivo (RWD)?
El Diseño Web Responsivo (Responsive Web Design) es la técnica que permite que un sitio web se ajuste automáticamente al tamaño de la pantalla del dispositivo que lo visita, ofreciendo una experiencia de lectura y navegación óptima sin necesidad de pellizcar la pantalla para hacer zoom.
La Etiqueta Meta Viewport: La Clave de Todo
Sin esta etiqueta, los navegadores de teléfonos móviles asumen que la página fue hecha para un monitor de escritorio (típicamente 980px de ancho) y encogen todo el sitio como una miniatura microscópica. Para evitarlo, todo documento HTML5 debe incluir en el <head>:
<meta name="viewport" content="width=device-width, initial-scale=1.0">width=device-width: Ordena a la página seguir el ancho físico de la pantalla del dispositivo en píxeles independientes de la densidad (DIPs).initial-scale=1.0: Establece el nivel de zoom inicial al 100% cuando la página carga por primera vez.
Imágenes Responsivas con <picture>
Para no forzar a un teléfono móvil a descargar una imagen gigante pensada para monitores 4K, HTML5 introdujo el elemento <picture>, que permite definir diferentes fuentes de imagen según el ancho de la pantalla:
<picture>
<source media="(min-width: 800px)" srcset="imagen-grande.jpg">
<source media="(min-width: 450px)" srcset="imagen-mediana.jpg">
<img src="imagen-pequena.jpg" alt="Ilustración adaptable" style="width: auto;">
</picture>⚡ Layout Responsivo con Rejilla Fluida
Redimensiona el panel de vista previa o cambia de horizontal a vertical para ver cómo las tarjetas pasan de 3 columnas a 1 columna automáticamente:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Diseño Web Responsivo</title>
<style>
body { font-family: Arial, Helvetica, sans-serif; margin: 0; padding: 20px; background: #f8fafc; }
/* Contenedor flexible adaptable */
.grid-responsivo {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 15px;
margin-top: 20px;
}
.tarjeta {
background: white;
border: 1px solid #cbd5e1;
border-radius: 8px;
padding: 16px;
box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
/* Imagen fluida: nunca se desborda de su contenedor */
.img-fluida {
width: 100%;
height: auto;
border-radius: 6px;
display: block;
}
</style>
</head>
<body>
<h2>Diseño Adaptable (Responsive)</h2>
<p>
Las tres tarjetas de abajo usan unidades fluidas. En pantallas anchas se muestran una al lado de otra; en pantallas pequeñas se apilan verticalmente sin desbordarse.
</p>
<div class="grid-responsivo">
<div class="tarjeta">
<h3 style="color: #0284c7; margin-top: 0;">Móviles</h3>
<p>Vista compacta de una sola columna optimizada para el pulgar.</p>
</div>
<div class="tarjeta">
<h3 style="color: #059669; margin-top: 0;">Tabletas</h3>
<p>Diseño intermedio en dos columnas con navegación táctil.</p>
</div>
<div class="tarjeta">
<h3 style="color: #7c3aed; margin-top: 0;">Escritorio</h3>
<p>Aprovechamiento panorámico de pantalla ancha con alta densidad.</p>
</div>
</div>
</body>
</html>¿Tienes dudas con este tema?
Sócrates AI puede darte analogías y explicarte este código paso a paso.🚀 ¿Quieres dominar Manual Completo de HTML5 y crear proyectos reales?
Aprende arquitectura limpia, desarrollo web moderno, buenas prácticas y despliegue en producción con nuestro Bootcamp Fullstack Developer con mentorías en vivo.
🏛️ Autoría y Propiedad Intelectual: Obra educativa original de David Amador para Kilopolis Academia (Solucionáticos), estructurada sobre las especificaciones y estándares abiertos del W3C, el estándar vivo de WHATWG y la documentación oficial de código abierto. © Todos los derechos reservados.