Zusammenfassung der grundlegenden Verwendung von CSS3 @media

Zusammenfassung der grundlegenden Verwendung von CSS3 @media 
//Grammatik:
@media Medientyp und | nicht | nur (Medienfunktion) { CSS-Code; }
//Sie können auch unterschiedliche Stylesheets für unterschiedliche Medien verwenden: 
<link rel="stylesheet" media="Medientyp und|nicht|nur (Medienfunktion)" href="mystylesheet.css">

1. Zuerst kommt das <meta>-Tag

<meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0, Maximalmaßstab=1.0, Benutzerskalierung=nein">

Einige Parameter dieses Codes werden erklärt:

  • width = Gerätebreite: Die Breite entspricht der Breite des aktuellen Gerätes
  • initial-scale: Der anfängliche Maßstab (die Standardeinstellung ist 1,0)
  • minimum-scale: Der Mindestmaßstab, bis zu dem der Benutzer zoomen darf (Standardeinstellung ist 1,0)
  • maximum-scale: Der maximale Maßstab, bis zu dem der Benutzer zoomen darf (Standardeinstellung ist 1,0)
  • user-scalable: Ob der Benutzer manuell hinein- und herauszoomen kann (die Standardeinstellung ist „nein“, da wir nicht möchten, dass Benutzer die Seite vergrößern und verkleinern)

2. Eingeführt im <head>-Tag (CSS2-Medien)

Tatsächlich ist CSS3 nicht das einzige, das die Verwendung von Medien unterstützt. CSS2 unterstützt Medien bereits. Die spezifische Verwendung besteht darin, den folgenden Code in das Head-Tag der HTML-Seite einzufügen:

Wenn wir beispielsweise wissen möchten, ob das aktuelle Mobilgerät über ein vertikales Display verfügt, können wir schreiben:

<link rel="stylesheet" type="text/css" media="Bildschirm und (Ausrichtung: Hochformat)" ;href="style.css">

Wenn die Seitenbreite weniger als 960 beträgt, wird die angegebene Stildatei ausgeführt:

<link rel="stylesheet" type="text/css" media="Bildschirm und (max-width:960px)" href="style.css">

Da CSS2 diesen Effekt von CSS erzielen kann, warum sollte man diese Methode nicht verwenden? Viele Leute fragen sich vielleicht, aber der größte Nachteil der obigen Methode besteht darin, dass dadurch die Anzahl der HTTP-Anfragen für die Seite erhöht und die Seite belastet wird. Für uns ist es die beste Möglichkeit, CSS3 zu verwenden, um alle Stile in einer Datei zu schreiben.

So entstehen Konflikte:

<link rel="stylesheet" href="styleA.css" media="Bildschirm und (Mindestbreite: 800px)">  
<link rel="stylesheet" href="styleB.css" media="Bildschirm und (min. Breite: 600px) und (max. Breite: 800px)">  
<link rel="stylesheet" href="styleC.css" media="Bildschirm und (maximale Breite: 600px)">

Das Obige unterteilt das Gerät in drei Typen: Wenn die Breite größer als 800 Pixel ist, wird Stil A angewendet, wenn die Breite zwischen 600 und 800 Pixel liegt, wird Stil B angewendet und wenn die Breite kleiner als 600 Pixel ist, wird Stil C angewendet. Welcher Stil sollte also angewendet werden, wenn die Breite genau 800 Pixel beträgt? Es handelt sich um Stil B, da die ersten beiden Ausdrücke beide wahr sind und gemäß der CSS-Standardprioritätsregel letzterer ersteren überschreibt.

Um Konflikte zu vermeiden, sollte dieses Beispiel daher normalerweise wie folgt geschrieben werden:

<link rel="stylesheet" href="styleA.css" media="Bildschirm">  
<link rel="stylesheet" href="styleB.css" media="Bildschirm und (maximale Breite: 800px)">  
<link rel="stylesheet" href="styleC.css" media="Bildschirm und (maximale Breite: 600px)">

3. Zurück zu CSS3 @media

Wir haben oben kurz über die Verwendung von CSS2-Medienabfragen gesprochen. Kommen wir nun zurück zu den CSS3-Medienabfragen. Im ersten Code habe ich die Schreibmethode für Größen unter 960 Pixel verwendet. Lassen Sie uns nun den Code mit 960 Pixeln implementieren. Der folgende Code muss in das Style-Tag oder die CSS-Datei geschrieben werden:

@media screen und (max-device-width:960px) {
    Körper{Hintergrund:rot;}
}

Dann gibt es den Code, wenn die Browsergröße größer als 960px ist:

@media screen und (min-width:960px) { 
    Körper{Hintergrund:orange;}
}

Wir können die oben genannten Verwendungen auch mischen:

@media screen und (min-width:960px) und (max-width:1200px) {
    Körper{Hintergrund:gelb;}
}

Der obige Code bedeutet, dass das folgende CSS ausgeführt wird, wenn die Seitenbreite größer als 960 Pixel und kleiner als 1200 Pixel ist.

4. Übersicht aller Medienparameter

Oben sind die drei Funktionen der Medienabfrage, die wir am häufigsten verwenden müssen, nämlich größer als, gleich und kleiner als. Die volle Funktionalität des Media Query Tools umfasst definitiv mehr als nur diese drei Funktionen. Hier ist eine Zusammenfassung einiger seiner Parameterverwendungen:

  • Breite: im Browser sichtbare Breite.
  • Höhe: Im Browser sichtbare Höhe.
  • Gerätebreite: Die Breite des Gerätebildschirms.
  • Gerätehöhe: Die Höhe des Gerätebildschirms.
  • Ausrichtung: Erkennt, ob sich das Gerät aktuell im Quer- oder Hochformat befindet.
  • Seitenverhältnis: Erkennt das Verhältnis der sichtbaren Breite und Höhe des Browsers. (Beispiel: aspect-ratio:16/9)
  • device-aspect-ratio: Erkennt das Verhältnis von Breite und Höhe des Geräts.
  • Farbe: Die Anzahl der Bits zur Erkennung der Farbe. (Beispielsweise erkennt min-color:32, ob das Gerät über 32-Bit-Farbe verfügt.)
  • Farbindex: Überprüft die Farbe in der Farbindextabelle des Geräts. Der Wert darf nicht negativ sein.
  • Monochrom: Überprüft die Anzahl der Bits pro Pixel im monochromen Frame-Puffer. (Das ist zu fortgeschritten, ich schätze, wir werden es selten verwenden)
  • Auflösung: Ermitteln Sie die Auflösung des Bildschirms oder Druckers. (Zum Beispiel: min-resolution:300dpi oder min-resolution:118dpcm).
  • Raster: Erkennen Sie, ob es sich bei dem Ausgabegerät um ein Raster oder ein Bitmap-Gerät handelt.
(maximale Breite: 599 Pixel) 
(Mindestbreite: 600 Pixel) 
(Ausrichtung: Hochformat) vertikaler Bildschirm (Ausrichtung: Querformat) horizontaler Bildschirm (-webkit-min-device-pixel-ratio: 2) Pixelverhältnis

5. Medientyp

1.alle alle Medien

2. Braille-Tastgerät

3. Geprägter Braille-Drucker

4.Handheld-Gerät drucken

5.Projektion Druckvorschau

6.Bildschirm Farbbildschirm Ausrüstung

7. Sprache „auditive“ ähnliche Medientypen

8.tty ist nicht für Pixel-Geräte geeignet

9. Fernseher

6. Schlüsselwörter

1.und

2.not Das Schlüsselwort not wird verwendet, um einen bestimmten Medientyp auszuschließen.

3. Only only wird verwendet, um einen bestimmten Medientyp zu definieren

- Wird oft für Geräte verwendet, die keine Medienfunktionen unterstützen, aber Medientypen unterstützen

7. Browser-Unterstützung

IE8-

IE9+

Chrome 5+

Oper 10+

Firefox 3.6+<

Safari 4+

8. Einige häufig verwendete Einstellungen für die Bildschirmbreite:

@media screen und (min-width: 1200px) {
        CSS-Code;
}
@media screen und (min-width: 960px) und (max-width: 1199px) {
        CSS-Code;
}
@media screen und (min-width: 768px) und (max-width: 959px) {
        CSS-Code;
}
@media screen und (min-width: 480px) und (max-width: 767px) {
        CSS-Code;
}
@media screen und (max-width: 479px) {
        CSS-Code;
}

Zusammenfassen

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, dass der Inhalt dieses Artikels einen gewissen Lernwert für Ihr Studium oder Ihre Arbeit hat. Vielen Dank für Ihre Unterstützung von 123WORDPRESS.COM.

<<:  Das Bildelement img hat in IE6 zusätzlichen Leerraum

>>:  So packen Sie das Projekt per Idee in Docker

Artikel empfehlen

Praxis der mehrschichtigen verschachtelten Anzeige von Elementtabellen

Es wird eine Liste mit mehreren Bestellungen benö...

Das Balkendiagramm von Vue + Echart realisiert Statistiken zu Epidemiedaten

Inhaltsverzeichnis 1. Installieren Sie zuerst ech...

Linux: Fünf-Schritte-Kernel-Build-Baum

Inhaltsverzeichnis 0. Der mit dem System geliefer...

Tipps zur HTML-Formatierung und langen Dateien für das Webdesign

<br />Verwandte Artikel: 9 praktische Vorsch...

Docker generiert Bilder über Container und übermittelt DockerCommit im Detail

Inhaltsverzeichnis Nachdem Sie einen Container lo...

Installationshandbuch für VMware Workstation 15 Pro (für Anfänger)

01. VMware Workstation Pro 15 herunterladen Herun...

So erstellen und implementieren Sie ein Node-Projekt mit Docker

Inhaltsverzeichnis Was ist Docker Clientseitiger ...

Detaillierte Schritte zur Installation von MYSQL8.0 auf CentOS7.6

1. Im Allgemeinen ist MariaDB in CentOS standardm...

Element mit Auswahltabelle zum Ändern des Kontrollkästchens in der Kopfzeile in Textimplementierungscode

Methode 1: Verwenden Sie Tabellenattribute: Heade...

Grafische Anweisungen zum Hoch- und Herunterladen von Dateien auf einen Remote-Linux-Host basierend auf SecureCRT

Manchmal ist das Herunterladen großer Netzwerkdat...

Lösung für das Problem, dass Docker-Protokolle nicht abgerufen werden können

Als ich den Dienst täglich überprüfte und mir die...

So aktualisieren Sie die Knotenversion unter CentOs manuell

1. Suchen Sie das entsprechende NodeJS-Paket unte...

Basierend auf den neuen Funktionen von JavaScript ES: Schlüsselwörter let und const

Inhaltsverzeichnis 1. let-Schlüsselwort 1.1 Grund...

Binäre Installation von MySQL 5.7.23 unter CentOS7

Die Installationsinformationen im Internet sind u...

JavaScript zum Implementieren einer einfachen Tab-Leiste zum Wechseln der Inhaltsleiste

In diesem Artikel wird der spezifische JavaScript...