divs, iframes,flexboxes u.a.

[Auge]

Hallo

Danke für die guten Erläuterungen.
Ich möcht jetzt mit dem grid beginnen.
Auf drweb habe ich ein einfaches Beispiel für das strukturelle Markup gefunden.

Dies ist aber wohl für Desktop-Anwendungen gedacht.
Muss ich also eine zweite Struktue für kleine Displays definieren?

Nein, das musst du nicht. Du bringst die Boxen einfach nur in eine andere Reihenfolge (nur optisch). Dafür bietet sich der Ansatz „Mobile first“ an, der die für das Layout nötigen CSS-Regeln beginnend mit schmal hin zu breit definiert.

Dabei wird zuerst das Layout für den schmalen Viewport eines Smartphones definiert. Typischerweise werden die in deinem Screenshot gezeigten Blöcke in der im HTML-Quelltext vorhandenen Reihenfolge untereinander dargestellt, also muss da außer Abständen nichts eingetragen werden. Die erste Ebene der CSS-Regeln für schmale Viewports beinhaltet auch die sich nicht oder nur in seltenen Fällen verändernden Dinge wie Farben und Schriftgrößen.

Mit einem „Media-Query“, der einen eigenen Block, der eine Bedingung enthält (hier eine Mindestbreite des Viewports), definiert, werden die paar Regeln mit neuen Werten überschrieben oder auch hinzugefügt, die das sich ab dieser Grenze ändernde Layout beschreiben.

Es gilt für breitere Browserfenster (Viewports) nur das hinzuzufügen und zu überschreiben, was für diesen Fall nötig ist.

/*
Es beginnt mit allen möglichen grundsätzlich gültige Regeln
und solchen, die nur für schmale Viewports gedacht sind.
Lasse alles weg, was automatisch schon so ist, wie benötigt.
*/

/*
Es folgen die speziell für breitere Viewports gültigen Regeln.
Der Wert von 36em ist für das Beispiel willkürlich gewählt.
*/
@media screen and (min-width: 36em) {
 body {
   display: grid;
    /* … */
  }
  header {
    /* … */
  }
  /* … */
}

Tschö, Auge