Sono Andrea Tonin di Rovigo, sono web-designer di professione. Il mio lavoro consiste nel fornire ai miei clienti interfacce di navigazione accattivanti e personalizzate. Questa esigenza lavorativa mi ha portato a sviluppare una buona conoscenza delle tecniche HTML e CSS. Spero che questo corso pratico di CSS vi possa essere utile 
Il CSS3 introduce la possibilità di analizzare il tipo di dispositivo utilizzato dall’utente, in particolare la risoluzione e l’orientamento dello schermo. Questo sistema di riconoscimento è definito “media query”.
L’utilizzo pratico del “media query” è l’applicazione di stili CSS differenti in base alla risoluzione e all’orientamento dello schermo. Ai giorni nostri è necessario realizzare siti web leggibili nei monitor da PC con risoluzioni in FULL HD di 1920×1080 px, fino ai display di smartphone di 3 pollici con una risoluzione di 480×800 px. E’ chiaro che un solo foglio di stile non basta!
Vediamo le media feature “width”, “height”, “max-width”, “min-width” che ci permettono di analizzare la risoluzione dello schermo.
Un esempio pratico nel seguente codice:
<!DOCTYPE html>
<html>
<head>
<title>Titolo del documento</title>
<style type="text/css">
@media only screen and (width: 400px) {
regola1 css;
}
@media only screen and (width: 1280px) {
regola2 css;
}
</style>
</head>
<body>
Contenuto del documento
</body>
</html>
La “regola1 css” sarà applicata solo agli schermi con risoluzione orizzontale di 400 pixel.
La “regola2 css” sarà applicata solo agli schermi con risoluzione orizzontale di 1280 pixel.
Lavoriamo in modo più professionale nel codice qui di seguito:
<!DOCTYPE html> <html> <head> <title>Titolo del documento</title> <!-- Questo CSS viene caricato per i monitor di larghezza da 0 a 480 pixel --!> <link rel="stylesheet" media="only screen and (max-width: 480px)" href="smartphone.css" /> <!-- Questo CSS viene caricato per i monitor di larghezza da 481 a 768 pixel --!> <link rel="stylesheet" media="only screen and (min-width: 481px) and (max-width:768px)" href="tablet.css" /> <!-- Questo CSS viene caricato per i monitor di larghezza da 769 pixel a infinito --!> <link rel="stylesheet" media="only screen and (min-width: 769px)" href="fullhddisplay.css" /> </head> <body> Contenuto del documento </body> </html>
Da notare che il file tablet.css si caricherà solo se il risultato dell’operazione booleana “and” è soddisfatto, cioè se tutte le condizioni sono vere.
La sintassi corretta delle proprietà descritte è:
/* WIDHT */
@media only screen
and (width: 1280px) {
regola2 css;
}
/* HEIGHT */
@media only screen
and (height: 1280px) {
regola2 css;
}
/* MIN-WIDHT */
@media only screen
and (min-width: 1280px) {
regola2 css;
}
/* MAX-WIDHT */
@media only screen
and (max-width: 1280px) {
regola2 css;
}
/* MIN-HEIGTH */
@media only screen
and (min-height: 1280px) {
regola2 css;
}
/* MAX-HEIGTH */
@media only screen
and (max-height: 1280px) {
regola2 css;
}
