Basi delle Media Queries

Fa parte della sezione Stilizzare con CSS del percorso HTML di Coddy. Lezione 65 di 76.

Una media query in CSS consente a un sito web di adattarsi a schermi di dimensioni diverse applicando stili in base alla larghezza, all'altezza o ad altre proprietà del dispositivo.

Sintassi di base per le media query:

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

condizione: La regola che attiva gli stili (ad es., max-width: 600px).
selettore: L'elemento o gli elementi HTML da stilizzare.

property: La proprietà CSS da impostare (ad es., width, font-size).
value: Il valore assegnato alla proprietà, che cambia in base alla condizione della media query.

In una media query, la condizione può basarsi su vari fattori come le dimensioni dello schermo, la risoluzione e altro ancora. Alcune condizioni comuni includono:

max-width: Limita gli stili agli schermi con una larghezza massima (ad es., max-width: 600px).
min-width: Applica gli stili agli schermi con una larghezza minima (ad es., min-width: 768px).

max-height: Limita gli stili agli schermi con un'altezza massima (ad es., max-height: 400px).
min-height: Applica gli stili agli schermi con un'altezza minima (ad es., min-height: 500px).

Queste condizioni ti aiutano a controllare l’aspetto del tuo sito web su dispositivi e orientamenti diversi.

Esempio:

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

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

Questo cambia il colore di sfondo in lightblue quando la larghezza dello schermo è di 600px o inferiore. Per gli schermi con larghezza compresa tra 601px e 1024px, il colore di sfondo sarà lightgreen.

Sfida

Facile

Ti viene fornito un documento HTML con un'intestazione (<h1>), un paragrafo (<p>) e un <div>. Il tuo compito è aggiungere media query per rendere la pagina responsive. Segui i passaggi seguenti:

Aggiungi una query @media per gli schermi con una larghezza massima di 600px:
- Imposta il colore di sfondo del body su azzurro chiaro.
- Imposta la dimensione del carattere dell'intestazione (<h1>) su 5vw (5% della larghezza del viewport).
Aggiungi una query @media per gli schermi con una larghezza minima di 601px e una larghezza massima di 1024px:
- Imposta il colore di sfondo del body su verde chiaro.
- Imposta la dimensione del carattere dell'intestazione (<h1>) su 3vw (3% della larghezza del viewport).

Ridimensiona la finestra del browser per vedere come le media query modificano dinamicamente il layout.

Provalo tu

<html>
<head>
    <title>Media Queries Basics</title>
    <style>
    <!--Scrivi il tuo codice qui-->
        
    </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>