Responsive Design flexible Container

**maxpress** · 09.11.2015, 10:42

Hallo zusammen,

ich probiere mich gerade mal ein wenig im Responsive Design und hätte mal eine Frage.

Gibt es eine Möglichkeit, Container anzulegen, die sich je nach Auflösung flexibel verschieben und auch die Größe ändern?

Hier mal eine Veranschaulichung:

hochformat.jpg
querformat.jpg

Ich habe mich ein wenig mit der Grid-Technik auseinandergesetzt.
Ist es überhaupt möglich, in einer Zeile (siehe Hochformat) 2, 3, 4 oder (siehe Querformat) 1, 2, 3, 4 unterzubringen. Sodass sich die Position und die Größe der Container dem Format anpassen.

Vielleicht hat ja jemand von euch kreativen Köpfen einen Rat für mich.
Ich würde mich sehr freuen

beste Grüße
Armin

**dazzle89** · 10.11.2015, 07:44

Falls ich deine Frage richtig verstehe... genau darum geht es doch beim Responsive Webdesign.

Mit Hilfe von Media Queries sorgst du dafür, dass Elemente bei bestimmten Browserbreiten andere CSS-Anweisungen erhalten.

So kannst du z.B. sagen, dass ein div bei einer Auflösung über 1200px (=Breakpoint) floatet und nur 50% breit ist, während es bei unter 1200px nicht mehr floatet und die gesamte Breite einnimmt.

Das würde so aussehen:

HTML-Code:

@media only screen and (min-width: 1200px) {
   div {
      float: left;
      width: 50%;
   }
}

@media only screen and (max-width: 1199px) {
   div {
      float: none;
      width: 100%;
   }
}

**tab** · 10.11.2015, 09:33

Wenn wir schon von "flexibel" sprechen kannst du dir auch mal das Konzept der flexbox (CSS3) mal anschauen, durchaus interessante Sache die schöne Möglichkeiten ohne großen Aufwand bietet. Das kann durchaus auch eine Alternative zur bisher verwendeten Technik mit floats sein.