CSS
Medien-Anfragen
Suche…
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">
Basisbeispiel
@media screen and (min-width: 720px) {
body {
background-color: skyblue;
}
}
Die obige Medienabfrage gibt zwei Bedingungen an:
- Die Seite muss auf einem normalen Bildschirm angezeigt werden (keine gedruckte Seite, Projektor usw.).
- Die Breite des Ansichtsports des Benutzers muss mindestens 720 Pixel betragen.
Wenn diese Bedingungen erfüllt sind, sind die Stile in der Medienabfrage aktiv und die Hintergrundfarbe der Seite ist himmelblau.
Medienabfragen werden dynamisch angewendet. Wenn beim Laden der Seite die in der Medienabfrage angegebenen Bedingungen erfüllt sind, wird das CSS angewendet, es wird jedoch sofort deaktiviert, wenn die Bedingungen nicht mehr erfüllt sind. Wenn die Bedingungen anfangs nicht erfüllt sind, wird das CSS erst dann angewendet, wenn die angegebenen Bedingungen erfüllt sind.
Wenn die Ansichtsanschlussbreite des Benutzers anfangs größer als 720 Pixel ist, der Benutzer jedoch die Breite des Browsers verkleinert, wird die Hintergrundfarbe nicht mehr himmelblau, sobald der Benutzer den Ansichtsanschluss auf weniger als 720 Pixel verkleinert Breite.
Verwenden Sie das Link-Tag
<link rel="stylesheet" media="min-width: 600px" href="example.css" />
Dieses Stylesheet wird noch heruntergeladen, jedoch nur auf Geräten mit einer Bildschirmbreite von mehr als 600px angewendet.
Medientyp
Medienabfragen haben einen optionalen mediatype Parameter. Dieser Parameter wird direkt nach der @media Deklaration ( @media mediatype ) @media mediatype Beispiel:
@media print {
html {
background-color: white;
}
}
Der obige CSS-Code gibt dem DOM- HTML Element beim Drucken eine weiße Hintergrundfarbe.
Der mediatype Parameter hat ein optionales not oder only Präfix, das die Stile auf alles außer dem angegebenen Medientyp oder nur dem angegebenen Medientyp anwendet. Im folgenden Codebeispiel wird der Stil beispielsweise auf alle Medientypen mit Ausnahme des print .
@media not print {
html {
background-color: green;
}
}
Und auf die gleiche Weise, um es nur auf dem Bildschirm anzuzeigen, kann dies verwendet werden:
@media only screen {
.fadeInEffects {
display: block;
}
}
Die Liste der mediatype kann anhand der folgenden Tabelle besser verstanden werden:
| Medientyp | Beschreibung |
|---|---|
all | Auf alle Geräte anwenden |
screen | Standardcomputer |
print | Drucker im Allgemeinen. Wird verwendet, um Druckversionen von Websites zu gestalten |
handheld | PDAs, Handys und Handgeräte mit kleinem Bildschirm |
projection | Zur projizierten Präsentation, zum Beispiel Projektoren |
aural | Sprachsysteme |
braille | Braille-taktile Geräte |
embossed | Paged Braille-Drucker |
tv | Fernsehgeräte |
tty | Geräte mit einem Zeichenraster mit festem Abstand. Terminals, tragbare Geräte. |
Verwenden von Medienabfragen zum Anpassen verschiedener Bildschirmgrößen
Beim responsive Webdesign handelt es sich häufig um Medienabfragen, bei denen es sich um CSS-Blöcke handelt, die nur ausgeführt werden, wenn eine Bedingung erfüllt ist. Dies ist hilfreich für responsives Webdesign, da Sie mithilfe von Medienabfragen andere CSS-Stile für die mobile Version Ihrer Website als für die Desktopversion angeben können.
@media only screen and (min-width: 300px) and (max-width: 767px) {
.site-title {
font-size: 80%;
}
/* Styles in this block are only applied if the screen size is atleast 300px wide, but no more than 767px */
}
@media only screen and (min-width: 768px) and (max-width: 1023px) {
.site-title {
font-size: 90%;
}
/* Styles in this block are only applied if the screen size is atleast 768px wide, but no more than 1023px */
}
@media only screen and (min-width: 1024px) {
.site-title {
font-size: 120%;
}
/* Styles in this block are only applied if the screen size is over 1024px wide. */
}
Breite vs. Sichtfenster
Bei der Verwendung von "width" bei Medienabfragen ist es wichtig, das Meta-Tag richtig einzustellen. Das grundlegende Meta-Tag sieht folgendermaßen aus und muss in das <head> -Tag eingefügt werden.
<meta name="viewport" content="width=device-width,initial-scale=1">
Warum ist das wichtig?
Basierend auf der Definition des MDN ist "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).
Was bedeutet das?
View-Port ist die Breite des Geräts selbst. Wenn Ihre Bildschirmauflösung eine Auflösung von 1280 x 720 angibt, ist die Breite des Ansichtsports "1280px".
Häufig weisen viele Geräte eine andere Pixelmenge zu, um ein Pixel anzuzeigen. Für ein Beispiel hat das iPhone 6 Plus eine Auflösung von 1242 x 2208. Die tatsächliche Breite des Ansichtsfensters und die Höhe des Ansichtsfensters beträgt jedoch 414 x 736. Das bedeutet, dass 3 Pixel zum Erstellen eines Pixels verwendet werden.
Wenn Sie das meta Tag jedoch nicht richtig eingestellt haben, wird versucht, Ihre Website mit ihrer nativen Auflösung anzuzeigen, die eine verkleinerte Ansicht (kleinere Texte und Bilder) ergibt.
Medienabfragen für Retina- und Nicht-Retina-Bildschirme
Obwohl dies nur für WebKit-basierte Browser funktioniert, ist dies hilfreich:
/* ----------- Non-Retina Screens ----------- */
@media screen
and (min-width: 1200px)
and (max-width: 1600px)
and (-webkit-min-device-pixel-ratio: 1) {
}
/* ----------- Retina Screens ----------- */
@media screen
and (min-width: 1200px)
and (max-width: 1600px)
and (-webkit-min-device-pixel-ratio: 2)
and (min-resolution: 192dpi) {
}
Hintergrundinformation
Es gibt zwei Arten von Pixeln in der Anzeige. Eines sind die logischen Pixel und das andere sind die physischen Pixel. Meist bleiben die physischen Pixel immer gleich, da sie für alle Anzeigegeräte gleich sind. Die logischen Pixel ändern sich je nach Auflösung der Geräte, um Pixel mit höherer Qualität anzuzeigen. Das Gerätepixelverhältnis ist das Verhältnis zwischen physikalischen Pixeln und logischen Pixeln. Beispielsweise geben das MacBook Pro Retina, iPhone 4 und höher ein Gerätepixelverhältnis von 2 an, da die physikalische lineare Auflösung die doppelte logische Auflösung ist.
Der Grund, warum dies nur mit WebKit-basierten Browsern funktioniert, hat folgende Gründe:
- Das Lieferantenpräfix
-webkit-vor der Regel. - Dies wurde nicht in anderen Engines als WebKit und Blink implementiert.
Terminologie und Struktur
Medienabfragen ermöglichen die Anwendung von CSS-Regeln basierend auf dem Gerätetyp / Medium (z. B. Bildschirm, Druck oder Handheld), dem so genannten Medientyp . Zusätzliche Aspekte des Geräts werden mit Medienfunktionen beschrieben, wie z.
Allgemeine Struktur einer Medienanfrage
@media [...] {
/* One or more CSS rules to apply when the query is satisfied */
}
Eine Medienanfrage, die einen Medientyp enthält
@media print {
/* One or more CSS rules to apply when the query is satisfied */
}
Eine Medienabfrage, die einen Medientyp und eine Medienfunktion enthält
@media screen and (max-width: 600px) {
/* One or more CSS rules to apply when the query is satisfied */
}
Eine Medienabfrage mit einer Medienfunktion (und einem impliziten Medientyp "Alle")
@media (orientation: portrait) {
/* One or more CSS rules to apply when the query is satisfied */
}
Medienabfragen und IE8
Medienabfragen werden in IE8 und darunter überhaupt nicht unterstützt.
Eine Javascript-basierte Problemumgehung
Um die Unterstützung für IE8 hinzuzufügen, können Sie eine von mehreren JS-Lösungen verwenden. Zum Beispiel kann " Antworten " hinzugefügt werden, um die Unterstützung für Medienabfragen für IE8 nur mit dem folgenden Code hinzuzufügen:
<!--[if lt IE 9]>
<script
src="respond.min.js">
</script>
<![endif]-->
CSS Mediaqueries ist eine andere Bibliothek, die dasselbe tut. Der Code zum Hinzufügen dieser Bibliothek zu Ihrem HTML-Code wäre identisch:
<!--[if lt IE 9]>
<script
src="css3-mediaqueries.js">
</script>
<![endif]-->
Die Alternative
Wenn Sie keine JS-basierte Lösung mögen, sollten Sie auch ein IE <9-Stylesheet hinzufügen, in dem Sie Ihren Stil für IE <9 anpassen. Dazu sollten Sie Ihrem Code den folgenden HTML-Code hinzufügen:
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" media="all" href="style-ielt9.css"/>
<![endif]-->
Hinweis :
Technisch gesehen ist es eine weitere Alternative: CSS-Hacks verwenden, um auf IE <9 zu zielen. Es hat die gleichen Auswirkungen wie ein IE <9-Stylesheet, aber Sie benötigen dafür kein separates Stylesheet. Ich empfehle diese Option jedoch nicht, da sie ungültigen CSS-Code erzeugen (was nur einer von mehreren Gründen ist, warum die Verwendung von CSS-Hacks heute allgemein missbilligt wird).