CSS3 @media Abfrage
Beispiele
Wenn das Dokument weniger als 300 Pixel Breite ist die Hintergrund-Präsentation (background-color) zu ändern:
@media Bildschirm und (max-width: 300px) {
body {
background-color: hellblau;
}
}
body {
background-color: hellblau;
}
}
Versuchen »
Definitionen und Verwendung
Verwenden Sie @media Abfragen können Sie verschiedene Stile für verschiedene Medientypen definieren.
@media kann für verschiedene Bildschirmgrößen verschiedene Stile eingestellt werden, besonders wenn Sie Design ansprechende Seiten festlegen müssen, @ media sehr nützlich ist.
Wenn Sie die Browsergröße des Prozesses zurückzusetzen, wird die Seite neu rendern die Seite basierend auf der Breite des Browsers und Höhe.
Browser-Unterstützung
Die Zahlen in der Tabelle geben Unterstützung @media Regeln erste Browser-Versionsnummer.
| Regel | |||||
|---|---|---|---|---|---|
| @media | 21 | 9 | 3.5 | 4.0 | 9 |
CSS-Syntax
@media Media und | nicht | nur (Medien - Funktion) {
CSS-Kodex;
}
CSS-Kodex;
}
Sie können auch verschiedene Stylesheets für verschiedene Medien verwenden:
<Link rel = "stylesheet" media = "media und | nicht | nur (Medien - Funktion)" href = "mystylesheet.css">
Medientyp
| Wert | Beschreibung |
|---|---|
| alle | Für alle Geräte |
| aural | Veraltet. Für Sprache und Sprachsynthesizer |
| Blindenschrift | Veraltet. Braille Ausrüstung in berührungs Feedback verwendet |
| erhaben | Veraltet. Blind-Druckvorrichtung zum Drucken |
| Hand | Veraltet. Für Handheld-Geräte oder kleinere Geräte wie PDA und kleine Telefon |
| Für Drucker und Druckvorschau | |
| Projektion | Veraltet. Für Projektionstechnik |
| Bildschirm | Für Computer-Bildschirme, Tablet-PCs, Smartphones und dergleichen. |
| Rede | Angewandt auf Screen-Reader und andere Sound-Equipment |
| tty | Veraltet. Für das Zeichenraster, wie der Telegraph, Endgeräte und begrenzten Charakter des tragbaren Geräts zur Festsetzung |
| Fernseher | Veraltet. Für TV und Web TV |
Media-Funktionen
| Wert | Beschreibung |
|---|---|
| Aspekt-Verhältnis | Definieren Sie das Ausgabegerät im sichtbaren Bereich der Seite Breite zu Höhe Verhältnis |
| Farbe | Definieren Sie das Ausgabegerät in jeder Gruppe die Anzahl der Farbvorlage. Wenn es nicht ein Farbgerät ist, ist der Wert gleich 0 |
| Farbindex | Die Anzahl der Einträge in der Farbnachschlagtabelle wird in der Ausgabevorrichtung definiert. Wenn Sie nicht über eine Farbtabelle verwenden, ist der Wert gleich 0 |
| Gerät Aspektverhältnis | Bildschirm Definition Ausgabegerät sichtbar Breite zu Höhe Verhältnis. |
| Gerätehöhe | Bildschirm Definition Ausgabegerät sichtbare Höhe. |
| Gerätebreite | Bildschirm Definition Ausgabegerät sichtbare Breite. |
| Gitter | Ausgabegerät abfragen, ob das Netz oder Gitter verwendet. |
| Höhe | Definieren Sie das Ausgabegerät im sichtbaren Bereich der Seitenhöhe. |
| max-Aspekt-Verhältnis | Bildschirm Definition Ausgabegerät sichtbar maximale Verhältnis von Breite zu Höhe. |
| max-Farbe | Definieren Sie die maximale Anzahl von Ausgabegeräten jeden Satz von Farbvorlage. |
| max-color-Index | Die maximale Anzahl der Einträge in der Farbnachschlagtabelle wird in der Ausgabevorrichtung definiert. |
| max-device-Aspekt-Verhältnis | Bildschirm Definition Ausgabegerät sichtbar maximale Verhältnis von Breite zu Höhe. |
| max-device-Höhe | Bildschirm definieren die Ausgabegeräte sichtbar auf die maximale Höhe. |
| max-device-width | Bildschirm Definition Ausgabegerät maximal sichtbare Breite. |
| max-height | Definieren die Ausgabevorrichtung im sichtbaren Bereich der maximalen Höhe der Seite. |
| max-Monochrom | Wird in einem monochromen Rahmen definiert Puffer pro Pixel enthält, ist die maximale Anzahl von Monochromoriginal. |
| max-Auflösung | Die maximale Auflösung definiert das Gerät. |
| max-width | Definieren die Ausgabevorrichtung im sichtbaren Bereich der maximalen Breite der Seite. |
| min-Aspekt-Verhältnis | Definieren Sie das Ausgabegerät im Bereich der Seite sichtbar minimale Verhältnis von Breite zu Höhe. |
| min-Farbe | Definieren Sie das Ausgabegerät jede eingestellte minimale Anzahl der Farbvorlage. |
| min-Farbe-Index | Die Mindestanzahl der Einträge in der Farbnachschlagtabelle wird in der Ausgabevorrichtung definiert. |
| min-device-Aspekt-Verhältnis | Bildschirm definieren die Ausgabegeräte sichtbar minimale Verhältnis von Breite zu Höhe. |
| min-device-width | Bildschirmausgabegeräte minimale sichtbare Breite definiert. |
| min-device-Höhe | Mindest definieren den Bildschirm sichtbare Höhe des Ausgabegeräts. |
| min-height | Definieren Sie das Ausgabegerät im sichtbaren Bereich der Mindesthöhe der Seite. |
| min-Monochrom | Die minimale Anzahl von Farbvorlagen in einem monochromen Bildpuffer enthält pro Pixel definiert |
| min-Auflösung | Die Mindestauflösung definiert das Gerät. |
| min-width | Definieren die Ausgabevorrichtung im sichtbaren Bereich der minimalen Breite der Seite. |
| einfarbig | Ist in einem Monochrom-Frame-Puffer definiert enthält pro Pixel Monochrom Originalnummer. Wenn es nicht ein monochromes Gerät ist, ist der Wert gleich 0 |
| Orientierung | Definieren die Ausgabevorrichtung im sichtbaren Bereich der Seitenhöhe größer oder gleich der Breite. |
| Auflösung | Definieren Sie die Auflösung des Geräts. Wie zum Beispiel: 96dpi, 300dpi, 118dpcm |
| Scan | Scanning-Prozess-Definition-TV Art von Ausrüstung. |
| Breite | Definieren Sie das Ausgabegerät im sichtbaren Bereich der Seitenbreite. |
Weitere Beispiele
Beispiele
Verwenden Sie @media Abfragen Responsive Design zu erstellen:
@media nur Bildschirm und (max-width : 500px) {
.gridmenu {
Breite: 100%;
}
.gridmain {
Breite: 100%;
}
.gridright {
Breite: 100%;
}
}
.gridmenu {
Breite: 100%;
}
.gridmain {
Breite: 100%;
}
.gridright {
Breite: 100%;
}
}
Versuchen »
Verwandte Seiten
CSS Tutorial: CSS - Medientypen