Lassen Sie uns Ihre Beispiele einzeln aufschlüsseln.
@media (max-width:632px)
Dieser sagt für ein Fenster mit einer max-width
Größ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 screen
und ein Fenster mit max-width
632px den Stil anwenden. Dies ist fast identisch mit den oben genannten, außer dass Sie screen
im 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 only
Keyword wirklich behandelt wird.
only
Schlüsselwort Stylesheets vor älteren Browsern verbirgt, lesen Sie die Antwort von @hybrid unten. Er erklärt es sehr gut.media
Attribut deslink
Elements zu adressieren .screen
solches identifiziert wird, wie etwas, das in den anderen Medientypen aufgeführt ist.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. Wienot
das Schlüsselwort muss zu Beginn der Erklärung kommen. Zum Beispiel: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:
Da es nicht nur einen Medientyp gibt, wird das Stylesheet ignoriert. In ähnlicher Weise ein alter Browser sollte interpretieren
wie
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
und
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
401px
und der Medientyp Bildschirm ist.Ich bin nicht ganz sicher, welche Browser, die keine CSS3-Medienabfragen unterstützen, die
only
Version benötigen würdenim Gegensatz zu
um sicherzustellen, dass es nicht als interpretiert wird
Es wäre ein guter Test für jemanden mit Zugang zu einem Gerätelabor.
quelle
Um für viele Smartphones mit kleineren Bildschirmen zu stylen, könnten Sie schreiben:
Um zu verhindern, dass ältere Browser ein Stylesheet für iPhone oder Android-Telefone sehen, können Sie Folgendes schreiben:
Lesen Sie diesen Artikel für weitere Informationen unter http://webdesign.about.com/od/css3/a/css3-media-queries.htm
quelle
only
Schlüsselwort in diesem Zusammenhang nicht verwenden , oder?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
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.
quelle
screen
Hier 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.only screen
Hier wird verhindert, dass ältere Browser, die Medienabfragen mit Medienfunktionen nicht unterstützen, die angegebenen Stile anwenden.quelle