Creare CSS3 Media Queries
1. La struttura delle media query
Media query è costituita dalla regola @media, seguita dalla specificazione tipo del dispositivo, dalla indicazione di almeno una caratteristica del dispositivo in analizzi, e la condizione della media query:
Stili di media query, che evedimo nel esempio sopra racchiusi tra parentesi graffe si applicano nei casi in cui la larghezza del scermo del dispositivo è inferiore a 600px. Se la larghezza è maggiore, il browser ignora gli stili di questa media query.
Regole della @media query si scrivono sempre alla fine del file di stili CSS.
2. Gli operatori logici
Con l'aiuto di operatori logici si possono creare @media query combinati, dove posiamo prescrivere parecchie condizioni da verificare su dispositivo.
2.1. L'operatore and
L'operatore and collega tra di loro diverse condizioni(posiamo paragonarlo con “e” italiano, questo e quello da verificare ):
Stili di tale richiesta saranno utilizzati solo per i dispositivi con largezza dell'area di visualizzazione non più di 600px .
Stili di tale richiesta saranno utilizzati per tutti i dispositivi con una larghezza dell'area di visualizzazione da 600px a 800px compreso.
Regola @media all and (max-width: 600px) {...} è equivalente alla regola @media (max-width: 600px) {...} .
2.2. L'operatore not
Operatore not permette di applicare le regole di un @media query nel caso contrario La parola chiave not viene aggiunta al inizio della media query e si applica a tutta la intera richiesta (query) nel suo complesso.
la richiesta sara uguale alla richiesta
Se la media richiesta viene effettuata utilizzando l'operatore virgola, allora la negazione si applica solo alla parte che va prima della virgola
sara ugule a
2.3.L'operatore only
L'operatore only consente di collegare gli stili per i browser che non supportano media query, come ad esempio:
2.4. L'operatore virgola
operatore virgola funziona in modo simile dell'operatore logico or
In questo caso i CSS-stili racchiusi tra parentesi graffe verranno eseguiti solo su monitor o su un dispositivo di proiezione.
3. Tipo di supporto
Tipo di supporto rappresenta il tipo di dispositivo, come stampanti, schermi.
Valore | Descrizione |
---|---|
all | Adatto a tutti i tipi di dispositivi. |
Destinato per materiale e documenti visualizzati sullo schermo in modalità anteprima di stampa. | |
screen | Destinato principalmente per gli monitor a colori. |
speech | Destinato ai sintetizzatori vocali./td> |
4. Le caratteristiche del dispositivo
Vediamo principali valori del dispositivo che possono essere prese in considerazione ed esaminate per applicare varie stili CSS di una media richiesta.
Parametro | Descrizione |
---|---|
width | Controllare la larghezza dell'area di visione. I valori sono espressi in unità di lunghezza, px, em, ecc, per esempio, (width: 800px) . Di solito per la verifica vengono utilizzato la larghezza minima e massima. min-width viene utilizato se la larghezza del campo di visualizzazione maggiore del valore specificato nella richiesta, max-width - la larghezza del campo visivo è inferiore al valore specificato nella richiesta. |
height | Controlla l'altezza dell'area di visualizzazione. I valori sono espressi in unità di lunghezza, px, em, ecc, per esempio, (height: 500px). Di solito viene utilizato per controlare l'altezza minima e massima. min-height applica gli stili se l'altezza dell'area di visualizzazione è maggiore del valore specificato nella richiesta, max-height per i casi che l'altezza dell'area di visualizzazione è inferiore al valore specificato nella richiesta. |
aspect-ratio | Controlla il rapporto tra la larghezza e l'altezza dell'area di visualizzazione. Uno scermo grande con un aspect ratio di 16: 9 può essere contrassegnato come (aspect-ratio: 16/9) . min-aspect-ratio controlla il rapporto minimo, max-aspect-ratio il rapporto tra la larghezza massima e l'altezza dell'area di visualizzazione. |
orientation | Controlla l'orientamento dell'area di visualizzazione. Ci sono due valori:: (orientation: portrait) e (orientation: landscape). |
resolution | Controlla la risoluzione dello schermo (numero di pixel). I valori possono anche controllare quantita di punti per pollice (dpi) o punti per centimetro (dpcm) , per esempio, (resolution: 300dpi) . min-resolution controlla la risoluzione minima dello schermo, max-resolution - controlla la risoluzione massima dello schermo. |
color | Verifica il numero di bit per ciascuno dei componenti di colore del dispositivo in output. Ad esempio, (min-color: 4) , significa che il dispositivo di schermo dovrebbe avere una determinata profondità di colore a 4 bit. min-color controlla un numero minimo di bit, max-color - il numero massimo di bit. |
color-index | Verifica il numero di colori nella tabella consentiti nel dispositivo in uso. Il valore indica un numero positivo, ad esempio, (color-index: 256). min-color-index verificare il numero minimo di colori, max-color-index — verificare il numero massimo di colori. |
monochrome | Verifica il numero di bit per pixel in bianco e nero nel dispositivo. Il valore è un numero intero positivo, ad esempio, (min-monochrome: 8). min-monochrome verificare il numero minimo di bit, max-monochrome verificare il numero massimo di bit. |
-webkit-device-pixel-ratio | Specifica il numero di pixel fisici di dispositivo per ogni css pixel. |
5. Per quali dimensioni dello schermo di un dispositivo dobiamo orientarsi
Nel scrivere media query dobbiamo orientarsi su cosi detti punti di rottura del disegno, vale a dire dobbiamo orientarsi su dimensioni della finestra del browser, dove il design del sito cambia la sua struttura in modo significativo, per esempio, dopo restringimento della larghezza del dispositivo appare una barra di scorrimento orizzontale. Per determinare questi punti, è necessario aprire il sito nel browser, e ridurre gradualmente l'area di visualizzazione.
Per adattare il design del sito per i vari dispositivi, è necessario specificare stili diversi per diverse risoluzioni dello schermo, utilizzando i seguenti punti di controllo (non necessariamente tutti):
Per controllare come il vostro sito appare su diversi dispositivi, è possibile utilizzare il servizio