Was ist der Unterschied zwischen "screen" und "only screen" in Media-Queries?

Question

Was ist der Unterschied zwischen screen y 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 sind wir verpflichtet, die only screen ? Hat screen selbst nicht genügend Informationen liefern, um eine Bewertung vorzunehmen nur für den Bildschirm?

Ich habe schon viele responsive Websites gesehen, die eine dieser drei verschiedenen Möglichkeiten nutzen:

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

@media (max-width:632px)

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

Answer 1

Lassen Sie uns Ihre Beispiele einzeln aufschlüsseln.

@media (max-width:632px)

Dieser steht für ein Fenster mit einer max-width von 632px, auf die Sie diese Stile anwenden möchten. Bei dieser Größe würden Sie über etwas kleiner als ein Desktop-Bildschirm in den meisten Fällen zu sprechen.

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

Das heißt für ein Gerät mit einer screen und ein Fenster mit max-width von 632px den Stil anwenden. Dies ist fast identisch mit dem oben genannten, außer Sie geben an screen im Gegensatz zu den andere verfügbare Medientypen die häufigste andere ist print .

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

Hier ist ein Zitat direkt vom W3C, um dies zu erklären.

Das Schlüsselwort "only" kann auch verwendet werden, um Style Sheets vor älteren User Agents zu verbergen. User Agents müssen Media Queries, die mit "only" beginnen, so verarbeiten, als ob das Schlüsselwort "only" nicht vorhanden wäre.

Da es den Medientyp "only" nicht gibt, sollte die Formatvorlage von älteren Browsern ignoriert werden.

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

Ich hoffe, dass dies etwas Licht auf die Medienabfragen wirft.

EDIT。

Schauen Sie unbedingt nach @hybrids ausgezeichnete Antwort darüber, wie die only Schlüsselwort wirklich behandelt wird.

Answer 2

Das Folgende stammt aus Adobe-Dokumente .

---

Die Spezifikation der Medienabfragen enthält auch das Schlüsselwort only die dazu dient, Medienabfragen vor älteren Browsern zu verbergen. 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 Media Queries nicht erkennen, erwarten eine kommagetrennte Liste von Medientypen, und die Spezifikation sagt, dass sie debe jeden Wert unmittelbar vor dem ersten nicht alphanumerischen Zeichen, das kein Bindestrich ist, abschneiden. Also, ein alter Browser debe interpretieren Sie das vorangegangene Beispiel so:

media="only"

Da es den Medientyp only nicht gibt, wird das Stylesheet ignoriert. Ähnlich verhält es sich bei einem alten Browser debe dolmetschen

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

als

media="screen"

Mit anderen Worten, es sollte die Stilregeln auf alle Bildschirmgeräte anwenden, auch wenn es nicht weiß, was die Media-Queries bedeuten.

Leider hat der IE 6-8 die Spezifikation nicht korrekt umgesetzt.

Anstatt die Stile auf alle Bildschirmgeräte anzuwenden, wird die Stilvorlage völlig ignoriert.

Trotz dieses Verhaltens ist es immer noch empfehlenswert, media queries mit only voranzustellen, wenn Sie die Stile vor anderen, weniger verbreiteten Browsern verbergen wollen.

---

Also, mit

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

et

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

hat im IE6-8 die gleiche Wirkung: Beide verhindern die Verwendung dieser Stile. Sie werden jedoch weiterhin heruntergeladen.

Außerdem werden in Browsern, die CSS3-Medienabfragen unterstützen, beide Versionen die Stile laden, wenn die Breite des Ansichtsfensters größer ist als 401px und der Medientyp ist Bildschirm.

Ich bin mir nicht ganz sicher, welche Browser, die CSS3-Media-Queries nicht unterstützen, die only Version

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

im Gegensatz zu

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

um sicherzugehen, dass es nicht interpretiert wird als

media="screen"

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

Answer 3

Für viele Smartphones mit kleineren Bildschirmen könnten Sie schreiben:

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

Um ältere Browser daran zu hindern, ein Stylesheet für ein iPhone oder Android-Telefon zu sehen, könnten Sie 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

Answer 4

Die Antwort von @hybrid ist recht informativ, erklärt aber nicht den von @ashitaka erwähnten Zweck: "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, richtig? "

Möchten Sie hier hinzufügen, dass der Zweck ist einfach zu verhindern, dass nicht unterstützende Browser zu verwenden, dass andere Gerät Stil als wenn es beginnt von "Bildschirm" ohne es wird es für einen Bildschirm, während, wenn es beginnt von "nur" Stil wird ignoriert werden.

Als Antwort auf ashitaka 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, wird es immer noch funktionieren, wie Desktop-Stil wird auch verwendet werden, markante Android-Stile, aber mit unnötigen Overhead. In diesem Fall, wenn ein Browser nicht unterstützt wird es Fallback auf die zweite Style-Sheet ignorieren die erste.

Answer 5

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

screen Hier wird die Bildschirmgröße der Medienabfrage festgelegt. Z.B. ist die maximale Breite des Anzeigebereichs 480px. Es wird also der Bildschirm im Gegensatz zu den anderen verfügbaren Medientypen angegeben.

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

only screen wird hier verwendet, um zu verhindern, dass ältere Browser, die Media-Queries mit Media-Features nicht unterstützen, die angegebenen Stile anwenden.