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

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

  

Perché è richiesto l’uso di ” Solo “. Lo screen non fornisce di per sé sufficienti informazioni da rendere 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) 

Analizziamo i tuoi esempi uno per uno.

 @media (max-width:632px) 

Questo sta dicendo per una finestra con una max-width di 632 px 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 uno screen e una finestra con max-width di 632 px applica lo stile. Questo è quasi identico a quanto sopra, tranne che si specifica lo screen rispetto agli altri tipi di supporto disponibili, il più comune altro da print .

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

Ecco una citazione direttamente dal W3C per spiegare questo.

La parola chiave ‘only’ può anche essere usata per hide i fogli di stile dai vecchi user-agent. 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 media come “solo”, il foglio di stile dovrebbe essere ignorato dai browser più vecchi.

Ecco il link a quella citazione che è mostrata nell’esempio 9 su quella pagina.

Spero che questo faccia luce sulle query sui media.

MODIFICARE:

Assicurati di controllare la risposta eccellente di @hybrids su come viene gestita l’ only parola chiave.

Quanto segue è di Adobe doc .


Le specifiche delle query multimediali forniscono anche only la parola chiave, che è intesa a hide le query multimediali dai 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)" 

I browser che non riconoscono le query multimediali si aspettano un elenco separato da virgole di tipi di supporto e le specifiche indicano che devono troncare ogni valore immediatamente prima del primo carattere non anonimo che non è un trattino. Quindi, un vecchio browser dovrebbe interpretare l’esempio precedente come questo:

 media="only" 

Poiché non esiste un tipo di supporto di questo tipo, 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, dovrebbe applicare le regole di stile a tutti i dispositivi dello schermo, anche se non sa cosa significano le media query.

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 hide gli stili da altri browser meno comuni.


Quindi, usando

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

e

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

avrà lo stesso effetto in IE6-8: entrambi impediranno l’utilizzo di questi stili. Tuttavia, saranno comunque scaricati.

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

Non sono completamente sicuro che i browser che non supportano le query multimediali CSS3 necessitino della only versione

 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 a un laboratorio di dispositivi.

Per lo stile di molti smartphone con schermi più piccoli, è ansible scrivere:

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

Per impedire ai browser più vecchi di visualizzare un foglio di stile del telefono iPhone o Android, potresti scrivere:

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

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

La risposta di @hybrid è abbastanza istruttiva, tranne 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 indirizzare i siti più grandi. Non dovremmo usare l’unica parola chiave in quel contesto, giusto? ”

Vuoi aggiungere qui che lo scopo è semplicemente quello di evitare che i browser non di supporto utilizzino lo stile di Altra periferica come se partisse da “schermo” senza che lo prenda per lo schermo dove come se partisse da “solo” lo stile verrà ignorato.

Rispondere ad ashitaka considera questo esempio

   

Se non usiamo “solo” funzionerà ancora come lo stile del desktop verrà utilizzato anche per gli stili Android ma con un sovraccarico non necessario. In questo caso, se un browser non supporta, eseguirà il fallback sul secondo foglio di stile ignorando il primo.