Ultimas Toolbox
Tools zur Website Optimierung.

Test Responsiver Websites

Css Level 3 bietet eine neue Möglichkeit auf bestimme Eigenschaften des Ausgabegerätes (zB. Monitor, Drucker, Smartphones, Tabletts) für eine Website einzugehen. So kann die Darstellung auf die unterschiedlichen Ausgabegeräte optimiert werden, für eine hohe Benutzerfreundlichkeit.

Responsives Design einer Website testen

Responsives Design erstellen

Mediaquery

Über die folgenden drei Möglichkeiten kann man die Mediaqueries nutzen. Die erste Möglichkeit ist für xHTML. Die zweite und dritte Möglichkeit ist für die Nutzung innerhalb eines Css Dokumentes. 

<link rel="stylesheet" media="screen and (color)" href="example.css" />
@media screen and (min-device-width: 600px) { … }
@import url(example.css) screen and (color);

Beispiel 1: Mediaqueries in einem Css Dokument

Dieses Beispiel zeigt wie man die Mediaqueries innerhalb eines Css Dokumentes nutzen kann.

/* globale css Angaben */
html{}
body{color:#333}
…

@media screen and (min-device-width: 300px) {
	/* Angaben für Displays mit einer mindestbreite von 300px */
	…
}
@media screen and (min-device-width: 960px) {
	/* Angaben für Displays mit einer mindestbreite von 960px */
	…
}
@media print {
	/* Angaben für den Druck */
	…
}

Beispiel 2: Css Dokumente über HTML einbinden

Die Angaben für die unterschiedlichen Geräte können in verschiedene Css Dokumente ausgelagert werden. Der Browser lädt entsprechend dem verwendeten Gerät die Style Sheets. 

<html>
<head>
	<!-- Css Dokument für alle Geräte -->
	<link rel="stylesheet" media="all" href="example.css" />
	
	<!-- Css Dokument für Geräte mit einer mindestbreite von 300px -->
	<link rel="stylesheet" media="screen and (min-device-width: 300px)" href="smartphones.css" />
	
	<!-- Css Dokument für Geräte mit einer mindestbreite von 960px -->
	<link rel="stylesheet" media="screen and (min-device-width: 960px)" href="tabletts.css" />
	
	<!-- Css Dokument für den Druck -->
	<link rel="stylesheet" media="print" href="print.css" />
</head>
<body>
....
</body>
</html>

Beispiel 3: Mehrere Abhänigkeiten kombinieren

Es können mehrere Angaben kombiniert werden. Ein logisches und (&&) wird durch and repräsentiert. Ein logisches oder (||) wird durch ein , repräsentiert. 

@media screen and (min-width: 400px) and (max-width: 700px) { … }
@media screen and (color), projection and (color) { … }

Media Typen

all
Für alle Ausgabegeräte, dieser Wert ist der Standardwert wenn nichts angegeben wird.
@media (min-width: 600px) { … }
screen
Vorgesehen für Computer-Bildschirme.
print
Vorgesehen für den Druck und der Ansicht in einer Druckvorschau.
aural
Vorgesehen für Sprachausgaben.
braille
Vorgesehen für Braille-Geräte mit taktiler Rückmeldung.
handheld
Vorgesehen für Handheld-Geräte.
projection
Vorgesehen für Projektoren.
tty
Vorgesehen für Medien mit einem Zeichenraster wie Fernschreiber, Terminals oder tragbare Geräte mit begrenzten Darstellungsmöglichkeiten.
tv
Vorgesehen für TV-ähnliche Geräte (geringe Auflösung, Farbe, begrenzte Scrollfähigkeit).

Media Funktionen

width
Die Breite des Ausgabegerätes in Pixel. (Viewport)
height
Die Höhe des Ausgabegerätes in Pixel. (Viewport)
device-width
Die Gerätebreite beschreibt die Breite des Ausgabegerätes in Pixel.
device-height
Die Gerätehöhe beschreibt die Höhe des Ausgabegerätes in Pixel.
orientation
Mögliche Werte: portrait oder landscape.
Der Wert von orientation ist portrait wenn die Höhe größer oder gleich der Breite ist. Anderenfalls ist es landscape.
aspect-ratio
Das Seitenverhältnis das sich aus width und height ergibt.
device-aspect-ratio
Das Seitenverhältnis das sich aus device-width und device-height ergibt.
color
Die Anzahl der Farben.
color-index
Dieser Wert beschreibt die Anzahl der Einträge in der Farbtabelle des Ausgabegerät. Hat das Gerät keine Farbtabelle, ist der Wert Null.
monochrome
Für einfarbige Ausgabegeräte.
@media all and (monochrome) { … }
resolution
Die Auflösung für den Druck in DPI oder DPCM.
@media print and (min-resolution: 300dpi) { … }
scan
Mögliche Werte: progressive | interlace
Das scan Merkmal beschreibt den scan Prozess von 'TV' Ausgabegeräten.
grid
Die grid Eigenschaft wird dazu verwendet, um abzufragen, ob es sich um ein Raster-oder Bitmap Ausgabegerät handelt. Wenn das Ausgabegerät Gridbasierend ist (z. B. ein tty Terminal), wird der Wert 1 sein. Andernfalls ist der Wert 0.

Min- und max- Präfix

Die Werte width, height, device-width, device-height, aspect-ratio, device-aspect-ratio, color, color-index, monochrome und resolution können einen Präfix min- oder max- besitzen. Min verhält sich wie > und max wie <.
Dieses Beispiel währe für alle Displays gültig mit einer Anzeigebreite zwischen 300px und 900px. 

@media screen and (min-width: 300px) and (max-width: 900px) { … }
© 2023 - Ultima-Project.net