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

Quelle est la différence entre screen et only screen 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 only screen? Ne screen pas en elle-même suffisamment d'informations pour être rendus seulement pour l'écran?

J'ai vu beaucoup de sites sensibles à l'aide de l'une de ces trois façons différentes:

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

@media (max-width:632px)

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

InformationsquelleAutor Jitendra Vyas | 2011-12-18

519

Examinons vos exemples un par un.
```
@media (max-width:632px)
```
Ce un soit disant pour 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)
```
Ce un soit disant 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 par opposition à la d'autres types de médias les plus courantes autres étant 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 la lien vers 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 le only mot-clé est vraiment manipulé.
- Pour quelqu'un qui était à la recherche pour une meilleure explication de pourquoi le only mot-clé permet de masquer les feuilles de style à partir des navigateurs plus anciens, voir la réponse de @hybride ci-dessous. Il l'explique très bien.
- hybride à réponse est bonne, mais j'aime cette réponse trop, car il répond à des requêtes de média à l'intérieur de CSS, par opposition à seulement aborder la media attribut de la link élément.
- ce périphérique ne dispose pas d'un écran?
- ceux qui n'en ont pas besoin. Mais sérieusement, les imprimantes et les lecteurs d'écran ne sont pas nécessairement les écrans. Plus rien d'autre à l'heure actuelle ou dans l'avenir qui ne s'identifient pas comme screen comme rien énumérées dans les autres types de médias.
- thx 🙂 ça me semble un peu redondant dans un monde où tout ce que nous vraiment faire est de concevoir pour les écrans. CSS n'existe que parce que nous avons des écrans 🙂
- CSS existe afin de créer une séparation des préoccupations entre le contenu et la présentation. La présentation couvre beaucoup plus que ce qui peut être vu sur un écran. C'est une distinction importante à garder à l'esprit, indépendamment de ce que vous pourriez être de conception.
InformationsquelleAutor Matthew Green
219

Ce qui suit est Adobe docs.

Les requêtes de média spécification fournit également le mot-clé only, qui est destinée à cacher les requêtes de média à partir de navigateurs plus anciens. Comme not, 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 devrait 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 devrait 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 devrait 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.

Donc, à l'aide de
```
media="only screen and (min-width: 401px)"
```
et
```
media="screen and (min-width: 401px)"
```
aura le même effet dans IE6-8: tant va empêcher les styles en cours d'utilisation. Ils seront, cependant, être toujours téléchargé.

Aussi, dans les navigateurs qui prennent en charge CSS3 media queries, les deux 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 only version
```
media="only screen and (min-width: 401px)" 
```
par opposition à
```
media="screen and (min-width: 401px)"
```
pour s'assurer qu'elle n'est pas interprétée comme
```
media="screen"
```
Il serait un bon test pour quelqu'un ayant accès à un appareil de laboratoire.
- Donc, si nous parlons des requêtes de média dans les fichiers CSS, nous pouvons baisse de "seulement", car les anciens navigateurs ne comprennent pas les requêtes de média que ce soit, ne Peut-on pas?
- Bon, très lucide réponse. Merci!
- Lien partagé a été vraiment utile. Merci
- Selon mon expérience, "seulement" fonctionne comme prévu sur Symbian OS (vieux Nokia téléphones tactiles). Je l'ai utilisé beaucoup car ces navigateurs était vraiment mauvais en CSS3, mais il était encore capable de gérer "seul" et "min/max-width" dans les requêtes de média de droite.
InformationsquelleAutor hybrid
40

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;) { … } 
```
Lire cet article pour plus http://webdesign.about.com/od/css3/a/css3-media-queries.htm
- Je ne suis pas encore très clair sur elle. J'ai mis à jour ma question trop. Pouvez-vous nous donner un exemple?
- 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 la only mot-clé dans ce contexte, droite?
- Cette réponse a été beaucoup facile à comprendre! 🙂 Le seul est juste pour garder les anciennes versions comme IE 6 ou opera 5 ou 6 de charger les données qui doit être présenté pour Android ou Chrome 30 ou IE 10..Exellent réponse sandeep 🙂 mérite un +1
InformationsquelleAutor sandeep
16

Réponse par @hybride est très instructif, sauf qu'il n'explique 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.

InformationsquelleAutor Diablo Geto
0
```
@media screen and (max-width:480px) { … } 
```
screen ici est de définir la taille de l'écran de la requête de média. E. g la largeur maximale de la zone d'affichage est 480px. C'est donc la spécification de l'écran, par opposition aux autres types de médias.
```
@media only screen and (max-width: 480px;) { … } 
```
only screen ici est utilisé pour prévenir les anciens navigateurs qui ne prennent pas en charge les requêtes des médias avec les caractéristiques des médias de l'application de la spécifié les styles.

InformationsquelleAutor itolima esther

Vous devez vous connecter pour publier un commentaire.