Mit der rasanten Beliebtheit mobiler Geräte verwenden Benutzer nicht mehr nur herkömmliche Computer zum Durchsuchen von Webinhalten. Immer mehr Benutzer beginnen, Smartphones, Tablets oder andere Geräte unterschiedlicher Größe zum Durchsuchen von Webinhalten zu verwenden, um die Nutzung von If sicherzustellen Benutzer verschiedener Geräte können eine gute Erfahrung machen, sie müssen Medienabfragen verwenden.
Die Medienabfrage ist eine der wichtigsten Funktionen von CSS-Stylesheets. Die sogenannte Medienabfrage bezieht sich auf die Unterscheidung verschiedener Geräte (z. B. Computer, Mobiltelefone, Tablets, Braille-Geräte usw.) anhand verschiedener Medientypen (Gerätetypen). und Bedingungen. Und definieren Sie jeweils unterschiedliche CSS-Stile. Durch Medienabfragen kann CSS genauer auf verschiedene Geräte oder unterschiedliche Bedingungen auf demselben Gerät reagieren, sodass alle Benutzer eine gute Benutzererfahrung erhalten.
1. Medientyp
Medientypen werden zur Darstellung von Gerätekategorien verwendet. CSS stellt einige Schlüsselwörter zur Darstellung verschiedener Medientypen bereit, wie in der folgenden Tabelle dargestellt:
2. Medieneigenschaften
Zusätzlich zu bestimmten Typen können bestimmte Eigenschaften des Geräts auch durch einige Attribute wie Breite, Höhe, Auflösung usw. beschrieben werden, wie in der folgenden Tabelle dargestellt:
3. Logische Operatoren
Zu den logischen Operatoren gehören nicht, und nur. Komplexe Medienabfragen können durch logische Operatoren erstellt werden. Sie können auch mehrere Medienabfragen durch Kommas trennen und in einer Regel zusammenfassen.
und: Wird verwendet, um mehrere Medienabfragen in einer Medienabfrage zu kombinieren. Wenn jede Abfrageregel wahr ist, ist die Medienabfrage wahr. Darüber hinaus kann der Operator „und“ auch Medienmerkmale und Medientypen kombinieren.
nicht: Wird zum Negieren von Medienabfragen verwendet. Wenn die Abfrageregel nicht wahr ist, wird „true“ zurückgegeben, andernfalls wird „false“ zurückgegeben. Bei Verwendung des Not-Operators muss auch der Medientyp angegeben werden;
only: wird nur wirksam, wenn die gesamte Abfrage übereinstimmt. Wenn only nicht verwendet wird, interpretieren ältere Browser einfach screen und (max-width: 500px) als screen, ignorieren den Rest der Abfrage und wenden den Stil auf alle screens an. Wenn Sie den einzigen Operator verwenden, müssen Sie auch den Medientyp angeben.
4. Definieren Sie Medienabfragen
Derzeit können Sie Medienabfragen auf zwei Arten definieren:
Verwenden Sie @media- oder @import-Regeln, um den entsprechenden Gerätetyp im Stylesheet anzugeben;
Verwenden Sie das Medienattribut, um einen bestimmten Gerätetyp in einem <style>, <link>, <source> oder einem anderen HTML-Element anzugeben.
(1)@media
Wir haben uns @media im Abschnitt „CSS @Rules“ kurz angesehen. Mit @media können Sie eine Reihe von Medienabfragen und einen CSS-Stilblock angeben. Genau dann, wenn die Medienabfrage mit dem verwendeten Gerät, dem angegebenen CSS-Stil, übereinstimmt wird auf das Dokument angewendet. Der Beispielcode lautet wie folgt:
/*Auf Bildschirmen mit weniger als oder gleich 992 Pixeln setzen Sie die Hintergrundfarbe auf Blau*/@mediascreenand(max-width:992px){body{background-color:blue;}}/*Auf Bildschirmen mit 600 Pixeln oder weniger Auf dem screen, setze die Hintergrundfarbe auf olive */@mediascreenand(max-width:600px){body{background-color:olive;}}(2) @import
@import wird verwendet, um eine angegebene externe Stildatei zu importieren und den Zielmedientyp anzugeben. Der Beispielcode lautet wie folgt:
@importurl(css/screen.css)screen;/*Einführung externer Stile, dieser Stil wird nur auf Computermonitore angewendet*/@importurl(css/print.css)print;/*Einführung externer Stile, dieser Stil wird nur angewendet angewendet auf Druckgerät*/body{background:#f5f5f5;line-height:1.2;}Hinweis: Alle @import-Anweisungen müssen am Anfang des Stylesheets stehen und im Stylesheet definierte Stile überschreiben widersprüchliche Stile in importierten externen Stylesheets.
(3) Medienattribut
Sie können Medienabfragen auch in den Medienattributen <style>, <link>, <source> und anderen Tags definieren. Der Beispielcode lautet wie folgt:
/*Wenden Sie diesen Stil an, wenn die Seitenbreite größer oder gleich 900 Pixel ist.*/<linkrel=stylesheetmedia=screenand(min-width:900px)href=widescreen.css>/*Wenden Sie diesen Stil an, wenn die Seitenbreite kleiner als ist oder gleich 600 Pixel*/< linkrel=stylesheetmedia=screenand(max-width:600px)href=smallscreen.css>
Tipp: Sie können im Medienattribut auch mehrere Medientypen angeben und die einzelnen Medientypen durch Kommas trennen, z. B. media=screen, print.