⬆

Media Queries

Media Query unter Selfhtml Wiki

Mit CSS hat man die Möglichkeit auf verschiedene Ausgabegeräte einzugehen. Hier kann man eine Vielzahl von Kriterien definieren, unter denen die Stylesheets zur Anwendungn kommen. Man unterscheidet hier

Mit einer Kombination aus beiden Kriterien kann man auf eine Vielzahl von Bedingungen und Geräten eingehen. In der heutigen Zeit spielen mobile Devices eine große Rolle und dürfen beim Gestalten von Websites nicht außer acht gelassen werden.

Mit CSS bieten sich hier 2 Lösungen an. Die nicht so vorteilhafte Browserweiche, weil für jedes Ausgabegerät eine extra Stylesheet Datei geschrieben werden muss. Die zweite Lösung besteht darin, die neuen Möglichkeiten von CSS3 mittels @media den Media Queries umzusetzen und somit auf verschiedene Ausgabemedien zu reagieren. In der Praxis sieht das so aus, man definiert ein Basis CSS, dann definiert man man mittels Media Queries einige Bedingungen und führt dort nur die Änderungen auf für bestimmte Medientypen und Medienmerkmale.

Man hat die Möglichkeit für jeden Medientyp eine Stylesheetdatei einzubinden, oder man definiert innerhalb eines Styleblocks den Medientyp. Beachten Sie im letzten Fall die Verschachtelung der geschweiften Klammern.

Medientyp

Mit den Media Types kann man Style Sheets für bestimmte Ausgabegeräte definieren.

a) Beim Einbinden einer externen Stylesheet Datei mittels media="screen" beispielsweise. Auch mehrere Angaben sind kommasepariert möglich media="screen, projection"

<link rel="stylesheet" type="text/css" href="print.css" media="all">
<link rel="stylesheet" type="text/css" href="print.css" media="print">
<link rel="stylesheet" type="text/css" href="screen.css" media="screen">

b) Innerhalb einer Import Anweisung in einem Style-Sheet Element.

<style>
@import url("styles.css") screen;
</style>

c) Innerhalb eines Style Elements oder einer Style Sheet Datei wie im folgenden Beispiel.

@media screen{
  div {background-color: #fa0;}
}
@media print{
  div {background-color: #fff;}
}

 

Die Medientypen sind nicht genau definiert, sondern stellen nur Richtlinien dar.

Medientypen
Medientyp Wahrnehmung Bedeutung
all   Alle Ausgabemedien. Dies ist der Standardwert.
aural gesprochen Ausgabemedien, die sich synthetischer Sprachausgabe bedienen.
braille fühlbar Geräte, auf denen die Braille-Schrift (umgangssprachlich „Blindenschrift“) tastbar wiedergegeben werden kann.
embossed fühlbar Drucker, die Braille-Schrift tastbar auf Papier einprägen.
handheld sichtbar, hörbar, gesprochen Geräte, die üblicherweise in der Hand gehalten werden, einen kleinen Bildschirm besitzen und über wenig Bandbreite verfügen. Palmtops, PDAs, WinCE- Geräte
print sichtbar Drucker, die Inhalte sichtbar auf Papier drucken.
projection sichtbar Geräte, die Inhalte projizieren, Beamer, Overhead Projektor
screen sichtbar, hörbar (Computer-)Bildschirme
speech gesprochen für Sprachsynthesizer gedacht. Die Angabe ist für ein zukünftiges CSS-Modul reserviert und wird bisher (Stand Mai 2014) nicht verwendet, soll aber den Medientyp „aural“ ersetzen.
tty sichtbar Ausgabegeräte mit feststehenden Zeichentypen
tv sichtbar, hörbar TV-Geräte

 

media="print"

Das Schlüsselwort print definiert CSS für die Druckausgabe. Einige sinnvolle Angaben sind, die Hintergrundfarbe auf weiß zu setzen. Schriftfarben, die auf einem weißen Hintergrund nicht mehr lesbar wären, dunkler zu setzen. Elemente wie Navigationen, die in einer Druckausgabe keinen Sinn machen komplett auszublenden.

@media print {
nav {display: none;}
body{background-color: #fff; color: #000;}
}

Medieneigenschaften (media-features)

Mit CSS3 kamen weitere Möglichkeiten hinzu das Ausgabemedium gezielt anzusprechen. Neben verschiedenen Anzeigegrößen gibt es viele weitere Medienmerkmale.

Auch hier kann man die Mediaqueries im Style- oder im Link-Element einsetzen, wie ich es im vorigen Abschnitt aufgeführt habe.

Ein Beispiel einer Stylesheet Einbindung für Bildschirm und einer Viewportbreite von mindestens 1024 Pixeln.

<link rel="stylesheet" media="screen and (min-width: 1024px)" href="desktop.css">

Es gibt folgende Medienmerkmale, eine genauere Beschreibung finden Sie bei Selfhtml

Nicht alle Medieneigenschaften werden von den neueren Browsern unterstützt. So kann man monochrome, scan, grid kaum einsetzen. Auch die Unterstützung für device-aspect-ratio, color, color-index ist noch nicht groß.

Medieneigenschaften
Eingenschaft Bedeutung

Abmessung Einheiten

width
(min- / max-) 		Breite der sichtbaren Ausgabe (Viewport) px, %, em
height
(min- / max-) 		Höhe der sichtbaren Ausgabe (Viewport) px, %, em
device-width
(min- / max-) 		Breite des Displays des Ausgabegerätes oder Breite der gedruckten Seite. Beim iOS Mobile Safari bezieht sich device-width immer auf die kürzere Seite, auch wenn das iPhone im Querformat gehalten wird) px, %, em
device-height
(min- / max-) 		Höhe des Displays des Ausgabegerätes oder Breite der gedruckten Seite. (Beim Mobile Safari/ iOS ist device-height immer die längere Seite.) px, %, em
orientation: Ausrichtung des Ausgabegerätes Querformat entspricht dem Wert landscape. Hochformat wird mit portrait definiert. portrait, landscape
prefers-color-scheme: Farbschema des Betriebssystems siehe auch Kulturbanause / Beispiel no-preference, dark, light
aspect-ratio
(min- / max-) 		Seitenverhältnis der sichtbaren Ausgabe Breite / Höhe, z.B. 16/9, 1280/ 720
device-aspect-ratio
(min- / max-) 		Seitenverhältnis des Ausgabegerätes Breite / Höhe, z.B. 16/9, 1280/ 720
color
(min- / max-) 		Farbtiefe des Ausgabegerätes. Bei Schwarz- Weiß- Geräten ist der Wert für color: 0 (0bits per Color) integer
color-index
(min- / max-) 		Prüft das Ausgabegerät auf die Verwendung von indizierten Farben integer
monochrome
(min- / max-) 		Prüft die Farbtiefe auf monochromen Geräten: monochrome: 0 ist der Wert für nicht monochrome Geräte integer
resolution
(min- / max-) 		Pixeldichte in dpi (dots per inch) oder dpcm (dpcm) dpi, dpcm
scan Bilddarstellungsart auf TV Geräten, Vollbild- (progressive) und Halbbild- (interlace): progressive, interlace
grid Rastereigenschaften Bei Ausgabemedien, die Inhalte in einem Raster darstellen ist der Wert 1, bei einer Bitmap- Darstellung ist der Wert 0. 0,1

Gruppierung und Kombination

selfhtml

Es werden Kriterien abgefragt, die als wahr oder unwahr eingestuft werden. So eine Abfrage nennt man auch Ausdruck. Medienabfragen können gruppiert und kombiniert werden.

Gruppierung oder

Mittels Kommata kann man mehrere Medientypen aufführen. Diese gruppierten Abfragen sind voneinander unabhängig. Wenn eine der abgefragten Medientypen auftritt, werden die Stylesheets auf diesen Medientyp angewendet. Im folgenden Beispiel würde es bei Druckern angewendent und/oder bei Druckern für Braille-Schriften.

@media print, embossed {/*Formate für Print*/}

Schlüsselwort and - alles muss zutreffen

Mit dem Schlüsselwort and kann man mehrere Medienmerkmale definieren, die alle zutreffen müssen, damit der Ausdruck gültig ist. 

@media (min-width: 30em) and (max-width: 60em) { /* Kompaktes Layout */ }

Im folgenden Beispiel gibt es 2 gruppierte Abfragen. Innerhalb der gruppierten Abfrage werden die Kriterien mit and genauer definiert.

@media print and (color), screen and (color) { /* Farbangaben */ }

Schlüsselwort not - Verneinung

Das Schlüsselwort not kann man an den Anfang einer Medienabfrage voranstellen. Es bedeutet, dass man etwas definiert auf dass die Stylesheets nicht angewendet werden sollen. Im folgenden Beispiel werden die Styles auf alle farbigen Ausgabegeräte angwendet, oder anders ausgedrückt auf alle nicht einfarbigen Ausgabegeräte.

@media not all and (monochrome) { /* Farben */ }

Schlüsselwort only

Das Schlüsselwort only sorgt dafür, dass das Stylesheet für   Uralt- Browser verborgen wird. Ältere Browser, würden die CSS Anweisungen ausführen, ohne die Bedingungen zu  berücksichtigen.   

@media [not | only] type1, typ2 and (expr1, exp2)

@media only screen and (max-width: 450px){}

Viewport

Visueller Vieport

Man unterscheidet zwischen dem visuellen Viewport und dem Layout- Viewport. Mit dem visuellen Viewport ist der sichtbare Bereich des Ausgabemediums gemeint. Verkleinert man das Browserfenster, verkleinert sich der Viewport.

Layout Viewport

Als die ersten Smartphones auf den Markt kamen, gab es so gut wie keine Webseiten, die für diese kleinen Viewportgrößen optimiert waren. Daher wurde der Layout Viewport für mobile Geräte erfunden. Für Mobile Safari wurde er auf 960 Pixel gesetzt. Die Webseiten werden auf diesen Smartphones verkleinert dargestellt, so dass eine 960 Pixel breite Webseite die gesamte Breite dieses Layout Viewports einnimmt. Durch Zoomfunktionen kann man die einzelnen Bereiche der Seite vergrößern.
Andere Browserhersteller übernahmen später das Prinzip jedoch mit andereren Größen. Android Webkit 800 Pixel, Opera Mobile 960 Pixel. Mit der Viewport Anweisung verhindert man die automatische Verkleinerung auf Smartphones. Wenn man die Webseite mittels CSS auch für kleine Bildschirmgrößen optimiert hat, sollte sie auf den Smartphones nicht automatisch verkleinert werden. Durch eine Metatag Anweisung oder eine @viewport Anweisung kann man den Layout Viewport anpassen und so eine autmatische Verkleinerung verhindern.

Viewport Metatag

siehe dazu Viewport HTML5-mobile

Der Viewport Metatag wird gebraucht, wenn man die Website für Smartphones und andere Viewports optimiert hat. Ein Viewport Metatag ist folgendermaßen aufgebaut:

<meta name="viewport" content="Viewport Eigenschaften, kommasepatiert aufgeführt">

Eine Website, die man für eine Breite von 800 Pixeln optimiert hat, könnte folgenden Metatag bekommen:

<meta name="viewport" content="width=800px">

Der anfängliche Zoomgrad wird mittels Multiplikator von 0 bis 1 angegeben. Der Wert 1 entspricht 100%. Im folgenden Fall würde die Webseite nicht skaliert, sondern 1:1 dargestellt.

<meta name="viewport" content="width=800, initial-scale=1.0">

Mit min-scale oder max-scale lässt sich das Zoomen einschränken. Mit user-scalable=no kann man es völlig unterbinden. Für eine derart drastische Einschränkung sollten sehr gute Gründe existieren. Es gibt einen iOS5-Orientation Bug für den diese Maßnahme eingesetzt wurde. Mehr dazu http://adactio.com/journal/5088

Der richtige Viewport Befehl für eine responsive, optimierte Webseite

siehe auch Der Viewport das unbekannte Wesen

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Durch die Angabe width=device-width, wird die Breite auf die tatsächliche Viewport Breite gesetzt.

Die Angabe initial-scale=1.0 wird wegen eines iPhone Bugs gesetzt. Würde man die Angabe weglassen, würde beim Drehen des iPhones auf das Querformat die device-width von 320 Pixel beibehalten und somit die Anzeige skaliert, denn das iPhone nimmt als device-width immer die schmalere Seite.

Viewport Metatag Eigenschaften
Viewport Einstellung Werte Definition
width/ height device-width, device-height, [ganze Zahl]px Setzen des Layout-Viewports auf eine feste Größe oder die Größe des virtuellen Viewports
initial-scale Prozent von 0 bis 1 Multiplikator 1 entspricht 100%, 0.5 entspricht 50% Anfangswert des Zooms in der eine Seite aufgebaut wird.
user-scalable yes, no Mit dem Wert no wird die Skalierbarkeit durch den User unterbunden.
minimum-scale / maximum-scale Prozent von 0 bis 1 oder Multiplikator, 1 entspricht 100%, 0.5 entspricht 50% Schränkt die minimale oder maximale Skalierbarkeit ein.

Die CSS @viewport Anweisung

Das Viewport Metatag wurde ursprünglich von Appel Safari erfunden und dann von anderen Browserherstellern übernommen. Es ist nie ein HTML Standard geworden und daher gibt es wohl auch einige abweichende Interpreationsregeln. Außerdem geht es hierbei weniger um HTML sondern vielmehr um eine CSS Angelegenheit.

Die neue CSS Anweisung @viewport soll den Metatag ablösen und hat vergleichbare Eigenschaften.

Achtung! Sie wird im Moment nur von Opera und IE10 unterstützt.

<styles>
@-ms-viewport {width: device-width; zoom:1;}
@-o-viewport {width: device-width; zoom:1;}
@viewport {width: device-width; zoom:1;}
</styles>

Media Queries Breite in em

Wenn man in den Breakpoints die Breite nicht in Pixeln sondern in em angibt, ergibt sich daraus der Vorteil, dass die Media Queries auch beim Zoom des Browsers funktionieren, sogar wenn die Option nur Text zoomen aktiviert ist. Man muss lediglich die Pixel anhand der Basisschriftgröße in em umrechnen.
Die Umrechnung ist einfach Pixelbreite / Basisgröße = Breite in em.
z.B.: 320 Pixel / 16px,em = 20 em.

Pixel
px
em

so sieht`s aus ändern Sie in diesen Beispielen die Größe des Browserfenster, mit der Option nur Text zoomen
das gleiche Beispiel mit Pixeln

Der richtige Breakpoint

Eine typischer Breakpoint für eine Viewport Breite kleiner, gleich 1024 Pixel Breite.

@media only screen and (max-width: 1024px) {
}

Im adaptiven und responsive Layout setzt man Umbruchpunkte / Breakpoints für bestimmte Viewport Größen. Was ist jedoch der richtige Breakpoint? Man findet unter http://www.screensiz.es zwar eine Liste und erkennt da bestimmte Häufigkeiten, aber die können sich schnell ändern. Von daher sollte man den Breakpoint am Layout orientieren.

Man könnte mit der kleinsten Größe anfangen (Mobile first) und vergrößert dann das Browserfenster. Wenn es nicht mehr stimmig ist, setzt man einen Breakpoint. Stimmig ist, was gut lesbar ist.

Gut lesbar ist eine Textlänge von 45 bis 75 Zeichen oder 10 Worte pro Zeile.

 Siehe auch die Artikel auf Kulturbanause :

 

Wenn das Layout sehr komplex ist, werden wahrscheinlich auch mehr Breakpoints benötigt. In der Regel kommt man mit 3 bis 4 Umbruchpunkten aus. Die Pixelangaben im folgenden Beispiel stammen aus Bootstrap. 

  1. kleine Smartphones < 576px 
  2. Smartphones > 576px
  3. Tablets >768px
  4. Desktop > 992px
  5. große Desktops >1200px
  6. sehr große Desktops > 1400px 

Layout Beispiel

Im folgenden Beispiel wird zuerst ein dreispaltiges Layout definiert. Dann wird ein Layout definiert, welches unter einer Viewportbreite von 1024 Pixeln liegt. Hier werden nur die Styles aufgeführt, die sich ändern. In einem dritten Schritt wird das Layout für eine Breite unter 480 Pixeln festgelegt. Man beachte die Verschachtelung innerhalb der geschweiften Klammern. Der Einfachheit halber habe ich hier auf padding verzichtet. Beachten Sie auch, dass die Elemente mit einer outline versehen sind. Diese erzeugt im Gegensatz zu border keinen zusätzlichen Raum, der in die Berechnung mit einbezogen werden muss.

* {margin: 0; padding: 0;}
html{overflow-y: scroll;}
p{padding: 10px;}

nav, article, aside {
	display: block;
	float: left;
	outline: 1px solid #990;
}
nav {
	width: 20%;
	float: left;
}
article {
	width: 60%;
	float: left;
}
aside {
	width: 20%;
}

@media  screen and (max-width: 1024px) {
  article {
	  width: 80%;
  }
  aside {
	  float: none;
	  clear:both;
	  width: 100%;
  }
}

@media  screen and (max-width: 480px) {
  nav, article {
    clear: both;
    float:none;
    width: 100%;
  }
}

so sieht's aus

Mehrspaltiges Layout mit Header und Footer

Im Beispiel wird zuerst ein typisches Layout definiert. Anschließend wird für Tablett und Smartphone mittels Media Queries das Layout für einige Elemente geändert.

so sieht's aus

Wichtig für die Gestaltung sind die

gängige Auflösungen

 

Layout Beispiel fix, fluid, responsive

Layout Mockup, Beispiel fix, Beispiel fluid, Beispiel responisve

Responsive Menüs

Siehe hier

Frameworks & Bootstrap

Das Layout einer Seite zu erstellen ist in heutiger Zeit, wo man es mit vielen unterschiedlichen Anzeigegeräten wie Smartphones, Tabletts, Desktop PC zu tun hat eine komplizierte Aufgabe. Der Webdesigner Community sei dank, gibt es hier einige Lösungen in Form von Frameworks, die man frei benutzen darf und an seine eigenen Bedürfnisse anpassen kann. Vor allen Dingen Bootstrap hat sich hier einen Namen gemacht. Besuchen Sie die Bootstrap Tipps Pastor Pixel, wo ich zusätzlich zu der ausführlichen Hilfestellung von Bootstrap einige Tipps beisteuere. In den Videotutorials erkläre ich die Einzelheiten. Nach dem Einbinden der CSS-, Jquery- und Javascript- Dateien, sollte man das Gridsystem erlernen.

Dreamweaver & Bootstrap

Auch Dreamweaver CC setzt auf das bewährte Framework.
Siehe auch diese informative Seite für den Eintstieg andreasstocker.at | als_Video | webdesign-coach.com

Erster Einstieg Bootstrap Grid

Umleitung auf eine andere Seite

Will man bei kleinerer Bildschirmauflösung auf eine andere Seite umleiten, so ist das mit folgendem Javascript möglich:

<script type="text/javascript">
if (screen.width < 700)
window.location = "version_mobil.html";
</script>

Gerätepixel und CSS Pixel

Vor der Erfindung der hochauflösenden Retina Displays entsprach ein Pixel einem Gerätepixel. Auf dem Iphone 4 mit Retina Display ist das nicht mehr der Fall. Dort haben wir eine Pixeldichte von 2. Das bedeutet, dass die Pixel nur noch die Hälfte der Gerätepixel beanspruchen. Daher wurde die Definition der Pixel geändert. Man spricht nun von CSS Pixeln, welche der Darstellung auf dem Gerät entspricht, aber nicht dem Gerätepixel. Beim Zoomen werden die CSS Pixel vergrößert oder verkleinert.

Man kann hier von einem virtuellen visuellem Viewport sprechen. Für die Media Query Anweisungen sind jedoch virtueller- visueller Viewport und tatsächlicher visueller Viewport identisch.