it-swarm.com.de

Was ist der Unterschied zwischen "Bildschirm" und "Nur Bildschirm" in Medienabfragen?

Was ist der Unterschied zwischen screen und only screen in 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 only screen verwenden? Bietet screen selbst nicht genügend Informationen, um gerendert zu werden nur für den Bildschirm?

Ich habe viele reaktionsschnelle Websites gesehen, die eine der drei folgenden Methoden verwenden:

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

Lassen Sie uns Ihre Beispiele einzeln aufschlüsseln.

@media (max-width:632px)

In diesem Beispiel wird für ein Fenster mit einem max-width von 632px angegeben, dass Sie diese Stile anwenden möchten. Bei dieser Größe würden Sie in den meisten Fällen über alles sprechen, was kleiner als ein Desktop-Bildschirm ist.

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

Dies sagt man für ein Gerät mit einem screen und einem Fenster mit max-width von 632px, das den Stil anwendet. Dies ist fast identisch mit dem obigen, außer dass Sie screen angeben, im Gegensatz zu andere verfügbare Medientypen der am häufigsten verwendete andere ist print.

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

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

Das Schlüsselwort "only" kann auch verwendet werden, um Stylesheets vor älteren Benutzerprogrammen auszublenden. Benutzerprogramme müssen Medienabfragen verarbeiten, die mit "only" beginnen, als ob das Schlüsselwort "only" nicht vorhanden wäre.

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

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

Hoffentlich gibt dies Aufschluss über Medienfragen.

BEARBEITEN:

Lesen Sie unbedingt @ hybrids excellent answer , wie das Schlüsselwort only wirklich behandelt wird.

512
Matthew Green

Folgendes stammt aus Adobe-Dokumenten .


Die Spezifikation für Medienabfragen enthält auch das Schlüsselwort only, mit dem Medienabfragen vor älteren Browsern verborgen werden sollen. Wie not muss das Schlüsselwort am Anfang der Deklaration stehen. Zum Beispiel:

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

Browser, die Medienabfragen nicht erkennen, erwarten eine durch Kommas getrennte Liste von Medientypen, und die Spezifikation besagt, dass sie jeden Wert unmittelbar vor dem ersten nicht-alphanumerischen Wert abschneiden sollen Zeichen, das kein Bindestrich ist. Ein alter Browser sollte das vorhergehende Beispiel folgendermaßen interpretieren :

media="only"

Da es nicht nur einen Medientyp gibt, wird das Stylesheet ignoriert. Ebenso sollte ein alter Browser 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, auch wenn 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 insgesamt ignoriert.

Trotz dieses Verhaltens wird weiterhin empfohlen, Medienabfragen nur dann ein Präfix zuzuweisen, 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)"

wird den gleichen Effekt in IE6-8 haben: 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 401px ist und der Medientyp Bildschirm ist.

Ich bin mir nicht ganz sicher, welche Browser, die keine CSS3-Medienabfragen unterstützen, die only -Version benötigen

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.

214
hybrid

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

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

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

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

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

40
sandeep

Die Antwort von @hybrid ist sehr informativ, es sei denn, es erklärt nicht den von @ashitaka erwähnten Zweck. "Was ist, wenn Sie den Mobile First-Ansatz verwenden? Also haben wir zuerst das mobile CSS und verwenden dann die minimale Breite, um größere Websites zu erreichen. Wir sollten in diesem Zusammenhang nicht das einzige Schlüsselwort verwenden, oder? "

Fügen Sie hier hinzu, dass der Zweck einfach darin besteht, nicht unterstützende Browser daran zu hindern, diesen anderen Gerätestil zu verwenden, als würde er von "Bildschirm" ausgehen, ohne dass er für den Bildschirm verwendet wird, wo er ignoriert wird, als würde er von "nur" Stil ausgehen.

Wenn Sie auf 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 immer noch, da der Desktop-Stil auch auffällige Android -Stile verwendet wird, jedoch mit unnötigem Overhead. In diesem Fall greift ein nicht unterstützter Browser auf das zweite Stylesheet zurück und ignoriert das erste.

16
Diablo Geto