CSS Referenzhandbuch

CSS @Regel(RULES)

CSS Eigenschaftsübersicht

CSS @media-Regel

Die @media-Regel kann verwendet werden, um Stilerregeln für mehrere Mediengruppen in einer einzigen Stilvorlage zu definieren. Sie muss eine Liste von Mediengruppen, die durch Kommas getrennt sind, und einen Block mit Regeln, der direkt daran anhängt, enthalten.

Mit der @media-Regel können Sie unterschiedliche Stile für verschiedene Mediengruppen definieren.

@media kann unterschiedliche Stile für verschiedene Bildschirmgrößen einstellen, insbesondere wenn Sie eine responsive Seite gestalten müssen, ist @media sehr nützlich.

Wenn Sie die Größe des Browsers ändern, wird die Seite ebenfalls basierend auf der Breite und Höhe des Browsers neu gerendert.

Verwendungssyntax der CSS @media-Richtlinie

Die Syntax der Regel ist wie folgt:

@media　media　type,...　{
　　　　/*　media-spezifische Regeln　*/
}

Sie können auch verschiedene CSS-Stile für verschiedene Medien verwenden:

<link　rel="stylesheet"　media="mediatype　and|not|only　(media　feature)"　href="style.css">

Der folgende Beispiel zeigt, wie das @media-Attribut verwendet wird.

Beispiel

@media　screen{
body　{
color:　#32cd32;
		　　font-family:　Arial,　sans-serif;
font-size:　14px;
}
}
@media　print　{
body　{
color:　#ff6347;
		　　font-family:　Times,　serif;
font-size:　12pt;
}
}
@media　screen,　print　{
body　{
line-height:　1.2;
}
}

Testen Sie, ob‹/›

Hinweis:Stilregeln außerhalb der Regel @media gelten für alle Mediengattungen, für die die Stilblätter gelten. Interne Regeln @media in CSS2.1In Medien ungültig

Medientyp

Wert	Beschreibung
all	Verwendet für alle Geräte
aural	Veraltet. Verwendet für Sprach- und Tonsynthesizer
braille	Veraltet. Anwendbar auf Tastatursysteme für Blinde
embossed	Veraltet. Verwendet für Braille-Drucker für Blinde
handheld	Veraltet. Verwendet für tragbare Geräte oder kleinere Geräte wie PDAs und kleine Telefone
print	Verwendet für Drucker und Druckvorschau
projection	Veraltet. Verwendet für Projektionsgeräte
screen	Verwendet für Computermonitore, Tablets, Smartphones und ähnliches.
speech	Anwendbar auf Lautsprechergeräte wie Screenreader
tty	Veraltet. Verwendet für feste Zeilengitter, wie Telegraphen, Terminals und tragbare Geräte mit begrenzten Zeichensätzen
tv	Veraltet. Verwendet für Fernsehen und Internetfernsehen

Medienfunktion

Wert	Beschreibung
aspect-ratio	Das Verhältnis der Breite zur Höhe des sichtbaren Bereichs der Seite im Ausgabegerät.
color	Die Anzahl der Farbsubstrate pro Gruppe des Ausgabegeräts. Wenn es sich nicht um ein Farbbildgerät handelt, ist der Wert 0.
color-index	Die Anzahl der Einträge in der Farbsuchtabelle des Ausgabegeräts. Wenn keine Farbsuchtabelle verwendet wird, ist der Wert 0.
device-aspect-ratio	Definiert das Verhältnis der sichtbaren Breite und Höhe des Bildschirms des Ausgabegeräts.
device-height	Definiert die sichtbare Höhe des Bildschirms des Ausgabegeräts.
device-width	Definiert die sichtbare Breite des Bildschirms des Ausgabegeräts.
grid	Verwendet, um zu überprüfen, ob das Ausgabegerät rasterbasiert oder punktbasiert ist.
height	Definiert die sichtbare Höhe des Bereichs der Seite im Ausgabegerät.
max-aspect-ratio	Definiert das maximale Verhältnis der sichtbaren Breite und Höhe des Bildschirms des Ausgabegeräts.
max-color	Definiert die maximale Anzahl der Farblelemente pro Gruppe im Ausgabegerät.
max-color-index	Definiert die maximale Anzahl der Einträge in der Farbtabelle des Ausgabegeräts.
max-device-aspect-ratio	Definiert das maximale Verhältnis der sichtbaren Breite und Höhe des Bildschirms des Ausgabegeräts.
max-device-height	Definiert die maximale sichtbare Höhe des Bildschirms des Ausgabegeräts.
max-device-width	Definiert die maximale sichtbare Breite des Bildschirms des Ausgabegeräts.
max-height	Definiert die maximale sichtbare Höhe des Bereichs der Seite im Ausgabegerät.
max-monochrome	Definiert die maximale Anzahl der monochromen Elemente pro Pixel in einem Einzefarben-Fensterraum.
max-resolution	Definiert die maximale Auflösung des Geräts.
max-width	Definiert die maximale sichtbare Breite des Bereichs der Seite im Ausgabegerät.
min-aspect-ratio	Definiert das minimale Verhältnis der Breite und Höhe des sichtbaren Bereichs der Seite im Ausgabegerät.
min-color	Definiert die minimale Anzahl der Farblelemente pro Gruppe im Ausgabegerät.
min-color-index	Definiert die minimale Anzahl der Einträge in der Farbtabelle des Ausgabegeräts.
min-device-aspect-ratio	Definiert das minimale Verhältnis der sichtbaren Breite und Höhe des Bildschirms des Ausgabegeräts.
min-device-width	Definiert die minimale sichtbare Breite des Bildschirms des Ausgabegeräts.
min-device-height	Definiert die minimale sichtbare Höhe des Bildschirms des Ausgabegeräts.
min-height	Definiert die minimale sichtbare Höhe des Bereichs der Seite im Ausgabegerät.
min-monochrome	Definiert die minimale Anzahl der monochromen Elemente pro Pixel in einem Einzefarben-Fensterraum.
min-resolution	Definiert die minimale Auflösung des Geräts.
min-width	Definiert die minimale sichtbare Breite des Bereichs der Seite im Ausgabegerät.
monochrome	Definiert die Anzahl der monochromen Elemente pro Pixel in einem Einzefarben-Fensterraum. Für nicht monochrome Geräte beträgt der Wert 0
orientation	Definiert, ob die sichtbare Breite der Seite im Ausgabegerät größer oder gleich der Höhe ist.
resolution	Definiert die Auflösung des Geräts. Zum Beispiel:96dpi, 300dpi, 118dpcm
scan	Definiert den Scanvorgang für die TV-Kategorie-Geräte.
width	Definiert die Breite des sichtbaren Bereichs der Seite im Ausgabegerät.

Browserkompatibilität

@media-Eigenschaft: Kompatibilität der Browser, die Nummern in der folgenden Tabelle stellen die niedrigste Versionsnummer der Browser dar, die diese Eigenschaft unterstützen; alle gängigen Browser unterstützen diese Regel.

	Firefox 1+ Google Chrome1+ Internet Explorer 9+ Apple Safari 1.3+ Opera 9.2+

Weiterlesen

Bitte beziehen Sie sich auf die folgenden Anleitungen:CSS Media Types.

CSS @page-Regel CSS @keyframes-Regel