Verwenden Sie unser CSS3, um ein responsives Layout zu implementieren

Nur ​​eine flexible Box zu haben reicht nicht aus
CSS3 erweitert auch das Medienattribut und fügt hinzu Eine Modulfunktion Medienabfragen
MedienabfragenFunktion

Immer mehr Benutzer nutzen Smartphones. Tablets usw.
Alles unter Berücksichtigung der Bedürfnisse der Benutzer
Wir müssen sicherstellen, dass Benutzer beim Surfen auf der Seite auf verschiedenen Geräten ein gutes Erlebnis haben
Auf diese Weise benötigen wir Medienabfragen
Es ermöglicht uns Unterschiedliche Geräte oder Geräte mit unterschiedlichen Bedingungen haben unterschiedliche Stile
Wenn das mobile Endgerät jedoch sehr wichtige Anforderungen hat
es ist besser, eine spezielle Seite für das mobile Endgerät zu entwickeln
Werfen wir einen Blick auf die Einführung der Medienabfragemethode

So wird es in CSS2 gemacht
Verwenden Sie zur Einführung das Link-Tag und das Medienattribut verschiedene Stylesheets (Wenn die Bedingungen erfüllt sind)

<link rel="stylesheet" media="screen and (max-width: 600px)" href="demo.css" />

Eines ist
Medientyp (Medientyp) und der Bildschirm hier Eins ist
Medieneigenschaften (Medienabfrage), die maximale Breite hier: 600px

Tatsächlich kann Medienabfrage als Medien betrachtet werden Typ (Beurteilungsbedingung) + CSS (konform mit den Regeln für den bedingten Stil)

Wenn das Medienmedium ein Bildschirmtyp ist und die Fensterbreite ≤ 600 Pixel beträgt, führen Sie demo.css ein Stildatei

Im Vergleich zu Links können Seitenanfragen reduziert werden und hat bessere Ergebnisse

@media screen and (max-width: 600px) {    .demo1 {        ......
    }
    .demo2 {
        ......
    }
}

Die einzigen zwei häufig verwendeten sind Das obige
@import kann auch Medienabfragen verwenden

@import url(demo.css) screen;

angeben möchten, verwenden Sie einfach das und-Schlüsselwort
Bei der Spezifikation des Medieneigenschaftenteils müssen Klammern verwendet werden.

media="screen and (min-width: 601px) and (max-width: 800px)"

media="screen and (min-width: 601px), print and (min-width: 6in)"

Wir müssen das Schlüsselwort nicht am Anfang der Medienerklärung verwenden.
Beachten Sie, dass es nicht separat vor einer einzelnen Bedingung deklariert werden kann, da dies nicht die gesamte Medienerklärung negiert.

media="not screen and (min-width: 600px) and (max-width: 800px)"

, das dem Ausblenden von Medienabfragen in frühen Browsern
ähnelt nicht und muss am Anfang der Mediendeklarationserklärung
wie dieser Erklärung angegeben werden

media="screen and (min-width: 601px) and (max-width: 800px)"

media="screen"Da es Medieneigenschaften nicht versteht , werden Stilregeln auf alle Bildschirmgeräte angewendet
, aber mit dem einzigen Schlüsselwort

media="only screen and (min-width: 601px) and (max-width: 800px)"

media="only", aber der einzige Medientyp existiert nicht, also existiert er nicht wendet keine Stile an
Funktion zum Ausblenden von Medienabfragen aus früheren Browsern implementiert

Die am häufigsten verwendeten sind
alle, Bildschirm und Druck

Medienfunktionen

Es gibt viele Medienfunktionen, und viele davon werden nicht verwendet

Achten Sie darauf, zwischen Gerätebreite/-höhe und Breite/Höhe zu unterscheiden
Gerätebreite/-höhe ist die Breite des Geräts (nicht die Breite des Browsers)
Breite/Höhe ist die Größe unseres Browserfensters
Verwenden Sie DokumentElement.clientWidth/ clientHeight, das ist derWert des Ansichtsfensters

Das obige ist der detaillierte Inhalt vonDetaillierte Einführung in CSS3-Medienabfragen für responsives Layout. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!