Was ist der Unterschied zwischen "Bildschirm" und "nur Bildschirm" bei Medienabfragen?

Was ist der Unterschied zwischen screenund only screenbei Medienabfragen?

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

Warum müssen wir verwenden only screen? Bietet screenselbst nicht genügend Informationen, um nur für den Bildschirm gerendert zu werden ?

Ich habe viele reaktionsfähige Websites gesehen, die eine dieser drei verschiedenen Methoden verwenden:

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

@media (max-width:632px)

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

Lassen Sie uns Ihre Beispiele einzeln aufschlüsseln.

@media (max-width:632px)

Dieser sagt für ein Fenster mit einer max-widthGröße von 632px, dass Sie diese Stile anwenden möchten. Bei dieser Größe würde man in den meisten Fällen von etwas sprechen, das kleiner als ein Desktop-Bildschirm ist.

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

Dieser sagt für ein Gerät mit einem screenund ein Fenster mit max-width632px den Stil anwenden. Dies ist fast identisch mit den oben genannten, außer dass Sie screenim Gegensatz zu den anderen verfügbaren Medientypen den am häufigsten verwendeten anderen angeben print.

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

Hier ist ein Zitat direkt von W3C, um dieses zu erklären.

Das Schlüsselwort "nur" kann auch verwendet werden, um Stylesheets vor älteren Benutzeragenten auszublenden. Benutzeragenten müssen Medienabfragen beginnend mit "nur" so verarbeiten, als ob das Schlüsselwort "nur" nicht vorhanden wäre.

Da es keinen Medientyp wie "nur" gibt, sollte das Stylesheet von älteren Browsern ignoriert werden.

Hier ist der Link zu diesem Zitat , das in Beispiel 9 auf dieser Seite gezeigt wird.

Hoffentlich wirft dies etwas Licht auf Medienanfragen.

BEARBEITEN:

Lesen Sie unbedingt die ausgezeichnete Antwort von @hybrids, wie das onlyKeyword wirklich behandelt wird.

Das Folgende stammt aus Adobe-Dokumenten .

Die Spezifikation für Medienabfragen enthält auch das Schlüsselwort only, mit dem Medienabfragen vor älteren Browsern ausgeblendet werden sollen. Wie notdas Schlüsselwort muss zu Beginn der Erklärung kommen. Zum Beispiel:

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

Browser, die keine Medienanfragen erwarten , eine durch Kommata getrennte Liste von Medientypen erkennen, und die Spezifikation sagt , sie sollten jeden Wert unmittelbar vor den ersten nonalphanumeric Zeichen abgeschnitten, der kein Bindestrich ist. Ein alter Browser sollte das vorstehende Beispiel also folgendermaßen interpretieren:

media="only"

Da es nicht nur einen Medientyp gibt, wird das Stylesheet ignoriert. In ähnlicher Weise ein alter Browser sollte interpretieren

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

wie

media="screen"

Mit anderen Worten, es sollte die Stilregeln auf alle Bildschirmgeräte anwenden, obwohl es nicht weiß, was die Medienabfragen bedeuten.

Leider konnte IE 6–8 die Spezifikation nicht korrekt implementieren.

Anstatt die Stile auf alle Bildschirmgeräte anzuwenden, wird das Stylesheet vollständig ignoriert.

Trotz dieses Verhaltens wird empfohlen, Medienabfragen nur dann voranzustellen, wenn Sie die Stile vor anderen, weniger verbreiteten Browsern verbergen möchten.

Also mit

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

und

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

hat in IE6-8 den gleichen Effekt: Beide verhindern, dass diese Stile verwendet werden. Sie werden jedoch weiterhin heruntergeladen.

In Browsern, die CSS3-Medienabfragen unterstützen, laden beide Versionen die Stile, wenn die Breite des Ansichtsfensters größer als 401pxund der Medientyp Bildschirm ist.

Ich bin nicht ganz sicher, welche Browser, die keine CSS3-Medienabfragen unterstützen, die onlyVersion benötigen würden

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

im Gegensatz zu

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

um sicherzustellen, dass es nicht als interpretiert wird

media="screen"

Es wäre ein guter Test für jemanden mit Zugang zu einem Gerätelabor.

Um für viele Smartphones mit kleineren Bildschirmen zu stylen, könnten Sie schreiben:

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

Um zu verhindern, dass ältere Browser ein Stylesheet für iPhone oder Android-Telefone sehen, können Sie Folgendes schreiben:

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

Lesen Sie diesen Artikel für weitere Informationen unter http://webdesign.about.com/od/css3/a/css3-media-queries.htm

Die Antwort von @hybrid ist recht informativ, außer dass sie den von @ashitaka erwähnten Zweck nicht erklärt. "Was ist, wenn Sie den Mobile First-Ansatz verwenden? Wir haben also zuerst das mobile CSS und verwenden dann die Mindestbreite, um größere Websites anzusprechen." Wir sollten in diesem Zusammenhang nicht das einzige Schlüsselwort verwenden, oder? "

Ich möchte hier hinzufügen, dass der Zweck einfach darin besteht, zu verhindern, dass nicht unterstützende Browser diesen anderen Gerätestil verwenden, als ob er vom "Bildschirm" ausgeht, ohne dass er für den Bildschirm verwendet wird, bei dem der Stil "nur" ignoriert wird.

Wenn Sie Ashitaka antworten, betrachten Sie dieses Beispiel

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

Wenn wir nicht "nur" verwenden, funktioniert es weiterhin, da der Desktop-Stil auch für auffällige Android-Stile verwendet wird, jedoch mit unnötigem Overhead. In diesem Fall wird ein Browser, der ihn nicht unterstützt, auf das zweite Stylesheet zurückgreifen und das erste ignorieren.

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

screenHier legen Sie die Bildschirmgröße der Medienabfrage fest. Beispielsweise beträgt die maximale Breite des Anzeigebereichs 480 Pixel. Es wird also der Bildschirm im Gegensatz zu den anderen verfügbaren Medientypen angegeben.

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

only screen Hier wird verhindert, dass ältere Browser, die Medienabfragen mit Medienfunktionen nicht unterstützen, die angegebenen Stile anwenden.