HTML5 als Designwerkzeug - Apps mit HTML5 und CSS3: Fur iPad, iPhone und Android - page 137

Durch den ausführlich kommentierten Quelltext des Frameworks können Sie leicht
die Breite ablesen, die Ihre Inhalte füllen sollen, um in das Raster zu passen. Text- und
Bildelement entsprechen jeweils einer Breite von fünf Spalten (436 Pixel). Damit die
Anordnung der beiden Elemente nebeneinander erfolgt, versehen Sie diese noch mit
der Definition float und dem Wert left . Den Abstand zwischen den beiden Elemen-
ten geben Sie mit margin-right bei dem Bildelement an. Dieser Abstand beträgt auf
allen Bildschirmgrößen immer 24 Pixel. Sie sehen, es gibt zwei Konstanten, die Spal-
tenbreite und die Zwischenraumbreite. Zuletzt weisen Sie dem Bild im Bildelement
noch eine Breite von 100 % zu. Dadurch wird das Bild automatisch auf die aktuelle
Spaltenbreite angepasst. Mit der Definition der Höhe ( height ) auf auto wird die Höhe
des Bildes automatisch berechnet. So wird das Seitenverhältnis beibehalten und das
Bild unverzerrt dargestellt.

4

Ein kurzer Retina-Exkurs
Obwohl bei Geräten mit einem hochauflösenden Bildschirm, auch Retina-Display
genannt, die Pixelanzahl das Doppelte beträgt: Der mobile Webbrowser rechnet
trotzdem nur mit der »einfachen« Pixelanzahl. Das heißt, dass auf einem iPad mit
Retina-Display die Media-Query-Angaben, aber auch alle Pixeldefinitionen des Ras-
ters, noch korrekt funktionieren. Das sind doch gute Nachrichten, oder?

Sie haben nun ein einfaches Raster verwendet, um zwei Elemente nebeneinander
anzuordnen. Auf einem Tablet im Hochformat möchten Sie nun die Darstellung
dahingehend anpassen, dass das Bild in voller Größe über dem Text steht. Um dies zu
erreichen, müssen Sie die Darstellung der beiden Elemente im Tablet Layout anpas-
sen. Im Tablet Layout stehen insgesamt acht Spalten zur Verfügung. Bild- und Text-
element sollen nun diese acht Spalten komplett ausfüllen:

figure, article {
width: 712px;
margin: 0px;
}

Mit der Definition der Breite auf 712 Pixel nutzen Sie die gesamte Breite, mit anderen
Worten acht Spalten, aus (Abbildung 4.5).

Gleichzeitig müssen Sie allerdings die Ränder auf 0 Pixel setzen, denn dieser Abstand
wird vom Default Layout vererbt.

Die Anpassung an mobile Endgeräte funktioniert nach dem gleichen Muster. Ergän-
zen Sie einfach den CSS-Code im Mobile Layout oder Wide Mobile Layout um die ent-
sprechenden Maße.