Media Queries y Diseño Responsive

Media Queries son una característica clave del diseño responsive, que permite que las páginas web se adapten a diferentes tamaños de pantalla y dispositivos. Utilizando media queries, puedes aplicar estilos específicos según las características del dispositivo, como el ancho de la pantalla, la orientación, y más.

1. Concepto de Diseño Responsive

El diseño responsive busca garantizar que una página web se vea y funcione bien en una amplia variedad de dispositivos, desde teléfonos móviles hasta monitores de escritorio. Esto se logra mediante la adaptación del contenido y el diseño en función de las características del dispositivo.

2. Media Queries

Media Queries permiten aplicar estilos CSS basados en condiciones específicas del dispositivo, como el ancho o alto de la pantalla. La sintaxis básica es:

Sintaxis Básica:

@media condición {
    /* Estilos CSS aquí */
}

Condición: Define el criterio para aplicar los estilos, como el ancho de la pantalla.

Ejemplo de Media Query:

@media (max-width: 600px) {
    body {
        background-color: lightblue;
    }
    
    .contenedor {
        display: block;
    }
    
    .caja {
        width: 100%;
        padding: 10px;
    }
}

En este ejemplo, los estilos se aplicarán cuando el ancho de la pantalla sea de 600 píxeles o menos.

3. Tipos Comunes de Media Queries

Ancho y Alto de la Pantalla:
- min-width: Se aplica si el ancho de la pantalla es al menos el valor especificado.

@media (min-width: 768px) {
    .contenedor {
        display: flex;
    }
}

max-width: Se aplica si el ancho de la pantalla es a lo sumo el valor especificado.

@media (max-width: 768px) {
    .contenedor {
        display: block;
    }
}

min-height y max-height: Se aplican según el alto de la pantalla.

@media (min-height: 800px) {
    .contenido {
        padding: 20px;
    }
}

Orientación de la Pantalla:

orientation: landscape: Se aplica cuando la pantalla está en modo horizontal.

@media (orientation: landscape) {
    .caja {
        width: 50%;
    }
}

orientation: portrait: Se aplica cuando la pantalla está en modo vertical.

@media (orientation: portrait) {
    .caja {
        width: 100%;
    }
}

Resolución:

resolution: Se aplica según la densidad de píxeles del dispositivo.

@media (min-resolution: 192dpi) {
    .imagen {
        background-image: url("alta-resolucion.jpg");
    }
}

4. Diseño Mobile-First vs. Desktop-First

Mobile-First: Comienza con estilos para dispositivos móviles y luego utiliza media queries para agregar estilos para pantallas más grandes.

/* Estilos para dispositivos móviles */
body {
    font-size: 14px;
}

@media (min-width: 768px) {
    /* Estilos para pantallas mayores a 768px */
    body {
        font-size: 16px;
    }
}

Desktop-First: Comienza con estilos para pantallas grandes y utiliza media queries para adaptar el diseño a pantallas más pequeñas.

/* Estilos para pantallas grandes */
body {
    font-size: 18px;
}

@media (max-width: 768px) {
    /* Estilos para pantallas menores a 768px */
    body {
        font-size: 14px;
    }
}

5. Ejemplo Completo de Diseño Responsive

Aquí tienes un ejemplo de cómo aplicar media queries para un diseño responsive que cambia la disposición de los elementos en función del tamaño de la pantalla:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ejemplo de Media Queries</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }
        
        .contenedor {
            display: flex;
            flex-wrap: wrap;
        }
        
        .caja {
            background-color: lightcoral;
            color: white;
            padding: 20px;
            margin: 10px;
            flex: 1;
        }
        
        @media (max-width: 600px) {
            .caja {
                flex: 1 1 100%; /* Las cajas se apilan verticalmente en pantallas pequeñas */
                font-size: 14px;
            }
        }

        @media (min-width: 601px) and (max-width: 1200px) {
            .caja {
                flex: 1 1 45%; /* Las cajas se colocan en dos columnas en pantallas medianas */
                font-size: 16px;
            }
        }

        @media (min-width: 1201px) {
            .caja {
                flex: 1 1 30%; /* Las cajas se colocan en tres columnas en pantallas grandes */
                font-size: 18px;
            }
        }
    </style>
</head>
<body>
    <div class="contenedor">
        <div class="caja">Caja 1</div>
        <div class="caja">Caja 2</div>
        <div class="caja">Caja 3</div>
        <div class="caja">Caja 4</div>
    </div>
</body>
</html>