Html-Lernen mit dem Chris

Responsive Design

Grundsätzlich bestehen Abstände aus Mediatype und optional auch aus mehreren Mediafeatures wie „width, height oder color“, um bestimmte Ausgabemerkmale für unterschiedliche Medien zu bestimmen.

„Media Queries“ können für unterschiedliche Gerätetypen im HTML-Dokument über das „Tag“ eingebunden werden.
Dazu muss neben den notwendigen Standardangaben der Wert „screen“ zu dem Attribut „media“ notiert werden. Wird dort nichts angegeben, gilt der Standardwert all.

Mögliche Werte


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

all: alle Geräte
handheld: PDAs oder Mobiltelefone mit kleinen Bildschirmen
print: Drucker
tv: Fernseher oder ähnliche Geräte
aural: Sprachbrowser, die den Text der Webseite vorlesen (Es gibt auch Befehle für Blindenschrift bzw. Brailledrucker)
projection: Projektoren und ähnliche Geräte
screen: Herkömmliche Computer/Notebook Bildschirme

Man kann also für jeden Gerätetyp eine eigene Css-Datei erstellen.
In sehr großen Projekten wird diese Methode auch oft angewandt, da der Server immer nur die Css-Datei ausliefert die benötigt wird.

Ein anderes Konzept ist das der Breakpoints

Hier werden nicht Medientypen notiert, sondern bestimmte Pixelgrößen, die für die Anzeige auf unterschiedlichen Endgeräten einen Fluchtpunkt bieten. Verwendet das Gerät eine bestimmte Anzahl von Pixeln, wird der Inhalt entsprechend dargestellt. So wird für 320 bis 759 Pixel ein einspaltiges Layout gewählt, das auch auf Handys angezeigt werden kann, während Tablets mit 760 bis 979 zwei Spalten darstellen können.

Wie viele Breakpoints gesetzt werden, ist dem Webmaster überlassen. Breakpoints können sowohl in der HTML- als auch in der CSS-Datei gesetzt werden.

Wir nutzen in unserem Kurs nur die Css-Variante und können auch nur das grundsätzliche Konzept anwenden.

Es ist ratsam, will man die Suchmaschinen zufrieden stellen, sich mit diesem Thema sehr genau auseinander zu setzten, da Diese auch darauf achten, ob die Seiten „responsive“ sind oder nicht.

Folgende Angaben sind für das Verständnis von Media Query nötig.

Große Bildschirme


@media only screen and (min-width:1440){

	element {
		eigenschaft:wert
	}
}

Desktop & Laptops


@media only screen and (min-width:1224){
	element {
		eigenschaft:wert
	}
}

Smartphones


@media only screen and (min-device-width:320px) and (max-device-width:480px){
	element {
		eigenschaft:wert
	}
}

Pads (Landscape)


@media only screen and (min-device-width:768px) and (max-device-width:1024px) and
(orientation: landscape){
	element {
		eigenschaft:wert
	}
}

Pads(Portrait)


@media only screen and (min-device-width:768px) and (max-device-width:1024px) and
(orientation:portrait){
	element {
		eigenschaft:wert
	}
}

Portrait oder Landscape?

Da es auf dem Smartphone mit Portrait und Landscape zwei unterschiedliche Ansichtsformate zur Darstellung des Inhaltes gibt, können Sie mit „orientation“ die Merkmale „height“ und „width“ miteinander vergleichen.
Wenn „height“ also größer als „width“ ist, besitzt die Darstellung den Wert „portrait“, im anderen Fall den Wert „landscape“.