Ti è piaciuto? Condividi su social!

CSS3 Media Query

Media query in CSS3 consentono di specificare un insieme di stili che verranno utilizzati per specifici tipi di dispositivi.per visualizzazione del sito web

Media query controllano altezza e larghezza del browser del utente e l'altezza e larghezza dello schermo del dispositivo in uso per visualizzazione del sito , l'orientamento del tablet o telefono (orizzontale o verticale), e molti altri aspetti , ma piu spesso sono utilizzati per verificare la larghezza e altezza dello schermo del dispositivo che si sta utilizzando per visualizzare sito .

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:

@media screen and (max-width: 600px) {
body {font-size: 80%;}
}

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 ):

@media screen and (max-width: 600px) {
/* css-stili */;
}

Stili di tale richiesta saranno utilizzati solo per i dispositivi con largezza dell'area di visualizzazione non più di 600px .

@media (min-width: 600px) and (max-width: 800px) {
/* css-stili seguono  */;
}

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.

@media not all and (monochrome) {...}

la richiesta sara uguale alla richiesta

@media not (all and (monochrome)) {...}

Se la media richiesta viene effettuata utilizzando l'operatore virgola, allora la negazione si applica solo alla parte che va prima della virgola

@media not screen and (color), print and (color)

sara ugule a

@media (not (screen and (color))), print and (color)

2.3.L'operatore only

L'operatore only consente di collegare gli stili per i browser che non supportano media query, come ad esempio:

@media only screen and (color) {
/* css-stili */;
}

2.4. L'operatore virgola

operatore virgola funziona in modo simile dell'operatore logico or

@media screen, projection {
/* css-stili */;
}

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.

tabella 1. Tipo del dispositivo
Valore	Descrizione
`all`	Adatto a tutti i tipi di dispositivi.
`print`	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.

Tabella2 . Caratteristiche del dispositivo
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):

/* Smartphones (orientamento orizontale e verticale ) ----------- */
@media only screen and (min-width : 320px) and (max-width : 480px) {
/* stili CSS */
}
/* Smartphones (orizzontale) ----------- */
@media only screen and (min-width: 321px) {
/* stili CSS */
}
/* Smartphones (verticale) ----------- */
@media only screen and (max-width: 320px) {
/* stili CSS */
}
/* iPads (verticale e orizzontale ) ----------- */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
/* stili CSS */
}
/* iPads (orizzontale) ----------- */
@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
/* stili CSS*/
}
/* iPads (verticale) ----------- */
@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
/* stili CSS */
}
/* iPad 3**********/
@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) {
/* stili CSS */
}
@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {
/* stili CSS */
}
/* Computer portatili e pc desktop  ----------- */
@media only screen  and (min-width: 1224px) {
/* stili CSS */
}
/* Schermi grandi ----------- */
@media only screen  and (min-width: 1824px) {
/* stili CSS */
}
/* iPhone 4 ----------- */
@media only screen and (min-width: 320px) and (max-width: 480px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) {
/* stili CSS */
}
@media only screen and (min-width: 320px) and (max-width: 480px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {
/* stili CSS */
}
/* iPhone 5 ----------- */
@media only screen and (min-width: 320px) and (max-height: 568px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2){
/* stili CSS */
}
@media only screen and (min-width: 320px) and (max-height: 568px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2){
/* stili CSS*/
}
/* iPhone 6 ----------- */
@media only screen and (min-width: 375px) and (max-height: 667px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2){
/* stili CSS */
}
@media only screen and (min-width: 375px) and (max-height: 667px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2){
/* stili CSS */
}
/* iPhone 6+ ----------- */
@media only screen and (min-width: 414px) and (max-height: 736px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2){
/* stili CSS */
}
@media only screen and (min-width: 414px) and (max-height: 736px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2){
/* stili CSS */
}
/* Samsung Galaxy S3 ----------- */
@media only screen and (min-width: 320px) and (max-height: 640px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2){
/* stili CSS */
}
@media only screen and (min-width: 320px) and (max-height: 640px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2){
/* stili CSS */
}
/* Samsung Galaxy S4 ----------- */
@media only screen and (min-width: 320px) and (max-height: 640px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 3){
/* stili CSS */
}
@media only screen and (min-width: 320px) and (max-height: 640px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 3){
/* stili CSS */
}
/* Samsung Galaxy S5 ----------- */
@media only screen and (min-width: 360px) and (max-height: 640px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 3){
/* stili CSS */
}
@media only screen and (min-width: 360px) and (max-height: 640px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 3){
/* stili CSS */
}

Per controllare come il vostro sito appare su diversi dispositivi, è possibile utilizzare il servizio

Responsive design testing for the masses.

Letto 619 volte