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

cols 1 2 3

px 68 160 252 */

@media only screen and (max-width: 767px) {
body {
width: 252px;
padding: 48px 34px 60px;
}
}

/* Wide Mobile Layout: 480px.
Gutters: 24px.
Outer margins: 22px.
Inherits styles from: Default Layout, Mobile Layout.
------------------------------------------------------------
cols 1 2 3 4 5

px 68 160 252 344 436 */

@media only screen and (min-width: 480px) and (max-width: 767px) {
body {
width: 436px;
padding: 36px 22px 48px;
}
}

Listing 4.5 Die CSS-Definitionen für das Mobile Layout des Less Frameworks

Das ist auch schon alles. Das Framework kommt bewusst sehr puristisch daher. Im
nächsten Schritt werden Sie das Raster mit Leben füllen.

Das Raster im Einsatz - Vorbereitungen

Nachdem Sie nun die Grundlagen des Rasters und des CSS-Codes erlernt haben, heißt
es nun, dieses einzusetzen. Zu diesem Zweck erstellen Sie eine Seite mit etwas Text
und einem Bild. Die Anordnung dieser beiden Elemente wird sich automatisch, je
nach Bildschirmgröße, anpassen.

Der HTML-Code ist recht einfach und sieht wie folgt aus:

<figure>
<img src="bilder/landschaft.jpg" />
</figure>