Layoutbereich responsive der gesamten Seite mit Erkennung mobiler Geräte
Der Scrollbalken vom Browser erscheint nicht.
Der untere Layoutbereich hat eine Größe von 100% der Breite und 100% der Höhe des Bildschirms. Der obere Layoutbereich wurde scrollbar gemacht und hat eine Breite von 99% und eine Höhe von 90% mit einem Abstand von 41 Pixeln nach oben für meine Navigationsleiste.
Der Inhalt ist responsive und passt sich jedem Bildschirm an. Schiebt das Browser-Fenster zusammen, um den Effekt zu sehen.
In diesem Textfeld wurde die Schrift auf 2em und auf eine line-height von 30px gestellt. Hier geht es zu meinem Tutorial. Diese Seite erkennt ein mobiles Gerät und stellt den Viewport automatisch um.
Das Bild ist ebenfalls responsive eingestellt und wird sich entsprechend der Fenstergröße anpassen. Die Originalgröße vom Bild ist 960 x 305 Pixel.
Bild von: bilder.n3po.com
Beispiel einer Tabelle auf 50% Seitenbreite
