CSS
Media Queries

Angular 2 AngularJS ASP.NET HTML JavaScript jQuery PHP SVG twitter-bootstrap WordPress
Ricerca…


Sintassi

  • @media [not | only] mediatype e (media feature) {/ * Regole CSS da applicare * /}

Parametri

Parametro Dettagli
mediatype (Opzionale) Questo è il tipo di media. Potrebbe essere qualsiasi cosa nell'intervallo di all per lo screen .
not (Opzionale) Non applica il CSS per questo particolare tipo di media e si applica a tutto il resto.
media feature Logica per identificare casi d'uso per CSS. Opzioni descritte di seguito.
Caratteristica multimediale Dettagli
aspect-ratio Descrive le proporzioni dell'area di visualizzazione target del dispositivo di output.
color Indica il numero di bit per componente colore del dispositivo di output. Se il dispositivo non è un dispositivo a colori, questo valore è zero.
color-index Indica il numero di voci nella tabella di ricerca colore per il dispositivo di output.
grid Determina se il dispositivo di output è un dispositivo a griglia o un dispositivo bitmap.
height La funzione media dell'altezza descrive l'altezza della superficie di rendering del dispositivo di output.
max-width Il CSS non si applica su una larghezza dello schermo più ampia di quella specificata.
min-width Il CSS non si applica su una larghezza dello schermo più stretta di quella specificata.
max-height Il CSS non si applica su un'altezza dello schermo più alta di quella specificata.
min-height Il CSS non si applica su un'altezza dello schermo inferiore a quella specificata.
monochrome Indica il numero di bit per pixel su un dispositivo monocromatico (in scala di grigi).
orientation I CSS verranno visualizzati solo se il dispositivo utilizza l'orientamento specificato. Vedi le osservazioni per maggiori dettagli.
resolution Indica la risoluzione (densità di pixel) del dispositivo di output.
scan Descrive il processo di scansione dei dispositivi di output televisivi.
width La funzionalità di larghezza del supporto descrive la larghezza della superficie di rendering del dispositivo di output (ad esempio la larghezza della finestra del documento o la larghezza del riquadro di pagina su una stampante).
Funzionalità deprecate Dettagli
device-aspect-ratio CSS Deprecated verrà visualizzato solo sui dispositivi il cui rapporto altezza / larghezza corrisponde al rapporto specificato. Questa è una funzionalità deprecated e non è garantito il funzionamento.
max-device-width Deprecated uguale alla max-width ma misura la larghezza fisica dello schermo, piuttosto che la larghezza di visualizzazione del browser.
min-device-width Deprecated Uguale a min-width ma misura la larghezza fisica dello schermo, piuttosto che la larghezza di visualizzazione del browser.
max-device-height Deprecated uguale a max-height ma misura la larghezza fisica dello schermo, piuttosto che la larghezza di visualizzazione del browser.
min-device-height Deprecated uguale a min-height ma misura la larghezza fisica dello schermo, piuttosto che la larghezza di visualizzazione del browser.

Osservazioni

Le query multimediali sono supportate in tutti i browser moderni, tra cui Chrome, Firefox, Opera e Internet Explorer 9 e versioni successive.

È importante notare che la funzione dei supporti di orientation non è limitata ai dispositivi mobili. Si basa sulla larghezza e altezza del viewport (non sulla finestra o sui dispositivi).

La modalità Paesaggio è quando la larghezza della finestra è più grande dell'altezza della finestra.

La modalità verticale è quando l'altezza del viewport è più grande della larghezza della finestra.

Questo di solito si traduce in un monitor desktop in modalità orizzontale, ma a volte può essere ritratto.

Nella maggior parte dei casi, i dispositivi mobili segnalano la loro risoluzione e non la loro dimensione reale dei pixel che può differire a causa della densità dei pixel. Per costringerli a segnalare la loro reale dimensione dei pixel aggiungi quanto segue all'interno del tuo head tag:

<meta name="viewport" content="width=device-width, initial-scale=1">

Esempio di base

@media screen and (min-width: 720px) {
    body {
        background-color: skyblue;
    }
}

La query multimediale precedente specifica due condizioni:

  1. La pagina deve essere visualizzata su uno schermo normale (non una pagina stampata, un proiettore, ecc.).
  2. La larghezza della porta di visualizzazione dell'utente deve essere di almeno 720 pixel.

Se queste condizioni sono soddisfatte, gli stili all'interno della query multimediale saranno attivi e il colore di sfondo della pagina sarà blu cielo.

Le query multimediali vengono applicate in modo dinamico. Se sulla pagina di caricamento vengono soddisfatte le condizioni specificate nella query multimediale, il CSS verrà applicato, ma verrà immediatamente disabilitato nel caso in cui le condizioni cessino di essere soddisfatte. Al contrario, se le condizioni inizialmente non sono soddisfatte, il CSS non sarà applicato fino a quando non saranno soddisfatte le condizioni specificate.

Nel nostro esempio, se la larghezza della porta di visualizzazione dell'utente è inizialmente maggiore di 720 pixel, ma l'utente riduce la larghezza del browser, il colore di sfondo cesserà di essere blu cielo non appena l'utente ha ridimensionato la porta di visualizzazione a meno di 720 pixel in larghezza. 

<link rel="stylesheet" media="min-width: 600px" href="example.css" />

Questo foglio di stile è ancora scaricato ma viene applicato solo su dispositivi con una larghezza dello schermo superiore a 600 px.

tipo di supporto

Le query multimediali hanno un parametro mediatype facoltativo. Questo parametro viene posizionato direttamente dopo la @media dichiarazione ( @media mediatype ), ad esempio: 

@media print {
    html {
        background-color: white;
    }
}

Il precedente codice CSS darà all'elemento HTML DOM un colore di sfondo bianco durante la stampa.

Il parametro mediatype ha un prefisso not o only facoltativo che applicherà gli stili a tutto tranne il tipo di media specificato o solo il tipo di supporto specificato, rispettivamente. Ad esempio, il seguente esempio di codice applicherà lo stile a ogni tipo di supporto tranne la print . 

@media not print {
    html {
        background-color: green;
    }
}

E allo stesso modo, per mostrarlo solo sullo schermo, questo può essere usato: 

@media only screen {
    .fadeInEffects {
        display: block;
    }
}

L'elenco di mediatype può essere compreso meglio con la seguente tabella:

Tipo di supporto Descrizione
all Applica a tutti i dispositivi
screen Computer predefiniti
print Stampanti in generale. Utilizzato per lo stile delle versioni di stampa dei siti Web
handheld PDA, cellulari e dispositivi portatili con schermo piccolo
projection Per presentazioni proiettate, ad esempio proiettori
aural Sistemi vocali
braille Dispositivi tattili braille
embossed Stampanti braille paginate
tv Dispositivi di tipo televisivo
tty Dispositivi con una griglia di caratteri a passo fisso. Terminali, portatili.

Utilizzo di query multimediali per scegliere come target dimensioni schermo diverse

Spesso, il web design reattivo coinvolge le query multimediali, che sono blocchi CSS che vengono eseguiti solo se una condizione è soddisfatta. Questo è utile per il web design reattivo perché puoi utilizzare le query multimediali per specificare diversi stili CSS per la versione mobile del tuo sito web rispetto alla versione desktop. 

@media only screen and (min-width: 300px) and (max-width: 767px) {
    .site-title {
        font-size: 80%;
    }

    /* Styles in this block are only applied if the screen size is atleast 300px wide, but no more than 767px */
}

@media only screen and (min-width: 768px) and (max-width: 1023px) {
    .site-title {
        font-size: 90%;
    }

    /* Styles in this block are only applied if the screen size is atleast 768px wide, but no more than 1023px */
}

@media only screen and (min-width: 1024px) {
    .site-title {
        font-size: 120%;
    }

    /* Styles in this block are only applied if the screen size is over 1024px wide. */
}

Larghezza vs Viewport

Quando utilizziamo la "larghezza" con le query multimediali, è importante impostare correttamente il metatag. Il meta tag di base ha questo aspetto e deve essere inserito nel tag <head> . 

<meta name="viewport" content="width=device-width,initial-scale=1">

Perché questo è importante?

Sulla base della definizione di MDN "larghezza" è

La funzionalità di larghezza del supporto descrive la larghezza della superficie di rendering del dispositivo di output (ad esempio la larghezza della finestra del documento o la larghezza del riquadro di pagina su una stampante).

Cosa significa?

View-port è la larghezza del dispositivo stesso. Se la risoluzione dello schermo indica che la risoluzione è 1280 x 720, la larghezza della porta di visualizzazione è "1280px".

Più spesso molti dispositivi allocano una quantità di pixel diversa per visualizzare un pixel. Ad esempio iPhone 6 Plus ha una risoluzione di 1242 x 2208. Ma la larghezza della finestra e l'altezza della finestra sono 414 x 736 effettivi. Ciò significa che vengono utilizzati 3 pixel per creare 1 pixel.

Ma se non hai impostato correttamente il meta , tenterà di mostrare la tua pagina web con la sua risoluzione nativa che si traduce in una visualizzazione ingrandita (testi e immagini più piccoli).

Media Queries per Retina e Non Retina Screens

Anche se questo funziona solo per i browser basati su WebKit, questo è utile: 

/* ----------- Non-Retina Screens ----------- */
@media screen 
  and (min-width: 1200px) 
  and (max-width: 1600px) 
  and (-webkit-min-device-pixel-ratio: 1) { 
}

/* ----------- Retina Screens ----------- */
@media screen 
  and (min-width: 1200px) 
  and (max-width: 1600px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (min-resolution: 192dpi) { 
}

Informazioni di base

Ci sono due tipi di pixel nel display. Uno è i pixel logici e l'altro è i pixel fisici. Principalmente, i pixel fisici rimangono sempre gli stessi, perché è lo stesso per tutti i dispositivi di visualizzazione. I pixel logici cambiano in base alla risoluzione dei dispositivi per visualizzare pixel di qualità superiore. Il rapporto pixel del dispositivo è il rapporto tra pixel fisici e pixel logici. Ad esempio, MacBook Pro Retina, iPhone 4 e versioni successive riportano un rapporto pixel del dispositivo pari a 2, in quanto la risoluzione lineare fisica è il doppio della risoluzione logica.

Il motivo per cui funziona solo con i browser basati su WebKit è dovuto a:

  • Il prefisso del venditore -webkit- prima della regola.
  • Questo non è stato implementato in motori diversi da WebKit e Blink.

Terminologia e struttura

Le query multimediali consentono di applicare le regole CSS in base al tipo di dispositivo / supporto (ad es. Schermo, stampa o palmare) chiamato tipo di supporto , vengono descritti aspetti aggiuntivi del dispositivo con funzioni multimediali quali la disponibilità di dimensioni di colore o viewport.

Struttura generale di una query multimediale 

@media [...] {
    /* One or more CSS rules to apply when the query is satisfied */
}

Una query multimediale contenente un tipo di media 

@media print {
    /* One or more CSS rules to apply when the query is satisfied */
}

Una query multimediale contenente un tipo di supporto e una funzione multimediale 

@media screen and (max-width: 600px) {
    /* One or more CSS rules to apply when the query is satisfied */
}

Una query multimediale contenente una funzione multimediale (e un tipo di media implicito di "tutti") 

@media (orientation: portrait) {        
    /* One or more CSS rules to apply when the query is satisfied */
}

Media query e IE8

Le query multimediali non sono supportate affatto in IE8 e versioni precedenti.

Una soluzione alternativa basata su Javascript

Per aggiungere il supporto per IE8, è possibile utilizzare una delle diverse soluzioni JS. Ad esempio, è possibile aggiungere Rispondi per aggiungere il supporto per le query multimediali per IE8 solo con il seguente codice: 

<!--[if lt IE 9]>
<script 
   src="respond.min.js">
</script>
<![endif]-->

CSS Mediaquery è un'altra libreria che fa la stessa cosa. Il codice per aggiungere quella libreria al tuo HTML sarebbe identico: 

<!--[if lt IE 9]>
<script 
   src="css3-mediaqueries.js">
</script>
<![endif]-->

L'alternativa

Se non ti piace una soluzione basata su JS, dovresti anche considerare di aggiungere un foglio di stile IE <9 solo dove aggiusti lo stile specifico per IE <9. Per questo, dovresti aggiungere il seguente codice HTML al tuo codice: 

<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" media="all" href="style-ielt9.css"/>
<![endif]-->

Nota :

Tecnicamente è un'altra alternativa: usare gli hack CSS per scegliere IE <9. Ha lo stesso impatto di un foglio di stile IE <9, ma per questo non è necessario un foglio di stile separato. Non raccomando questa opzione, dato che producono codice CSS non valido (che è solo una delle numerose ragioni per cui l'uso degli hack CSS è generalmente disapprovato oggi).



Modified text is an extract of the original Stack Overflow Documentation
Autorizzato sotto CC BY-SA 3.0
Non affiliato con Stack Overflow