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

487

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)
Jitendra Vyas
quelle

Antworten:

543

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.

Matthew Green
quelle
24
Für alle, die nach einer besseren Erklärung suchen, warum das onlySchlüsselwort Stylesheets vor älteren Browsern verbirgt, lesen Sie die Antwort von @hybrid unten. Er erklärt es sehr gut.
JMTyler
1
Die Antwort von hybrid ist gut, aber ich mag diese Antwort auch, weil sie Medienabfragen innerhalb von CSS behandelt, anstatt nur das mediaAttribut des linkElements zu adressieren .
Chharvey
2
Welches Gerät hat keinen Bildschirm?
Kokodoko
3
@ Kokodoko diejenigen, die keine brauchen. Im Ernst, Drucker und Bildschirmleser haben nicht unbedingt Bildschirme. Plus alles andere, was derzeit oder in Zukunft nicht als screensolches identifiziert wird, wie etwas, das in den anderen Medientypen aufgeführt ist.
Matthew Green
1
@ Kokodoko CSS dient dazu, Bedenken zwischen Inhalt und Präsentation zu trennen. Die Präsentation umfasst viel mehr als nur das, was auf einem Bildschirm zu sehen ist. Es ist eine wichtige Unterscheidung, die Sie berücksichtigen sollten, unabhängig davon, wofür Sie entwerfen.
Matthew Green
231

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.

Hybrid
quelle
3
Wenn es sich also um Medienabfragen in CSS-Dateien handelt, können wir "nur" löschen, da ältere Browser Medienabfragen überhaupt nicht verstehen.
1234ru
Gute, sehr klare Antwort. Vielen Dank!
Alexander Suraphel
Link geteilt war wirklich hilfreich. Danke
Raphael
Nach meiner Erfahrung funktioniert "nur" unter Symbian OS (alten Nokia Touch-Handys) wie erwartet. Ich habe es oft benutzt, weil diese Browser in der CSS3-Unterstützung wirklich schlecht waren, aber es war immer noch in der Lage, "nur" und "min / max-width" in Medienabfragen richtig zu verarbeiten.
Peter Knut
@PeterKnut Warum unterstützen Sie überhaupt so alte Geräte? Wirklich neugierig.
Prometheus
41

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

Sandeep
quelle
3
Ich bin mir immer noch nicht ganz sicher. Ich habe auch meine Frage aktualisiert. Können Sie ein Beispiel geben?
Jitendra Vyas
4
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 das onlySchlüsselwort in diesem Zusammenhang nicht verwenden , oder?
Ashitaka
Diese Antwort war sehr leicht zu verstehen! :) Das einzige ist nur, um zu verhindern, dass ältere Versionen wie IE 6 oder Oper 5 oder 6 die Daten laden, die für Android oder Chrome 30 oder IE 10 präsentiert werden müssen. Ausgezeichnete Antwort sandeep :) verdient einen +1
Afzaal Ahmad Zeeshan
16

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.

Diablo Geto
quelle
1
@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.

itolima esther
quelle