Responsive Website
Dieses Beispiel zeigt ein responsives Webdesign,
das ich mit NOF 2015 erstellt habe und das hier als Beispiel dienen soll.
Bilder von bilder.n3po.com
Auch Bilder werden entsprechend der Bildschirmauflösung verkleinert
Weiter Beispiele:
- Responsive Slick Navigation
- Responsive Klappleisten mit fixierter Position
- Responsive Klappleisten mit Media-Query (+ Slider-Skript für Footer)
- Responsive Klappleisten mit Media-Query und CMS Inhalt (+ Slider-Skript für Footer und Navi)
- Responsive jQuery Accordion
- Responsive SmartMenus horizontal
- Responsive SmartMenus horizontal mit Hamburger Button
- Responsive Hintergrund-Bilder, Beispiele ‘contain’ und ‘cover’
- Responsive SmartMenus vertikal
- Responsive Layoutbereich
- Responsive Layoutbereich mit responsivem Slider
- Responsive Beispiel mit Google Maps
- Responsive Beispiel erstellt mit NOF 12
- Responsive Beispiel mit Formular
- Responsive Beispiel mit Parallax Effekt
- Responsive Beispiel mit responsive Video
- Responsive Beispiel mit Tabelle
Auf dieser Seite sind alle Bereiche für mobile Geräte optimiert und in Prozent angegeben. Dieser Text hat eine Breite von 80%, jedoch maximal 800px und steht linksbündig.
- margin: auto
- max-width: 800px
- width: 80%
- Diese Seite enthält eine responsive Text-Navigation nach diesem Beispiel, die sich hier ab 800px Display-Breite auf eine vertikale Navigation ändert. Lest hierzu mein Tutorial zur responsiven Navigationsleiste.
Diese Seite hat keinen Layoutbereich.
Sie wird dagegen nur mit einer Style-Anweisung im <body> responsive.
Diese responsive Website ist für mobile Geräte optimiert,
was Ihr am Link unten testen könnt.
