📱 Nivel 14 - Responsive Design: ¡Para todos los tamaños!

📖 Diseño Responsive

📱 ¿Qué es Responsive Design?

Es una técnica que hace que tu página web se vea bien en cualquier dispositivo: celulares, tablets y computadoras. ¡La página se adapta automáticamente!

📱

Móvil

< 768px

📱

Tablet

768-1024px

💻

Desktop

> 1024px

💡 Media Queries

Son como "preguntas" que le hacemos al navegador: "¿El ancho es menor a 768px?" Si sí, aplicamos estilos diferentes.

📝 Sintaxis básica:

/* Estilos para móvil */
@media (max-width: 768px) {
    .contenedor {
        flex-direction: column;
    }
    .texto {
        font-size: 14px;
    }
}

🛠️ Técnicas responsive:

• max-width: 100% - Imágenes flexibles

• % y vw/vh - Unidades relativas

• flex-wrap: wrap - Elementos que se reorganizan

• display: none - Ocultar en ciertos tamaños

💻 Editor Responsive

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Página Responsive</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        
        body {
            font-family: Arial, sans-serif;
            background: #f0fdfa;
        }
        
        /* 🎨 Header */
        header {
            background: linear-gradient(135deg, #14b8a6, #0d9488);
            color: white;
            padding: 20px;
            text-align: center;
        }
        
        /* 📦 Contenedor principal */
        .contenedor {
            display: flex;
            gap: 20px;
            padding: 20px;
            max-width: 1200px;
            margin: 0 auto;
        }
        
        /* 📄 Contenido y sidebar */
        .contenido {
            flex: 2;
            background: white;
            padding: 20px;
            border-radius: 15px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }
        
        .sidebar {
            flex: 1;
            background: white;
            padding: 20px;
            border-radius: 15px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }
        
        /* 🖼️ Tarjetas */
        .tarjetas {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 15px;
            margin-top: 20px;
        }
        
        .tarjeta {
            background: linear-gradient(135deg, #99f6e4, #5eead4);
            padding: 20px;
            border-radius: 12px;
            text-align: center;
            font-size: 2rem;
        }
        
        /* 📱 RESPONSIVE - Tablet */
        @media (max-width: 900px) {
            .contenedor {
                flex-direction: column;
            }
            .tarjetas {
                grid-template-columns: repeat(2, 1fr);
            }
        }
        
        /* 📱 RESPONSIVE - Móvil */
        @media (max-width: 600px) {
            header h1 {
                font-size: 1.5rem;
            }
            .tarjetas {
                grid-template-columns: 1fr;
            }
            .sidebar {
                order: -1; /* Mover arriba */
            }
        }
    </style>
</head>
<body>
    <header>
        <h1>🌐 Mi Página Responsive</h1>
        <p>¡Cambia el tamaño para ver la magia!</p>
    </header>
    
    <div class="contenedor">
        <main class="contenido">
            <h2>📰 Contenido Principal</h2>
            <p>Este es el área de contenido que se adapta al tamaño.</p>
            
            <div class="tarjetas">
                <div class="tarjeta">🎨</div>
                <div class="tarjeta">🎮</div>
                <div class="tarjeta">📚</div>
            </div>
        </main>
        
        <aside class="sidebar">
            <h3>📌 Sidebar</h3>
            <p>En móvil esto va arriba!</p>
            <ul>
                <li>Enlace 1</li>
                <li>Enlace 2</li>
                <li>Enlace 3</li>
            </ul>
        </aside>
    </div>
</body>
</html>

👁️ Vista Previa

Responsive Design - ¡Para todos los tamaños!

📱 ¿Qué es Responsive Design?

💡 Media Queries

📝 Sintaxis básica:

🛠️ Técnicas responsive:

1. ¿Qué son los Media Queries?

2. ¿Qué hace "@media (max-width: 768px)"?

3. ¿Cuál es una buena práctica para imágenes responsive?