Quelle est la différence entre "l'écran" et "écran" dans les media queries?

Question

Quelle est la différence entre "l'écran" et "écran" dans les media queries?

<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" />

Pourquoi sommes-nous obligés d'utiliser 'Seulement'. N' screen pas en elle-même suffisamment d'informations pour être restitué qu'à l'Écran?

J'ai vu beaucoup de sites sensibles. Certains utilisent

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

Certains

@media (max-width:632px)

et certains

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

Answer 1

Examinons vos exemples un par un.

@media (max-width:632px)

Ce que dit une fenêtre avec un max-width de 632px que vous souhaitez appliquer ces styles. À cette taille, vous serait de parler à propos de quelque chose de plus petit qu'un écran de bureau dans la plupart des cas.

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

Celui-ci est dire pour un appareil avec un screen et une fenêtre avec max-width de 632px appliquer le style. C'est presque identique au précédent, sauf que vous spécifiez screen contrairement aux autres types de médias les plus courantes faisant l' print.

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

Voici une citation directement à partir de W3C pour expliquer celui-ci.

Le mot-clé "seulement" peut également être utilisé pour masquer les feuilles de style à partir d'anciens agents utilisateurs. Les agents utilisateurs doivent traiter des requêtes de média de départ avec "seulement" comme si " le seul mot-clé n'était pas présent.

Comme il n'existe pas de tel type de média que "seulement", la feuille de style doit être ignoré par les anciens navigateurs.

Voici le lien pour cette citation qui est montré dans l'exemple 9 sur cette page.

J'espère que cela jette une certaine lumière sur les media queries.

EDIT:

Assurez-vous de vérifier @hybrides excellente réponse sur la façon dont l' only mot-clé est vraiment manipulé.

Answer 2

Ce qui suit est: http://www.adobe.com/devnet/dreamweaver/articles/introducing-media-queries.html

---

Les requêtes de média spécification fournit également le mot-clé seulement, ce qui est destinée à cacher les requêtes de média à partir de navigateurs plus anciens. Comme pas, le mot-clé doit venir au début de la déclaration. Par exemple:

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

Les navigateurs qui ne reconnaissent pas les media queries s'attendre à une liste séparée par des virgules des types de médias, et la spécification dit qu'ils devraient tronquer chaque valeur immédiatement avant le premier caractère non alphanumérique qui n'est pas un trait d'union. Donc, un vieux navigateur doit interpréter l'exemple précédent comme ceci:

media="only"

Parce qu'il n'y a pas de tel type de support seulement , la feuille de style est ignoré. De même, un vieux navigateur doit interpréter

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

comme

media="screen"

En d'autres termes, il doit s'appliquer les règles de style pour tous les appareils à écran, même si elle ne sait pas ce que les médias requêtes veux dire.

Malheureusement, c'est à dire de 6 à 8 omis de mettre en œuvre la spécification correctement.

Au lieu d'appliquer les styles pour tous les appareils à écran, il ignore la feuille de style tout à fait.

En dépit de ce problème, il est toujours recommandé de préfixer les requêtes de média avec uniquement si vous souhaitez masquer les styles à partir d'autres, moins navigateurs les plus courants.

---

Ainsi, l'utilisation de

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

et

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

aura le même effet dans IE6-8, va empêcher les styles d'être utilisé, cependant, qu'ils seront toujours téléchargé.

Aussi, dans les navigateurs qui prennent en charge CSS3 media queries, dérange les versions de charger les styles si la fenêtre, la largeur est plus grande que 401px et le type de média est l'écran.

Je ne suis pas entièrement sûr de ce qui les navigateurs qui ne prennent pas en charge CSS3 media queries, aurait besoin de la "seulement" version

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

contrairement à la version ci-dessous

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

pour s'assurer qu'elle n'est pas interprétée comme

media="screen"

Ce serait un bon test pour quelqu'un ayant accès à un appareil de laboratoire.

Answer 3

De style pour de nombreux smartphones avec des écrans plus petits, vous pouvez écrire:

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

Pour bloquer les navigateurs plus anciens de voir un iPhone ou un téléphone Android feuille de style, vous pouvez écrire:

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

Lisez cet article pour plus d' http://webdesign.about.com/od/css3/a/css3-media-queries.htm

Answer 4

Réponse par @hybride est très instructif , sauf que je ne précise pas le but, comme mentionné par @ashitaka "Que si vous utilisez le Mobile Première approche? Donc, nous avons le mobile css d'abord et ensuite utiliser min-largeur de cibler plus grands sites. Nous ne devrions pas utiliser le seul mot-clé dans ce contexte, droite? "

Souhaitez ajouter ici que le but est simplement d'empêcher les non soutenir les navigateurs à utiliser que d'Autres périphériques de style, comme si elle commence à partir de "l'écran" sans qu'elle va le prendre pour écran où comme si elle commence à partir de "seulement" style sera ignoré.

Répondre à ashitaka, considérons cet exemple

<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)" />

Si nous n'utilisons pas de "seulement" il faudra encore travailler en tant que bureau de style sera également utilisé frappant android styles mais avec une surcharge inutile. Dans ce cas, SI un navigateur est non porteurs, il se replie sur la deuxième feuille de Style en ignorant la première.