CSS 12: Responsive Web Design

Crea sitios web que se vean bien en cualquier dispositivo.

¿Qué es Responsive Design?

El Diseño Web Responsivo (RWD) trata de usar HTML y CSS para redimensionar, ocultar, reducir, ampliar o mover el contenido automáticamente para que se vea bien en cualquier pantalla (escritorios, tablets y móviles).

Regla de Oro: No diseñes para dispositivos específicos (iPhone, iPad), diseña para el contenido y cómo se adapta al espacio disponible.

1. El Viewport

El primer paso esencial es decirle al navegador que controle el ancho y la escala de la página. Sin esto, los móviles intentarán mostrar la web como si fuera de escritorio (alejada).

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

Esto debe ir siempre en el <head> de tu HTML.

2. Media Queries

Las Media Queries son el motor del diseño responsivo. Permiten aplicar estilos CSS solo si se cumplen ciertas condiciones (como el ancho de la pantalla).

Ejemplo Interactivo

Redimensiona la ventana de tu navegador para ver cómo cambia el color de la caja de abajo.

Ancho Actual 
/* Estilo base (Móvil) - Rojo */

.caja { background-color: #e74c3c; }



/* Si el ancho es al menos 600px - Amarillo */

@media (min-width: 600px) {

    .caja { background-color: #f1c40f; }

}



/* Si el ancho es al menos 900px - Verde */

@media (min-width: 900px) {

    .caja { background-color: #2ecc71; }

}

3. Estrategia Mobile First

Mobile First significa diseñar primero para móviles (pantallas pequeñas) y luego añadir estilos para pantallas más grandes usando min-width. Esto hace que el código sea más eficiente y rápido en móviles.

Patrón de Columnas Responsivas

Un patrón muy común: 1 columna en móvil, 2 en tablet, 3 en escritorio.

Caja 1
Caja 2
Caja 3
.contenedor {

    display: grid;

    grid-template-columns: 1fr; /* 1 columna (Móvil por defecto) */

    gap: 10px;

}



/* Tablet */

@media (min-width: 600px) {

    .contenedor {

        grid-template-columns: 1fr 1fr; /* 2 columnas */

    }

}



/* Escritorio */

@media (min-width: 900px) {

    .contenedor {

        grid-template-columns: 1fr 1fr 1fr; /* 3 columnas */

    }

}

4. Unidades Relativas

Evita usar px para anchos. Usa unidades flexibles:

5. Imágenes Responsivas

Para asegurar que las imágenes nunca se desborden de su contenedor, usa esta regla universal:

img {

    max-width: 100%;

    height: auto;

}

Esto asegura que la imagen se reduzca si el contenedor es más pequeño que ella, pero nunca se estire más allá de su tamaño original.

6. Menú Hamburguesa Responsivo (Solo CSS)

Este es un ejemplo práctico de menú de navegación que cambia según el tamaño de pantalla:

Ejemplo Interactivo

Redimensiona la ventana del navegador para ver el cambio. En móvil, haz clic en el icono ? para desplegar el menú.

Código HTML

<nav class="menu-hamburguesa">

    <div class="nav-container">

        <div class="logo">🌐 MiSitio</div>

        

        <!-- Checkbox oculto (truco CSS para toggle sin JS) -->

        <input type="checkbox" id="menu-toggle" class="menu-toggle">

        

        <!-- Icono hamburguesa (label conectado al checkbox) -->

        <label for="menu-toggle" class="hamburger-icon">?</label>

        

        <!-- Enlaces de navegación -->

        <ul class="nav-links">

            <li><a href="#">Inicio</a></li>

            <li><a href="#">Servicios</a></li>

            <li><a href="#">Proyectos</a></li>

            <li><a href="#">Contacto</a></li>

        </ul>

    </div>

</nav>

Código CSS

/* === ESTILOS BASE (Desktop = 650px) === */

.menu-hamburguesa {

    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

}

.nav-container {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 0 20px;

}

.logo {

    color: white;

    font-size: 1.5rem;

    font-weight: bold;

}

.nav-links {

    display: flex;

    list-style: none;

    gap: 5px;

}

.nav-links a {

    color: white;

    text-decoration: none;

    padding: 15px 20px;

    transition: background 0.3s;

}

.nav-links a:hover {

    background: rgba(255,255,255,0.2);

}



/* Ocultar checkbox y hamburguesa en desktop */

.menu-toggle { display: none; }

.hamburger-icon { display: none; }



/* === MEDIA QUERY: Móvil (< 650px) === */

@media (max-width: 649px) {

    /* Mostrar icono hamburguesa */

    .hamburger-icon {

        display: block;

        color: white;

        font-size: 2rem;

        cursor: pointer;

    }

    

    /* Menú vertical oculto por defecto */

    .nav-links {

        position: absolute;

        top: 100%;

        left: 0;

        right: 0;

        flex-direction: column;

        background: #764ba2;

        max-height: 0;

        overflow: hidden;

        transition: max-height 0.3s ease-out;

    }

    

    /* Expandir menú cuando checkbox está :checked */

    .menu-toggle:checked ~ .nav-links {

        max-height: 300px;

    }

    

    .nav-container {

        position: relative;

    }

}

¿Cómo Funciona?

Volver a CSS