HTML #5 Realizzare applicazioni responsive utilizzando le Media Queries

Obiettivo: Applicare i principi delle media queries per creare fogli di stile adattativi in un file HTML.

Pre-requisiti:

HTML #3 CSS

Teoria

Le media queries sono una tecnica di CSS che consente di applicare stili differenti a seconda delle caratteristiche del dispositivo, come la larghezza o l’altezza dello schermo, l’orientamento (verticale o orizzontale), la risoluzione, e altro. Questo strumento è fondamentale per il design responsivo, poiché permette di adattare automaticamente l’aspetto di una pagina web su vari dispositivi come smartphone, tablet e desktop. Ad esempio, si può usare una media query per applicare uno stile specifico ai contenuti quando la larghezza dello schermo è inferiore a 768 pixel oppure quando la larghezza dello schermo è inferiore a 1024 pixel. Questo consente di ottimizzare l’usabilità e l’esperienza dell’utente su schermi di dimensioni diverse, mantenendo una presentazione chiara e leggibile.

Esempio di definizione di una media queries

Viene in seguito riportato un esempio di media queries utile per customizzare lo stile per dispositivi con una larghezza inferiore a 768 px. Nel caso specifico il font del titolo h1 viene impostato uguale a 20px;
<style>
@media (min-width: 768px) {
h1{
font-size:20px;
}
}
</style>

Differentemente, viene riportato un esempio di media queries utile per customizzare lo stile per dispositivi con una larghezza compresa tra 768px e 1024px. Nel caso specifico il font del titolo h1 viene impostato uguale a 15px;
<style>
@media (min-width: 768px) and (max-width: 1024px) {
h1{
font-size:20px;
}
}
</style>

Codice: