Eine kurze Einführung in CSS3-Multimedia-Abfragen (Codebeispiel)

Der Inhalt dieses Artikels ist eine kurze Einführung (Codebeispiel) zur CSS3-Multimedia-Abfrage. Ich hoffe, dass er für Freunde hilfreich ist.

CSS2-Multimedia-Abfrage:

@media-Regeln werden in CSS2 eingeführt, und verschiedene Stilregeln können für verschiedene Medientypen (einschließlich Monitore, tragbare Geräte, Fernseher usw.) angepasst werden.

CSS3-Multimedia-Abfrage:

Die CSS3-Multimedia-Abfrage erbt alle Ideen der CSS2-Multimedia-Typen, ersetzt den Typ des Suchgeräts und die adaptive CSS3-Anzeige entsprechend den Einstellungen.

Multimedia-Abfragen können viele Dinge prüfen: Breite und Höhe des Ansichtsfensters, Breite und Höhe des Geräts, Ausrichtung, Auflösung.

Abfragesyntax:

@media  not|only|all    mediatype and (expressions){
　　　　css-sode;
　　}

nicht: bestimmte Gerätetypen ausschließen, nur: nur bestimmte Gerätetypen, alle: alle Geräte.

Kann unterschiedliche Stildateien auf verschiedenen Medien verwenden:

<link rel="stylesheet" media=" mediatype and|only|all (expressions)" href="print.css"/>

Medientyp:

alle Alle Medien

Drucker Drucker

Bildschirm Computer , Tablet, Mobiltelefon

Sprach-Screenreader

Medienfunktion:

Gerätebreite/-höhe: sichtbare Breite/Höhe des Gerätebildschirms

Höhe, Breite : die Höhe des sichtbaren Bereichs der Seite, Breite

max-device-width/height: die maximale sichtbare Breite und Höhe des Bildschirms.

CSS3-Multimedia-Abfragebeispiel:

Das obige ist der detaillierte Inhalt vonEine kurze Einführung in CSS3-Multimedia-Abfragen (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!