2 | „Responsive“ ist doof …


… es lebe „Adaptive“

von Mario (Kommentare: 0)

Um ein Adaptives-Design zu erstellen und dieses anschließend erfolgreich umzusetzen, ist es sinnvoll sich das Grundprinzip zu veranschaulichen.

  • Alle Elemente haben eine feste Höhe und Breite
  • Alle Elemente werden „Float:left; display:block;“ angeordnet
  • Elemente können mit Wrappern zusammengefasst werden, für die vorher gesagtes gilt
  • Innerhalb der Elemente können weitere Elemente mit „position:absolute;“ beliebig positioniert werden

Das finale Erscheinungsbild der Seite und die Anordnung der Elemente wird durch die Breite eines Wrappers bestimmt. Dieser Wrapper kann entweder ein „div“ sein, welches alle Elemente umschließt und somit eine exakte Breite definiert werden kann, oder aber auch einfach die Breite des Browserfensters.

Hier die Code-Basis aus der wir eine kontrollierte adaptive Seite entwickeln werden:

HTML

<body>
	<div class=“page_wrapper“>
		<div class=“content_wrapper“>
			<div class=“box“> 1 </div>
			<div class=“box“> 2 </div>
			<div class=“box“> 3 </div>
			<div class=“box“> 4 </div>
		</div>
	</div>
</body>

CSS:

.page_wrapper{
    display:block;
    overflow: hidden;
}
.content_wrapper{
    background-color: #FFF;
    box-shadow: 0 2px 2px 0 rgba(0,0,0,0.2);
    display:inline-block;
    margin: 25px 0 0 0;
}
.box{
    width: 300px;
    height: 300px;
    margin: 10px 10px 10px ;
    display: block;
    float: left;
    position: relative;
    overflow: hidden;
    background-color: pink;
}

Die Ausgangssituation erklärt

Das Grundgerüst besteht, in unserem Beispiel, aus vier Elementen „box“ mit definierten Abmessungen, die sich nebeneinander anordnen je nachdem wie breit das Browserfenster ist. Die vier Elemente werden durch das Element „content_wrapper“  gruppiert. Dieses erzeugt auch den weißen Hintergrund. Der „content_wrapper“ ist wiederum eingebettet in das Element „page_wrapper“ welcher uns später dazu dienen wird die Ausgabe kontrolliert zu gestalten.

Die Kontrolle übernehmen

Nachdem die grundsätzliche Struktur geschaffen ist, gilt es nun das Erscheinungsbild bewusst zu bestimmen. Der „page_wrapper“ dient in diesem Beispiel dazu, festzulegen bis zu welcher minimalen Fensterbreite die vier Content Boxen nebeneinander angezeigt werden. Das Beispiel geht davon aus, dass hier ein Wert von 1280px gewählt wird und später alle Inhalte mittig zentriert ausgegeben werden sollen.

.page_wrapper{
    display:block;
    overflow: hidden;
                     
    width: 1280px;
    margin: 0 auto;
}

Um die Darstellung für die kleineren Monitorbreiten einzurichten, benötigen wir nur noch zwei Mediaquerys und zwei Zeilen CSS und die adaptive Umsetzung ist fertiggestellt.

/*Tablet*/
@media (max-width: 1280px){
    .page_wrapper{width: 640px;}
}

/*Phone*/
@media (max-width: 640px){
    .page_wrapper{width:320px;}
}

Zurück

Einen Kommentar schreiben