Fundamentos de Media Queries

Parte de la sección Styling with CSS del Journey de HTML de Coddy — lección 65 de 76.

Una media query en CSS permite que un sitio web se adapte a diferentes tamaños de pantalla aplicando estilos basados en el ancho, la altura u otras propiedades del dispositivo.

Sintaxis básica para Media Queries:

@media (condition) {  
    selector {  
        property: value;  
    }  
}

condición: La regla que activa los estilos (p. ej., max-width: 600px).
selector: El/los elemento(s) HTML a los que se les aplicará el estilo.

propiedad: La propiedad CSS a establecer (p. ej., width, font-size).
valor: El valor asignado a la propiedad, que cambia según la condición de la media query.

En una media query, la condición puede basarse en varios factores como el tamaño de la pantalla, la resolución y más. Algunas condiciones comunes incluyen:

max-width: Limita los estilos a pantallas con un ancho máximo (p. ej., max-width: 600px).
min-width: Aplica estilos a pantallas con un ancho mínimo (p. ej., min-width: 768px).

max-height: Limita los estilos a pantallas con una altura máxima (p. ej., max-height: 400px).
min-height: Aplica estilos a pantallas con una altura mínima (p. ej., min-height: 500px).

Estas condiciones te ayudan a controlar cómo se ve tu sitio web en diferentes dispositivos y orientaciones.

Ejemplo:

@media (max-width: 600px) {  
  body { background-color: lightblue; }  
}

@media (min-width: 601px) and (max-width: 1024px) {
  body {background-color: lightgreen;}

Esto cambia el color de fondo a lightblue cuando el ancho de la pantalla es de 600px o menos. Para pantallas de entre 601px y 1024px, el color de fondo será lightgreen.

Desafío

Fácil

Se te proporciona un documento HTML con un encabezado (<h1>), un párrafo (<p>) y un <div>. Tu tarea es agregar media queries para que la página sea responsiva. Sigue los pasos a continuación:

Agrega una consulta @media para pantallas con un ancho máximo de "600px":
- Establece el color de fondo del body a "lightblue".
- Establece el tamaño de fuente del encabezado (<h1>) a 5vw (5% del ancho de la ventana gráfica).
Agrega una consulta @media para pantallas con un ancho mínimo de "601px" y un ancho máximo de "1024px":
- Establece el color de fondo del body a "lightgreen".
- Establece el tamaño de fuente del encabezado (<h1>) a 3vw (3% del ancho de la ventana gráfica).

Cambia el tamaño de la ventana del navegador para ver cómo las media queries ajustan el diseño dinámicamente.

Pruébalo tú mismo

<html>
<head>
    <title>Media Queries Basics</title>
    <!--Escribe tu código aquí-->
    <style>
        
        
    </style>
</head>
<body>
    <h1>Whales: The Ocean Giants</h1>  
    <p>Whales are magnificent giants of the sea, famous for their intelligence and powerful songs. These gentle creatures face threats like hunting and pollution, making them vital to protect.</p>  
    <div>As ocean's true giants, whales help maintain the delicate balance of marine life.</div>  
</body>
</html>