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

Joni Korpi zeigt hier per Kommentierung auf, welche Pixelanzahl für die jeweiligen
Spaltenbreiten vorgesehen ist. Eine einzige Spalte ist 68 Pixel breit, zwei Spalten
(inklusive des Zwischenraums von 24 Pixel) 160 Pixel usw. Mit den Gutters ist der
Zwischenraum zwischen den Spalten gemeint, outer margins beschreiben die Größe
der äußeren Ränder außerhalb des Rasters, die mit padding über die body -Definition
festgelegt sind. Passen Sie die Hintergrund- ( background ) und Textfarbe ( color ) hier
ganz nach Ihren Wünschen an.

4

Dieser Teil wird auch das Standardlayout genannt. Es wird immer dann verwendet,
wenn eine Bildschirmbreite von 991 Pixel überschritten wird. Dieses Layout kommt
z. B. beim Querformat des iPads zum Einsatz.

Im nächsten Teil werden nun Stile für die Anzeige auf einem Tablet im Hochformat
definiert. Der Code dürfte Ihnen bereits bekannt vorkommen. Auch hier wartet das
Less CSS Framework mit einigen Voreinstellungen auf. Die äußeren Ränder werden
angepasst, und die maximale Spaltenanzahl verringert sich. Die Spaltenbreite bleibt
natürlich gleich. Denn das ist ja der Witz des Frameworks.

/* Tablet Layout: 768px.
Gutters: 24px.
Outer margins: 28px.
Inherits styles from: Default Layout.
-----------------------------------------------------------------
cols 1 2 3 4 5 6 7 8

px 68 160 252 344 436 528 620 712 */

@media only screen and (min-width: 768px) and (max-width: 991px) {
body {
width: 712px;
padding: 48px 28px 60px;
}
}

Listing 4.4 Die CSS-Definitionen des »Tablet Layout«

Die folgenden beiden Codeblöcke betreffen die Anzeige auf einem iPhone. Hier wer-
den analog zum Tablet Layout die Stile für eine hoch- und querformatige Darstellung
festgelegt.

/* Mobile Layout: 320px.
Gutters: 24px.
Outer margins: 34px.
Inherits styles from: Default Layout.
---------------------------------------------