Fundamentos de Media Queries

Parte de la sección Styling with 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 Media Queries:

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

condition: La regla que activa los estilos (por ejemplo, max-width: 600px).
selector: El/los elemento(s) HTML al que se aplicarán los estilos.

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

En una consulta de medios, la condition 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 (por ejemplo, max-height: 400px).
min-height: Aplica estilos a pantallas con una altura mínima (por ejemplo, min-height: 500px).

These condiciones te ayudan a controlar el aspecto de 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 menor. 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 añadir consultas de medios para hacer que la página sea adaptable. Sigue los pasos a continuación:

Añade una consulta @media para pantallas con un ancho máximo de 600px:
- Establece el color de fondo de body en lightblue.
- Establece el tamaño de fuente del encabezado (<h1>) en 5vw (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 de body en lightgreen.
- Establece el tamaño de fuente del encabezado (<h1>) en 3vw (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 dinámicamente el diseño.

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>