CSS-Tutorial: CSS-Attribut-Medientyp

Eines der wichtigsten Merkmale eines Stylesheets besteht darin, dass es auf mehrere Medien angewendet werden kann, z. B. Seiten, Bildschirme, elektronische Synthesizer usw. Bestimmte Eigenschaften gelten nur für bestimmte Medien, beispielsweise gilt die Eigenschaft „Schriftgröße“ nur für scrollbare Medientypen (Bildschirme).

Um ein Medienattribut zu deklarieren, können Sie @import oder @media verwenden:

@import url(loudvoice.css) Sprache;
@media drucken {
/* Stylesheet zum Drucken kommt hier hin */
}

Auch Medien können in die Dokumentmarkierung eingebunden werden:
<link rel="stylesheet" type="text/css" media="drucken" href="foo.css">
Wie Sie sehen, besteht der Unterschied zwischen @import und @media darin, dass ersteres externe Stylesheets für Medientypen importiert, während letzteres Medienattribute direkt importiert. Die Verwendung von @import ist @import plus die URL-Adresse der Stylesheet-Datei und dann der Medientyp. Mehrere Medien können ein Stylesheet gemeinsam nutzen und die Medientypen werden durch das Trennzeichen "," getrennt. Die Verwendung von @media besteht darin, den Medientyp an die erste Stelle zu setzen. Die anderen Regeln sind grundsätzlich dieselben wie beim Regelsatz. Die verschiedenen Medientypen sind unten aufgeführt:

BILDSCHIRM: bezieht sich auf den Computerbildschirm.
DRUCKEN: Bezieht sich auf undurchsichtige Medien, die in Druckern verwendet werden.
PROJEKTION: bezeichnet das darzustellende Projekt.
BRAILLE: Braille-System, das sich auf Druckerzeugnisse mit taktilen Effekten bezieht.
AURAL: bezeichnet einen elektronischen Sprachsynthesizer.
TV: bezieht sich auf fernsehähnliche Medien.
HANDHELD: bezeichnet ein tragbares Anzeigegerät (kleiner Bildschirm, monochrom)
ALLE: Gilt für alle Medien.

Verwendung des mobilfreundlichen @media-Stils

Allgemeiner Handy-Stil:

@media alle und (Ausrichtung: Hochformat) {
/*Vertikaler Bildschirm*/
}
@media alle und (Ausrichtung: Querformat) {
/*Horizontaler Bildschirm*/
}

Geben Sie den Höhenstil für Mobiltelefone an:

@media screen und (maximale Breite: 750px)
@media screen und (min-width: 720px) und (max-width: 960px) {//Geräte mit 720 <= xxx < 960}

Stileinstellungen für verschiedene Geräte:

@media (Mindestbreite: 768px) { //> = 768 Geräte}
@media (Mindestbreite: 992px) { //> = 992 Geräte}
@media (min-width: 1200) { //> = 1200 Geräte}

Achten Sie auf die Reihenfolge. Wenn Sie darunter @media (Mindestbreite: 768px) schreiben, ist dies eine Tragödie, da die CSS-Datei von oben nach unten gelesen wird und das letztere CSS eine höhere Priorität hat.

@media (min-width: 1200) { //> = 1200 Geräte}
@media (Mindestbreite: 992px) { //> = 992 Geräte}
@media (Mindestbreite: 768px) { //> = 768 Geräte}

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

Wenn wir also die Mindestbreite verwenden, ist der kleinere oben und der größere unten. Wenn wir die maximale Breite verwenden, ist der größere oben und der kleinere unten.

@media (maximale Breite: 1199) { //<=1199 Geräte}
@media (maximale Breite: 991px) { //<=991 Geräte}
@media (maximale Breite: 767px) { //<=768 Geräte}

Dieser Artikel endet hier