Qual è la differenza tra "schermo" e "solo schermo" nelle media query?

Question

Qual è la differenza tra "schermo" e "solo schermo" nelle media query?

<link media="screen and (max-device-width: 480px)" rel="stylesheet" href="m.css" /> 
<link media="only screen and (max-device-width: 480px)" rel="stylesheet" href="m.css" /> 

Perché siamo obbligati a usare 'Solo'. screen non fornisce di per sé informazioni sufficienti per il rendering solo per lo schermo?

Ho visto molti siti Web reattivi. Alcuni usano

@media screen and (max-width:632px) 

Alcuni

@media (max-width:632px) 

e alcuni

@media only screen and (max-width:632px) 

Answer 1

Per stile per molti smartphone con schermi più piccoli, si potrebbe scrivere:

@media screen and (max-width:480px) { … } 

Per bloccare i vecchi browser dal vedere un iPhone o foglio di stile telefono Android, si potrebbe scrivere:

@media only screen and (max-width: 480px;) { … } 

Leggi questo articolo per ulteriori http://webdesign.about.com/od/css3/a/css3-media-queries.htm

Answer 2

Rompiamo il vostro esempi uno per uno.

@media (max-width:632px) 

Questo sta dicendo per una finestra con un max-width di 632px che si desidera applicare questi stili. A quella dimensione, nella maggior parte dei casi, si parlerebbe di qualcosa di più piccolo di uno schermo desktop.

@media screen and (max-width:632px) 

Questo sta dicendo per un dispositivo con un screen e una finestra con max-width di 632px applicare lo stile. Questo è quasi identico a quanto sopra, eccetto che stai specificando screen in contrapposizione allo other available media types l'altro più comune è print.

@media only screen and (max-width:632px) 

Ecco una citazione direttamente dal W3C per spiegare questo.

La parola chiave 'only' può essere utilizzata anche per nascondere i fogli di stile dai programmi utente precedenti. I programmi utente devono elaborare le query multimediali che iniziano con 'only' come se la parola chiave 'only' non fosse presente.

Poiché non esiste un tipo di supporto "solo", il foglio di stile deve essere ignorato dai browser meno recenti.

Ecco lo link to that quote che viene mostrato nell'esempio 9 in quella pagina.

Speriamo che questo faccia luce sulle richieste dei media.

EDIT:

Assicuratevi di controllare @hybrids excellent answer su come la parola only è davvero gestita.

Answer 3

Il seguente è da Adobe docs.

---

La specifica media query fornisce anche la parola chiave only, che ha lo scopo di nascondere le media query dal browser più vecchi. Come not, la parola chiave deve arrivare all'inizio della dichiarazione. Per esempio:

media="only screen and (min-width: 401px) and (max-width: 600px)" 

browser che non riconoscono le media query si aspettano un elenco separato da virgole di tipi di media, e la specifica dice che dovrebbero troncare subito ogni valore prima del primo carattere non alfanumerico che non è un trattino. Così, un vecchio browser dovrebbe interpretare l'esempio precedente come questo:

media="only" 

Perché non esiste il tipo di supporto come solo, il foglio di stile viene ignorato. Allo stesso modo, un vecchio browser dovrebbe interpretare

media="screen and (min-width: 401px) and (max-width: 600px)" 

come

media="screen" 

In altre parole, si dovrebbe applicare le regole di stile a tutti i dispositivi dello schermo, anche se non sa cosa le query multimediali significare.

Sfortunatamente, IE 6-8 non è riuscito a implementare correttamente le specifiche.

Invece di applicare gli stili a tutti i dispositivi dello schermo, ignora del tutto il foglio di stile.

Nonostante questo comportamento, si consiglia comunque di aggiungere un prefisso alle query multimediali solo se si desidera nascondere gli stili da altri browser meno comuni.

---

Quindi, utilizzando

media="only screen and (min-width: 401px)" 

e

media="screen and (min-width: 401px)" 

avrà lo stesso effetto in IE6-8: entrambi saranno prevenire quegli stili vengano utilizzati. Tuttavia, saranno comunque scaricati.

Inoltre, nei browser che supportano le query multimediali CSS3, entrambe le versioni caricheranno gli stili se la larghezza della finestra è maggiore di 401px e il tipo di supporto è schermo.

io non sono del tutto sicuro che i browser che non supporta le query supporti CSS3 avrebbe bisogno la versione only

media="only screen and (min-width: 401px)" 

al contrario di

media="screen and (min-width: 401px)" 

per assicurarsi che non sia interpretato come

media="screen" 

Sarebbe un buon test per qualcuno con accesso ad annunci laboratorio di evice.

Answer 4

La risposta di @hybrid è abbastanza istruttiva, eccetto che non spiega lo scopo come menzionato da @ashitaka "Che cosa succede se usi l'approccio Mobile First? Quindi, abbiamo prima il css mobile e poi usiamo il min-width per Non è consigliabile utilizzare l'unica parola chiave in questo contesto, giusto? "

Vuoi aggiungere qui che lo scopo è semplicemente quello di impedire ai browser non di supporto di utilizzare quello stile di dispositivo Altro come se partisse da" schermo "senza lo prenderà per schermo dove come se partisse da" solo "lo stile verrà ignorato.

Rispondere a Ashitaka considerare questo esempio

<link rel="stylesheet" type="text/css" 
    href="android.css" media="only screen and (max-width: 480px)" /> 
<link rel="stylesheet" type="text/css" 
    href="desktop.css" media="screen and (min-width: 481px)" /> 

Se non usiamo "solo" sarà ancora funzionerà come lo stile del desktop saranno utilizzati anche sorprendente stili Android, ma con inutile sovraccarico. In questo caso, se un browser non supporta, eseguirà il fallback sul secondo foglio di stile ignorando il primo.