Looking for css Keywords? Try Ask4Keywords

CSSMedien-Anfragen


Syntax

  • @media [nicht | nur] Mediatyp und (Medienfunktion) {/ * CSS-Regeln, die * /} gelten

Parameter

Parameter Einzelheiten
mediatype (Optional) Dies ist der Medientyp. Könnte alles im Bereich von all zu screen .
not (Optional) Wendet CSS für diesen bestimmten Medientyp nicht an und gilt für alles andere.
media feature Logik zur Identifizierung des Anwendungsfalls für CSS. Optionen unten beschrieben.
Medienfunktion Einzelheiten
aspect-ratio Beschreibt das Seitenverhältnis des Zielanzeigebereichs des Ausgabegeräts.
color Gibt die Anzahl der Bits pro Farbkomponente des Ausgabegeräts an. Wenn das Gerät kein Farbgerät ist, ist dieser Wert Null.
color-index Gibt die Anzahl der Einträge in der Farbnachschlagetabelle für das Ausgabegerät an.
grid Bestimmt, ob das Ausgabegerät ein Grid-Gerät oder ein Bitmap-Gerät ist.
height Die Höhenmedienfunktion beschreibt die Höhe der Rendering-Oberfläche des Ausgabegeräts.
max-width CSS wird nicht auf eine Bildschirmbreite angewendet, die breiter als angegeben ist.
min-width CSS wird nicht auf eine Bildschirmbreite angewendet, die schmaler als angegeben ist.
max-height CSS wird nicht auf einer Bildschirmhöhe angewendet, die höher als angegeben ist.
min-height CSS wird nicht auf einer Bildschirmhöhe angewendet, die kürzer ist als angegeben.
monochrome Gibt die Anzahl der Bits pro Pixel auf einem Monochromgerät (Graustufen) an.
orientation CSS wird nur angezeigt, wenn das Gerät die angegebene Ausrichtung verwendet. Weitere Informationen finden Sie in den Anmerkungen.
resolution Gibt die Auflösung (Pixeldichte) des Ausgabegeräts an.
scan Beschreibt den Scanvorgang von Fernsehausgabegeräten.
width Die Medienbreite-Funktion beschreibt die Breite der Rendering-Oberfläche des Ausgabegeräts (z. B. die Breite des Dokumentfensters oder die Breite des Seitenrahmens eines Druckers).
Veraltete Funktionen Einzelheiten
device-aspect-ratio Deprecated CSS wird nur auf Geräten angezeigt, deren Höhen- / Breitenverhältnis dem angegebenen Verhältnis entspricht. Dies ist eine deprecated Funktion und es kann nicht garantiert werden, dass sie funktioniert.
max-device-width Deprecated Entspricht der max-width , misst jedoch die physische Bildschirmbreite und nicht die Anzeigebreite des Browsers.
min-device-width Deprecated Entspricht min-width , misst jedoch die physische Bildschirmbreite und nicht die Anzeigebreite des Browsers.
max-device-height Deprecated Entspricht der max-height , misst jedoch die physische Bildschirmbreite und nicht die Anzeigebreite des Browsers.
min-device-height Deprecated Wie min-height , misst jedoch die physische Bildschirmbreite und nicht die Anzeigebreite des Browsers.

Bemerkungen

Medienabfragen werden in allen modernen Browsern unterstützt, einschließlich Chrome, Firefox, Opera und Internet Explorer 9 und höher.


Es ist wichtig zu beachten, dass die orientation nicht auf mobile Geräte beschränkt ist. Es basiert auf der Breite und Höhe des Ansichtsfensters (nicht Fenster oder Geräte).

Der Landschaftsmodus ist, wenn die Breite des Ansichtsfensters größer als die Höhe des Ansichtsfensters ist.

Der Porträtmodus ist, wenn die Höhe des Ansichtsfensters größer als die Breite des Ansichtsfensters ist.

Dies bedeutet normalerweise, dass sich ein Desktop-Monitor im Querformat befindet. Manchmal kann es sich jedoch auch um ein Portrait handeln.


In den meisten Fällen melden mobile Geräte ihre Auflösung und nicht ihre tatsächliche Pixelgröße, die sich aufgrund der Pixeldichte unterscheiden kann. Um sie zu zwingen, ihre tatsächliche Pixelgröße anzugeben, fügen Sie Folgendes in Ihrem head Tag hinzu:

<meta name="viewport" content="width=device-width, initial-scale=1">


Medien-Anfragen Verwandte Beispiele