Media Queries

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