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.

Hoja de referencia

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

Sintaxis básica:

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

Condiciones comunes:

max-width: Limita los estilos a pantallas con un ancho máximo
min-width: Aplica estilos a pantallas con un ancho mínimo
max-height: Limita los estilos a pantallas con una altura máxima
min-height: Aplica estilos a pantallas con una altura mínima

Ejemplo:

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

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

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>