Fundamentos de las media queries

Parte de la sección Estilos con CSS del Journey de HTML de Coddy. Lección 65 de 76.

Una consulta de medios en CSS permite que un sitio web se adapte a diferentes tamaños de pantalla aplicando estilos según el ancho, la altura u otras propiedades del dispositivo.

Sintaxis básica de las consultas de medios:

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

condición: La regla que activa los estilos (por ejemplo, max-width: 600px).
selector: El o los elementos HTML a los que se aplicarán estilos.

property: La propiedad CSS que se establecerá (por ejemplo, width, font-size).
value: El valor asignado a la propiedad, que cambia según la condición de la consulta de medios.

En una consulta de medios, la condición puede basarse en diversos factores, como el tamaño de la pantalla, la resolución y otros. Algunas condiciones comunes incluyen:

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

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

Estas condiciones te ayudan a controlar cómo se ve tu sitio web en distintos 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 azul claro cuando el ancho de la pantalla es de 600px o menor. Para pantallas de entre 601px y 1024px, el color de fondo será verde claro.

Desafío

Fácil

Se te proporciona un documento HTML con un encabezado (<h1>), un párrafo (<p>) y un <div>. Tu tarea es añadir consultas de medios para hacer que la página sea adaptable. Sigue los pasos siguientes:

Añade una consulta @media para pantallas con un ancho máximo de 600px:
- Establece el color de fondo del cuerpo en azul claro.
- Establece el tamaño de fuente del encabezado (<h1>) en 5vw (el 5 % del ancho de la ventana gráfica).
Añade 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 cuerpo en verde claro.
- Establece el tamaño de fuente del encabezado (<h1>) en 3vw (el 3 % del ancho de la ventana gráfica).

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

Pruébalo tú mismo

<html>
<head>
    <title>Media Queries Basics</title>
    <style>
    <!--Escribe tu código aquí-->
        
    </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>