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

Beispiel für die Implementierung der Drittanbieter-Autorisierungsmethode von GitHub in Vue

Inhaltsverzeichnis Erstellen von OAuth-Apps Holen...

Lösung für das Versagen von Docker beim Freigeben von Ports

Heute bin ich auf eine sehr seltsame Situation ge...

So speichern Sie Text und Bilder in MySQL

Große Textdatentypen in Oracle Clob-Langtexttyp (...

Implementierung der Docker-Bereitstellung von Django+Mysql+Redis+Gunicorn+Nginx

I. Einleitung Die Docker-Technologie erfreut sich...

Methode der Douban-Website zum Vornehmen kleiner Änderungen am Website-Inhalt

<br />Das Lesen ist ein sehr wichtiger Teil ...

So stellen Sie nginx mit Docker bereit und ändern die Konfigurationsdatei

Nginx mit Docker bereitstellen, so einfach ist da...

MySQL Online-DDL-Tool Gh-Ost-Prinzipanalyse

Inhaltsverzeichnis 1. Einleitung 1.1 Grundsatz 1....

Zusammenfassung der Erfahrungen mit der Entwicklung von HTML+CSS-Projekten (empfohlen)

Ich habe mein Blog seit mehreren Tagen nicht aktu...

Erweiterte Erklärung der Javascript-Funktionen

Inhaltsverzeichnis Funktionsdefinitionsmethode Fu...

Lassen Sie uns über die beiden Funktionen von try catch in Javascript sprechen

Das Programm wird sequentiell von oben nach unten...

Zwei praktische Möglichkeiten zum Aktivieren des Proxys in React

Zwei Möglichkeiten zum Aktivieren des Proxy React...

Flexibles Boxmodell von CSS und CSS3 zur Anpassung der Elementbreite (-höhe)

1. CSS realisiert eine feste Breite links und ein...

Implementierung der One-Click-Verpackung und -Veröffentlichung von Vue-Projekten mit Jenkins

Inhaltsverzeichnis Jenkins-Installation Installie...

js-Datentypen und Beispiele für ihre Beurteilungsmethoden

js-Datentypen Grundlegende Datentypen: Zahl, Zeic...

So ändern Sie das Root-Passwort von Mysql5.7.10 auf dem MAC

Starten Sie MySQL zunächst im Skip-Grant-Tables-M...