Diese Übersetzung ist unvollständig. Bitte helfen Sie, diesen Artikel aus dem Englischen zu übersetzen.
Media Queries is a module of CSS that defines expressions allowing to tailor presentations to a specific range of output devices without changing the content itself.
Reference
At-rules
Guides
- Using media queries
- Presents what media queries are doing and explains the possible expressions.
- Testing media queries
- Explains how to test a media query programmatically, from JavaScript.
Specifications
Specification | Status | Comment |
---|---|---|
CSS Conditional Rules Module Level 3 | Anwärter Empfehlung | |
Media Queries Level 4 | Anwärter Empfehlung |
|
Media Queries | Empfehlung | |
CSS Level 2 (Revision 1) | Empfehlung |
Browser compatibility
Update compatibility data on GitHub
Desktop | Mobile | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Grundlegende Unterstützung | Chrome Vollständige Unterstützung 1 | Edge Vollständige Unterstützung Ja | Firefox Vollständige Unterstützung 1 | IE Vollständige Unterstützung 6 | Opera Vollständige Unterstützung 9.2 | Safari Vollständige Unterstützung 1.3 | WebView Android Vollständige Unterstützung 1 | Chrome Android ? | Edge Mobile Vollständige Unterstützung Ja | Firefox Android Vollständige Unterstützung 4 | Opera Android Vollständige Unterstützung 9 | Safari iOS Vollständige Unterstützung 3.1 | Samsung Internet Android ? |
speech media type | Chrome Keine Unterstützung Nein | Edge Keine Unterstützung Nein | Firefox Keine Unterstützung Nein | IE Keine Unterstützung Nein | Opera Vollständige Unterstützung 9.2 | Safari Keine Unterstützung Nein | WebView Android Keine Unterstützung Nein | Chrome Android ? | Edge Mobile Keine Unterstützung Nein | Firefox Android Keine Unterstützung Nein | Opera Android Vollständige Unterstützung 9 | Safari iOS Keine Unterstützung Nein | Samsung Internet Android Keine Unterstützung Nein |
Media feature expressions | Chrome Vollständige Unterstützung 1 | Edge Vollständige Unterstützung Ja | Firefox Vollständige Unterstützung 1 | IE Vollständige Unterstützung 9 | Opera Vollständige Unterstützung 9.2 | Safari Vollständige Unterstützung 1.3 | WebView Android Vollständige Unterstützung 1 | Chrome Android ? | Edge Mobile Vollständige Unterstützung Ja | Firefox Android Vollständige Unterstützung 4 | Opera Android Vollständige Unterstützung 9 | Safari iOS Vollständige Unterstützung 3.1 | Samsung Internet Android ? |
any-hover media feature | Chrome Vollständige Unterstützung 41 | Edge Vollständige Unterstützung 16 | Firefox Vollständige Unterstützung 64 | IE Keine Unterstützung Nein | Opera Vollständige Unterstützung 28 | Safari Vollständige Unterstützung 9 | WebView Android Vollständige Unterstützung 41 | Chrome Android Vollständige Unterstützung 41 | Edge Mobile Keine Unterstützung Nein | Firefox Android Vollständige Unterstützung 64 | Opera Android Vollständige Unterstützung 28 | Safari iOS Vollständige Unterstützung 9.2 | Samsung Internet Android Vollständige Unterstützung 5.0 |
any-pointer media feature | Chrome Vollständige Unterstützung 41 | Edge Vollständige Unterstützung 12 | Firefox Vollständige Unterstützung 64 | IE Keine Unterstützung Nein | Opera Vollständige Unterstützung 28 | Safari Vollständige Unterstützung 9 | WebView Android Vollständige Unterstützung 41 | Chrome Android Vollständige Unterstützung 41 | Edge Mobile Vollständige Unterstützung 12 | Firefox Android Vollständige Unterstützung 64 | Opera Android Vollständige Unterstützung 28 | Safari iOS Vollständige Unterstützung 9.2 | Samsung Internet Android ? |
aspect-ratio media feature | Chrome Vollständige Unterstützung 4 | Edge ? | Firefox Vollständige Unterstützung 3.5 | IE Vollständige Unterstützung 9 | Opera Vollständige Unterstützung 53 | Safari Vollständige Unterstützung Ja | WebView Android Vollständige Unterstützung Ja | Chrome Android ? | Edge Mobile ? | Firefox Android ? | Opera Android ? | Safari iOS Vollständige Unterstützung Ja | Samsung Internet Android Vollständige Unterstützung Ja |
color media feature | Chrome Vollständige Unterstützung Ja | Edge ? | Firefox Vollständige Unterstützung Ja | IE ? | Opera Vollständige Unterstützung Ja | Safari Vollständige Unterstützung Ja | WebView Android ? | Chrome Android ? | Edge Mobile ? | Firefox Android ? | Opera Android ? | Safari iOS ? | Samsung Internet Android ? |
color-gamut media feature | Chrome Vollständige Unterstützung 58 | Edge ? | Firefox Keine Unterstützung Nein | IE Keine Unterstützung Nein | Opera Vollständige Unterstützung 45 | Safari Vollständige Unterstützung Ja | WebView Android ? | Chrome Android Vollständige Unterstützung 58 | Edge Mobile ? | Firefox Android Keine Unterstützung Nein | Opera Android Vollständige Unterstützung 45 | Safari iOS ? | Samsung Internet Android ? |
color-index media feature | Chrome Vollständige Unterstützung Ja | Edge ? | Firefox Keine Unterstützung Nein | IE Keine Unterstützung Nein | Opera ? | Safari ? | WebView Android ? | Chrome Android ? | Edge Mobile ? | Firefox Android ? | Opera Android ? | Safari iOS ? | Samsung Internet Android ? |
device-aspect-ratio media feature | Chrome Vollständige Unterstützung Ja | Edge ? | Firefox Vollständige Unterstützung Ja | IE ? | Opera ? | Safari ? | WebView Android ? | Chrome Android Vollständige Unterstützung Ja | Edge Mobile ? | Firefox Android Vollständige Unterstützung Ja | Opera Android ? | Safari iOS ? | Samsung Internet Android ? |
device-height media feature | Chrome Vollständige Unterstützung Ja | Edge ? | Firefox Vollständige Unterstützung Ja | IE ? | Opera ? | Safari ? | WebView Android ? | Chrome Android Vollständige Unterstützung Ja | Edge Mobile ? | Firefox Android Vollständige Unterstützung Ja | Opera Android ? | Safari iOS ? | Samsung Internet Android ? |
device-width media feature | Chrome Vollständige Unterstützung Ja | Edge ? | Firefox Vollständige Unterstützung Ja | IE ? | Opera ? | Safari ? | WebView Android ? | Chrome Android Vollständige Unterstützung Ja | Edge Mobile ? | Firefox Android Vollständige Unterstützung Ja | Opera Android ? | Safari iOS ? | Samsung Internet Android ? |
display-mode media feature | Chrome Vollständige Unterstützung 46 | Edge Keine Unterstützung Nein | Firefox
Vollständige Unterstützung
47
| IE ? | Opera ? | Safari ? | WebView Android ? | Chrome Android Vollständige Unterstützung 46 | Edge Mobile Keine Unterstützung Nein | Firefox Android
Vollständige Unterstützung
47
| Opera Android ? | Safari iOS ? | Samsung Internet Android Keine Unterstützung Nein |
grid media feature | Chrome Vollständige Unterstützung Ja | Edge ? | Firefox Vollständige Unterstützung Ja | IE ? | Opera Vollständige Unterstützung Ja | Safari Vollständige Unterstützung Ja | WebView Android ? | Chrome Android ? | Edge Mobile ? | Firefox Android ? | Opera Android ? | Safari iOS ? | Samsung Internet Android ? |
height media feature | Chrome ? | Edge ? | Firefox ? | IE Vollständige Unterstützung 9 | Opera ? | Safari ? | WebView Android ? | Chrome Android ? | Edge Mobile ? | Firefox Android ? | Opera Android ? | Safari iOS ? | Samsung Internet Android ? |
inverted-colors media feature | Chrome Keine Unterstützung Nein | Edge ? | Firefox Keine Unterstützung Nein | IE Keine Unterstützung Nein | Opera Keine Unterstützung Nein | Safari Vollständige Unterstützung Ja | WebView Android ? | Chrome Android Keine Unterstützung Nein | Edge Mobile ? | Firefox Android Keine Unterstützung Nein | Opera Android Keine Unterstützung Nein | Safari iOS Vollständige Unterstützung Ja | Samsung Internet Android ? |
hover media feature | Chrome
Vollständige Unterstützung
38
| Edge Vollständige Unterstützung 12 | Firefox Vollständige Unterstützung 64 | IE Keine Unterstützung Nein | Opera Vollständige Unterstützung 28 | Safari Vollständige Unterstützung 9 | WebView Android ? | Chrome Android Vollständige Unterstützung 50 | Edge Mobile Vollständige Unterstützung 12 | Firefox Android Vollständige Unterstützung 64 | Opera Android Vollständige Unterstützung 28 | Safari iOS Vollständige Unterstützung 9.2 | Samsung Internet Android ? |
light-level media feature | Chrome Keine Unterstützung Nein | Edge ? | Firefox Keine Unterstützung Nein | IE Keine Unterstützung Nein | Opera Keine Unterstützung Nein | Safari Keine Unterstützung Nein | WebView Android Keine Unterstützung Nein | Chrome Android Keine Unterstützung Nein | Edge Mobile ? | Firefox Android Keine Unterstützung Nein | Opera Android Keine Unterstützung Nein | Safari iOS Keine Unterstützung Nein | Samsung Internet Android ? |
monochrome media feature | Chrome Vollständige Unterstützung Ja | Edge ? | Firefox Vollständige Unterstützung Ja | IE Keine Unterstützung Nein | Opera Vollständige Unterstützung Ja | Safari Vollständige Unterstützung Ja | WebView Android ? | Chrome Android ? | Edge Mobile ? | Firefox Android ? | Opera Android ? | Safari iOS ? | Samsung Internet Android ? |
orientation media feature | Chrome Vollständige Unterstützung Ja | Edge ? | Firefox Vollständige Unterstützung Ja | IE ? | Opera Vollständige Unterstützung Ja | Safari Vollständige Unterstützung Ja | WebView Android Vollständige Unterstützung Ja | Chrome Android ? | Edge Mobile ? | Firefox Android ? | Opera Android ? | Safari iOS ? | Samsung Internet Android ? |
overflow-block media feature | Chrome Keine Unterstützung Nein | Edge ? | Firefox
Keine Unterstützung
Nein
| IE ? | Opera ? | Safari ? | WebView Android ? | Chrome Android Keine Unterstützung Nein | Edge Mobile ? | Firefox Android
Keine Unterstützung
Nein
| Opera Android ? | Safari iOS ? | Samsung Internet Android ? |
overflow-inline media feature | Chrome Keine Unterstützung Nein | Edge ? | Firefox
Keine Unterstützung
Nein
| IE ? | Opera ? | Safari ? | WebView Android ? | Chrome Android Keine Unterstützung Nein | Edge Mobile ? | Firefox Android
Keine Unterstützung
Nein
| Opera Android ? | Safari iOS ? | Samsung Internet Android ? |
pointer media feature | Chrome Vollständige Unterstützung 41 | Edge Vollständige Unterstützung 12 | Firefox Vollständige Unterstützung 64 | IE ? | Opera Vollständige Unterstützung 28 | Safari Vollständige Unterstützung 9 | WebView Android ? | Chrome Android Vollständige Unterstützung 50 | Edge Mobile Vollständige Unterstützung 12 | Firefox Android Vollständige Unterstützung 64 | Opera Android Vollständige Unterstützung 28 | Safari iOS Vollständige Unterstützung 9.2 | Samsung Internet Android ? |
prefers-reduced-motion media feature | Chrome Keine Unterstützung Nein | Edge Keine Unterstützung Nein | Firefox Vollständige Unterstützung 63 | IE Keine Unterstützung Nein | Opera Keine Unterstützung Nein | Safari Vollständige Unterstützung 10.1 | WebView Android Keine Unterstützung Nein | Chrome Android Keine Unterstützung Nein | Edge Mobile Keine Unterstützung Nein | Firefox Android Vollständige Unterstützung 64 | Opera Android Keine Unterstützung Nein | Safari iOS Vollständige Unterstützung 10.3 | Samsung Internet Android ? |
resolution media feature | Chrome Vollständige Unterstützung 29 | Edge ? | Firefox
Vollständige Unterstützung
8
| IE ? | Opera Vollständige Unterstützung Ja | Safari ? | WebView Android ? | Chrome Android ? | Edge Mobile ? | Firefox Android ? | Opera Android ? | Safari iOS ? | Samsung Internet Android ? |
scan media feature | Chrome Keine Unterstützung Nein | Edge ? | Firefox Keine Unterstützung Nein | IE Keine Unterstützung Nein | Opera Keine Unterstützung Nein | Safari Keine Unterstützung Nein | WebView Android ? | Chrome Android ? | Edge Mobile ? | Firefox Android Keine Unterstützung Nein | Opera Android ? | Safari iOS ? | Samsung Internet Android ? |
scripting media feature | Chrome
Keine Unterstützung
Nein
| Edge ? | Firefox
Keine Unterstützung
Nein
| IE Keine Unterstützung Nein | Opera Keine Unterstützung Nein | Safari Keine Unterstützung Nein | WebView Android
Keine Unterstützung
Nein
| Chrome Android
Keine Unterstützung
Nein
| Edge Mobile ? | Firefox Android
Keine Unterstützung
Nein
| Opera Android Keine Unterstützung Nein | Safari iOS Keine Unterstützung Nein | Samsung Internet Android ? |
update media feature | Chrome Keine Unterstützung Nein | Edge ? | Firefox Keine Unterstützung Nein | IE Keine Unterstützung Nein | Opera Keine Unterstützung Nein | Safari Keine Unterstützung Nein | WebView Android ? | Chrome Android ? | Edge Mobile ? | Firefox Android ? | Opera Android ? | Safari iOS ? | Samsung Internet Android ? |
width media feature | Chrome Vollständige Unterstützung Ja | Edge ? | Firefox Vollständige Unterstützung Ja | IE Vollständige Unterstützung 9 | Opera Vollständige Unterstützung Ja | Safari Vollständige Unterstützung Ja | WebView Android ? | Chrome Android ? | Edge Mobile ? | Firefox Android ? | Opera Android ? | Safari iOS ? | Samsung Internet Android ? |
-moz-device-pixel-ratio media feature | Chrome Keine Unterstützung Nein | Edge ? | Firefox Vollständige Unterstützung 4 | IE ? | Opera ? | Safari ? | WebView Android ? | Chrome Android ? | Edge Mobile ? | Firefox Android ? | Opera Android ? | Safari iOS ? | Samsung Internet Android ? |
-webkit-animation media feature | Chrome Vollständige Unterstützung Ja | Edge ? | Firefox ? | IE ? | Opera ? | Safari ? | WebView Android ? | Chrome Android ? | Edge Mobile ? | Firefox Android ? | Opera Android ? | Safari iOS ? | Samsung Internet Android ? |
-webkit-device-pixel-ratio media feature | Chrome Vollständige Unterstützung Ja | Edge ? | Firefox
Vollständige Unterstützung
49
| IE Keine Unterstützung Nein | Opera Vollständige Unterstützung Ja | Safari ? | WebView Android ? | Chrome Android ? | Edge Mobile ? | Firefox Android ? | Opera Android ? | Safari iOS ? | Samsung Internet Android ? |
-webkit-max-device-pixel-ratio media feature | Chrome Vollständige Unterstützung Ja | Edge ? | Firefox
Vollständige Unterstützung
49
| IE Keine Unterstützung Nein | Opera Vollständige Unterstützung Ja | Safari ? | WebView Android ? | Chrome Android ? | Edge Mobile ? | Firefox Android ? | Opera Android ? | Safari iOS ? | Samsung Internet Android ? |
-webkit-min-device-pixel-ratio media feature | Chrome Vollständige Unterstützung Ja | Edge ? | Firefox
Vollständige Unterstützung
63
| IE Keine Unterstützung Nein | Opera Vollständige Unterstützung Ja | Safari ? | WebView Android ? | Chrome Android ? | Edge Mobile ? | Firefox Android ? | Opera Android ? | Safari iOS ? | Samsung Internet Android ? |
-webkit-transform-2d media feature | Chrome Keine Unterstützung Nein | Edge Keine Unterstützung Nein | Firefox Keine Unterstützung Nein | IE Keine Unterstützung Nein | Opera Vollständige Unterstützung Ja | Safari Vollständige Unterstützung 1 | WebView Android ? | Chrome Android ? | Edge Mobile Keine Unterstützung Nein | Firefox Android Keine Unterstützung Nein | Opera Android ? | Safari iOS ? | Samsung Internet Android ? |
-webkit-transform-3d media feature | Chrome Vollständige Unterstützung Ja | Edge ? | Firefox
Vollständige Unterstützung
49
| IE ? | Opera Vollständige Unterstützung Ja | Safari Vollständige Unterstützung 1 | WebView Android ? | Chrome Android ? | Edge Mobile ? | Firefox Android ? | Opera Android ? | Safari iOS ? | Samsung Internet Android ? |
-webkit-transition media feature | Chrome Keine Unterstützung Nein | Edge ? | Firefox Keine Unterstützung Nein | IE ? | Opera Vollständige Unterstützung Ja | Safari Vollständige Unterstützung 1 | WebView Android ? | Chrome Android ? | Edge Mobile ? | Firefox Android ? | Opera Android ? | Safari iOS ? | Samsung Internet Android ? |
Legende
- Vollständige Unterstützung
- Vollständige Unterstützung
- Keine Unterstützung
- Keine Unterstützung
- Kompatibilität unbekannt
- Kompatibilität unbekannt
- Experimentell. Das Verhalten kann sich zukünftig ändern.
- Experimentell. Das Verhalten kann sich zukünftig ändern.
- Nicht standardisiert. Erwarte schlechte browserübergreifende Unterstützung.
- Nicht standardisiert. Erwarte schlechte browserübergreifende Unterstützung.
- Veraltet. Nicht für den Einsatz in neuen Webseiten gedacht.
- Veraltet. Nicht für den Einsatz in neuen Webseiten gedacht.
- Siehe Implementierungshinweise.
- Siehe Implementierungshinweise.
- Benutzer muss dieses Feature explizit aktivieren.
- Benutzer muss dieses Feature explizit aktivieren.