Media Queries: Unterschied zwischen den Versionen
Aus Wikizone
(Die Seite wurde neu angelegt: „ == Links == http://wiki.selfhtml.org/wiki/CSS/Media_Queries == Überblick == Mit Media Queries kann man die Darstellung einer HTML Seite für verschiedene …“) |
|||
| Zeile 31: | Zeile 31: | ||
(Schlüsselwort):optional Längenangabe oder neues Schlüsselwort | (Schlüsselwort):optional Längenangabe oder neues Schlüsselwort | ||
Ein Medienmerkmal wird notiert, indem innerhalb von runden Klammern ein Schlüsselwort notiert wird. Diesem Schlüsselwort folgt optional ein Doppelpunkt sowie eine Längenangabe oder ein weiteres Schlüsselwort. | Ein Medienmerkmal wird notiert, indem innerhalb von runden Klammern ein Schlüsselwort notiert wird. Diesem Schlüsselwort folgt optional ein Doppelpunkt sowie eine Längenangabe oder ein weiteres Schlüsselwort. | ||
| + | |||
| + | === Notation === | ||
| + | Beispiel vollständige Notation | ||
| + | (orientation: landscape) | ||
| + | |||
| + | Beispiel kurze Notation | ||
| + | (color) | ||
| + | Das Ausgabegerät soll Farbe darstellen können | ||
| + | |||
| + | Zusätzlich gibt es bei manchen Merkmalen Präfixe | ||
| + | min- | ||
| + | max- | ||
| + | Beispiel: | ||
| + | min-width | ||
| + | |||
| + | == Beispiele == | ||
| + | HTML | ||
| + | <pre> | ||
| + | <link rel="stylesheet" href="kompakt.css" media="(orientation: portrait)"> | ||
| + | |||
| + | <style type="text/css" media="(color)"><!-- Farbangaben. --></style> | ||
| + | |||
| + | @import 'layout.css' (min-width: 50em); <!-- em bezieht sich auf die Standartschriftgröße des Browsers --> | ||
| + | |||
| + | </pre> | ||
| + | CSS | ||
| + | <pre> | ||
| + | </pre> | ||
Version vom 10. Dezember 2013, 13:26 Uhr
Links
http://wiki.selfhtml.org/wiki/CSS/Media_Queries
Überblick
Mit Media Queries kann man die Darstellung einer HTML Seite für verschiedene Ausgabemedien optimieren.
Beispiel HTML:
<link rel="stylesheet" href="bildschirm-stylesheet.css" media="screen"> <link rel="stylesheet" href="druck-stylesheet.css" media="print">
Ohne Angabe des media Attributes gilt der Standardwert "all".
Auch innerhalb der CSS Datei läßt sich dies verwenden: Beispiel CSS:
/* CSS-Regeln für alle Ausgabegeräte */
@media print {
/* zusätzliche CSS-Regeln für Drucker */
}
Medienmerkmale
(Schlüsselwort):optional Längenangabe oder neues Schlüsselwort
Ein Medienmerkmal wird notiert, indem innerhalb von runden Klammern ein Schlüsselwort notiert wird. Diesem Schlüsselwort folgt optional ein Doppelpunkt sowie eine Längenangabe oder ein weiteres Schlüsselwort.
Notation
Beispiel vollständige Notation
(orientation: landscape)
Beispiel kurze Notation
(color)
Das Ausgabegerät soll Farbe darstellen können
Zusätzlich gibt es bei manchen Merkmalen Präfixe
min- max-
Beispiel:
min-width
Beispiele
HTML
<link rel="stylesheet" href="kompakt.css" media="(orientation: portrait)"> <style type="text/css" media="(color)"><!-- Farbangaben. --></style> @import 'layout.css' (min-width: 50em); <!-- em bezieht sich auf die Standartschriftgröße des Browsers -->
CSS
