Beispiel
Ändern Sie die Hintergrundfarbe, wenn das Ansichtsfenster 480 Pixel breit oder breiter ist:
@media screen and (min-width: 480px) {
body {
background-color: lightgreen;
}
}
Versuch es selber " Mehr "Try it Yourself" Sie "Try it Yourself" Beispiele unten.
Definition und Verwendung
Die @media Regel wird verwendet, um verschiedene Stilregeln für verschiedene Medientypen / Geräte definieren.
In CSS2 wurde diese Medientypen genannt, während in CSS3 wird es Medienanfragen genannt.
Medienanfragen Blick auf die Fähigkeit des Geräts, und kann verwendet werden, um viele Dinge zu überprüfen, wie zum Beispiel:
- Breite und Höhe des Darstellungs
- Breite und Höhe der Vorrichtung
- Orientierung (is the tablet/phone in landscape or portrait mode?)
- Lösung
- und vieles mehr
Browser-Unterstützung
Die Zahlen in der Tabelle gibt die erste Browser-Version, die die @media Regel voll unterstützt.
| Eigentum | |||||
|---|---|---|---|---|---|
| @media | 21 | 9 | 3.5 | 4.0 | 9 |
CSS-Syntax
@media not|onlymediatype and (media feature){
CSS-Code;
}Sie können auch verschiedene Stylesheets für verschiedene Medien haben:
<link rel="stylesheet" media=" mediatype and|not|only ( media
feature )"
href=" mystylesheet.css ">Medientypen
| Wert | Beschreibung |
|---|---|
| all | Wird für alle Geräte Medientyp |
| aural | Veraltete. Wird für die Sprach- und Klangsynthesizer |
| braille | Veraltete. Wird für die Braille-taktiles Feedback-Geräte |
| embossed | Veraltete. Wird für die ausgelagerten Braille-Drucker |
| handheld | Veraltete. Verwendet für kleine oder tragbare Geräte |
| Verwendet für Drucker | |
| projection | Veraltete. Wird für die projizierte Präsentationen, wie Dias |
| screen | Verwendet für Computer-Bildschirme, Tablets, Smartphones usw. |
| speech | Verwendet für Screenreadern , dass "reads" die Seite laut |
| tty | Veraltete. Wird für die Medien einen festen Zeichenraster verwenden, wie Fernschreiber und Terminals |
| tv | Veraltete. Verwendet für TV-ähnliche Geräte |
Media-Funktionen
| Wert | Beschreibung |
|---|---|
| aspect-ratio | Das Verhältnis zwischen der Breite und der Höhe des Darstellungs |
| color | Die Anzahl der Bits pro Farbkomponente für das Ausgabegerät |
| color-index | Die Anzahl der Farben kann das Gerät angezeigt werden |
| device-aspect-ratio | Das Verhältnis zwischen der Breite und der Höhe der Vorrichtung |
| device-height | Die Höhe der Vorrichtung, beispielsweise ein Computerbildschirm |
| device-width | Die Breite der Vorrichtung, wie beispielsweise ein Computerbildschirm |
| grid | Ob das Gerät ein Raster oder Bitmaps |
| height | Die Darstellungshöhe |
| max-aspect-ratio | Das maximale Verhältnis zwischen der Breite und der Höhe des Anzeigebereichs |
| max-color | Die maximale Anzahl von Bits pro Farbkomponente für das Ausgabegerät |
| max-color-index | Die maximale Anzahl der Farben kann das Gerät angezeigt werden |
| max-device-aspect-ratio | Das maximale Verhältnis zwischen der Breite und der Höhe der Vorrichtung |
| max-device-height | Die maximale Höhe der Vorrichtung, wie beispielsweise ein Computerbildschirm |
| max-device-width | Die maximale Breite der Vorrichtung, wie beispielsweise ein Computerbildschirm |
| max-height | Die maximale Höhe des Anzeigebereichs, beispielsweise ein Fenster-Browser |
| max-monochrome | Die maximale Anzahl von Bits pro "color" auf eine monochrome (greyscale) Vorrichtung |
| max-resolution | Die maximale Auflösung des Geräts, mit dpi oder dpcm |
| max-width | Die maximale Breite der Anzeigefläche, wie beispielsweise ein Fenster-Browser |
| min-aspect-ratio | Das minimale Verhältnis zwischen der Breite und der Höhe des Anzeigebereichs |
| min-color | Die minimale Anzahl von Bits pro Farbkomponente für das Ausgabegerät |
| min-color-index | Die minimale Anzahl von Farben kann das Gerät angezeigt werden |
| min-device-aspect-ratio | Das minimale Verhältnis zwischen der Breite und der Höhe der Vorrichtung |
| min-device-width | Die Mindestbreite der Vorrichtung, wie beispielsweise ein Computerbildschirm |
| min-device-height | Die Mindesthöhe der Vorrichtung, wie beispielsweise ein Computerbildschirm |
| min-height | Die Mindesthöhe der Anzeigefläche, wie ein Browser-Fenster |
| min-monochrome | Die minimale Anzahl von Bits pro "color" auf eine monochrome (greyscale) Vorrichtung |
| min-resolution | Die minimale Auflösung des Geräts, mit dpi oder dpcm |
| min-width | Die minimale Breite der Anzeigefläche, wie beispielsweise ein Fenster-Browser |
| monochrome | Die Anzahl der Bits pro "color" auf eine monochrome (greyscale) Vorrichtung |
| orientation | Die Ausrichtung des Ansichtsfenster (landscape or portrait mode) |
| overflow-block | Wie funktioniert das Ausgabegerät Griff Inhalte, die die Ansichtsfenster entlang der Blockachse überläuft (added in Media Queries Level 4) |
| overflow-inline | Kann Inhalte, die die Ansichtsfenster entlang der Inline - Achse gescrollt werden überläuft (added in Media Queries Level 4) |
| resolution | Die Auflösung des Ausgabegeräts, mit dpi oder dpcm |
| scan | Der Scanvorgang der Ausgabevorrichtung |
| update-frequency | Wie schnell kann das Ausgabegerät die Darstellung des Inhalts ändern (added in Media Queries Level 4) |
| width | Die Darstellungsbreite |
Mehr Beispiele
Beispiel
Verwenden Sie die @ media-Regel ansprechende Design machen:
@media only screen and (max-width: 500px) {
.gridmenu
{
width:100%;
}
.gridmain
{
width:100%;
}
.gridright {
width:100%;
}
}
Versuch es selber " Verwandte Seiten
CSS Tutorial: CSS Media Queries