Detaillierte Einführung in Medientypen von CSS-Attributen

Vorwort:

Eines der wichtigsten Merkmale eines Stylesheets ist, dass es auf einer Vielzahl von Medien wie Seiten, Bildschirmen und elektronischen Synthesizern verwendet werden kann , usw. Bestimmte Eigenschaften können nur auf bestimmten Medien funktionieren. Beispielsweise funktioniert die Eigenschaft „Schriftgröße“ nur auf scrollbaren Medientypen (Bildschirm).

Die Deklaration eines Medienattributs kann mit @import oder @media eingeführt werden:

@import url(loudvoice.css) speech;
@media print {
/* style sheet for print goes here */
}

Medien können auch im Dokument-Tag eingeführt werden:

<link rel="stylesheet" type="text/css" media="print" href="foo.css">

(empfohlenes Tutorial). : CSS-Tutorial)

Es ist ersichtlich, dass der Unterschied zwischen @import und @media darin besteht, dass ersteres externe Stylesheets für Medientypen einführt, während letzteres Medienattribute direkt einführt.

Die Methode zur Verwendung von @import besteht darin, die URL-Adresse der Stylesheet-Datei zu @import hinzuzufügen und dann den Medientyp hinzuzufügen. Mehrere Medien können ein Stylesheet gemeinsam nutzen, und die Medientypen werden durch „,“ getrennt. "Trennzeichen. Die Verwendung von @media besteht darin, den Medientyp an die erste Stelle zu setzen, und andere Regeln sind grundsätzlich dieselben wie der Regelsatz.

Die verschiedenen Medientypen sind unten aufgeführt:

BILDSCHIRM: Bezieht sich auf den Computerbildschirm.

DRUCKEN: Bezieht sich auf die undurchsichtigen Medien, die für Drucker verwendet werden.

PROJEKTION: bezieht sich auf das zur Anzeige verwendete Projekt.

BRAILLE: Braille-System, bezieht sich auf Drucksachen mit taktilen Effekten.

AURAL: bezieht sich auf einen elektronischen Sprachsynthesizer.

TV: bezieht sich auf Fernsehmedien.

HANDHELD: bezieht sich auf ein tragbares Anzeigegerät (kleiner Bildschirm, monochrom).

ALLE: Für alle Medien geeignet.

Verwendung des adaptiven Stils für mobile Endgeräte (mobiles Endgerät) @media

Universeller Stil für mobile Endgeräte:

@media all and (orientation : portrait) {
/*竖屏*/
}
@media all and (orientation : landscape) {
/*横屏*/
}

Angegebener Höhenstil für mobile Endgeräte:

@media screen and (max-width: 750px)
@media screen and (min-width: 720px) and (max-width: 960px) {//720 <= xxx < 960的设备}

Stile Nach verschiedenen Geräten einstellen:

@media (min-width: 768px){ //>=768的设备 }
@media (min-width: 992px){ //>=992的设备 }
@media (min-width: 1200){ //>=1200的设备 }

Achten Sie auf die Reihenfolge, wenn Sie unten @media (Mindestbreite: 768 Pixel) schreiben. Dies ist sehr tragisch, da die CSS-Datei von oben nach unten gelesen wird. Ja, die Priorität des nachfolgenden CSS wird höher sein

@media (min-width: 1200){ //>=1200的设备 }
@media (min-width: 992px){ //>=992的设备 }
@media (min-width: 768px){ //>=768的设备 }

Denn wenn es 1440 ist, ist Ihre 1200 ungültig, da 1440>768.

Wenn wir also die Mindestbreite verwenden, werden die kleinen oben und die großen unten platziert. Wenn wir also die maximale Breite verwenden, sind die großen oben und die kleinen unten.

@media (max-width: 1199){ //<=1199的设备 }
@media (max-width: 991px){ //<=991的设备 }
@media (max-width: 767px){ //<=768的设备 }

Verwandte Video-Tutorial-Empfehlung: CSS-Video-Tutorial

Das obige ist der detaillierte Inhalt vonDetaillierte Einführung in Medientypen von CSS-Attributen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!