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

Media Queries wird verwendet, um responsives Webdesign zu erstellen. Sowohl die screen y only screen werden in Medienabfragen verwendet.

screen : Es wird verwendet, um die Bildschirmgröße der Medienabfrage festzulegen. Die Bildschirmgröße kann durch die Verwendung von max-width und min-width festgelegt werden.

screen für viele Smartphones mit kleineren Bildschirmen verwendet wird, könnten Sie schreiben:

@media screen and (max-width:630px){ ... }

In dem obigen Code screen bedeutet, dass Sie bei einer Bildschirm- und Fenstergröße mit einer maximalen Breite von 630 Pixel die genannten Stile anwenden möchten.

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

Um ältere Browser daran zu hindern, das Stylesheet zu sehen, müssen Sie schreiben:

@media only screen and (max-width:630px){ ... }

Mit dem Schlüsselwort 'only' werden Style Sheets vor älteren User Agents verborgen.