Bekomme Responsive-Design nicht hin bearbeitet von Gunnar Bittersmann 28.11.2019 13:18 @@Markus Steffen Rolf ja schon eine Layoutmöglichkeit gezeigt, hier nun eine andere – die einfachere: **CSS Grid**. Da legt man (fast) alles fürs Containerelement fest; die Kindelemente muss man gar nicht anfassen. Wie Rolf schon sagte, kann `body` oder `main` das Containerelement sein. In [meinem Beispiel](https://codepen.io/gunnarbittersmann/pen/GRRVxXp) ist es `main`. > Bei einem PC soll eine Grafik 2/3 des Bildschirms einnehmen (volle Höhe, 66% der Breite), daneben (den restlichen 33%) soll Text dargestellt werden. ~~~css main { display: grid; grid-template-columns: 2fr 1fr; gap: 1em; } ~~~ teilt den Container in zwei Spalten, wobei die erste (`2fr`) doppelt so breit ist wie die andere (`1fr`). Damit der Text nicht am Bild klebt, etwas Zwischenraum (`gap`) dazwischen. > Der Text soll eine Mindestbreite haben, damit er sich nicht zusammenschiebt, wenn das Fenster skaliert wird. Kleine Abwandlung: ~~~css main { display: grid; grid-template-columns: 2fr minmax(15em, 1fr); gap: 1em; } ~~~ legt für die zweite Spalte eine Mindestbreite von `15em` fest. > Die Grafik soll sich automatisch skalieren bis zu einer Mindestbreite/Höhe, ~~~css img { width: 100%; height: auto; } ~~~ > dann soll die Grafik und der Text untereinander dargestellt werden. In *Mobile-first*{:@en}-Denke: *Erst* must du gar nichts tun, weil untereinander schon das Verhalten ohne Zutun ist. *Dann*, ab einer bestimmten Viewportbreite (in meinem Beispiel `40em`) soll’s anders sein. Also obige Regel in ein *media query*{:@en} gepackt. (Und wie Rolf sagte: in `em`!) ~~~css @media (min-width: 40em) { body { display: grid; grid-template-columns: 2fr minmax(15em, 1fr); gap: 1em; } } ~~~ Das war’s dann auch schon. Der Rest ist Schmuck am Kleid. Kein Schmuck hingegen: > ~~~html, bad > <!DOCTYPE html> > <html> > ~~~ Da fehlt die Angabe der Sprache. `<html lang="de">`{:.language-html} für Deutsch. LLAP 🖖 -- *„Man kann sich halt nicht sicher sein“, sagt der Mann auf der Straße, „dass in einer Gruppe Flüchtlinge nicht auch Arschlöcher sind.“ „Stimmt wohl“, sagt das Känguru, „aber immerhin kann man sich sicher sein, dass in einer Gruppe Rassisten nur Arschlöcher sind.“* —Marc-Uwe Kling
Bekomme Responsive-Design nicht hin bearbeitet von Gunnar Bittersmann 28.11.2019 16:28 @@Markus Steffen Rolf ja schon eine Layoutmöglichkeit gezeigt, hier nun eine andere – die einfachere: **CSS Grid**. Da muss legt man (fast) alles fürs Containerelement fest; die Kindelemente muss man gar nicht anfassen. Wie Rolf schon sagte, kann `body` oder `main` das Containerelement sein. In [meinem Beispiel](https://codepen.io/gunnarbittersmann/pen/GRRVxXp) ist es `main`. > Bei einem PC soll eine Grafik 2/3 des Bildschirms einnehmen (volle Höhe, 66% der Breite), daneben (den restlichen 33%) soll Text dargestellt werden. ~~~css main { display: grid; grid-template-columns: 2fr 1fr; gap: 1em; } ~~~ teilt den Container in zwei Spalten, wobei die erste (`2fr`) doppelt so breit ist wie die andere (`1fr`). Damit der Text nicht am Bild klebt, etwas Zwischenraum (`gap`) dazwischen. > Der Text soll eine Mindestbreite haben, damit er sich nicht zusammenschiebt, wenn das Fenster skaliert wird. Kleine Abwandlung: ~~~css main { display: grid; grid-template-columns: 2fr minmax(15em, 1fr); gap: 1em; } ~~~ legt für die zweite Spalte eine Mindestbreite von `15em` fest. > Die Grafik soll sich automatisch skalieren bis zu einer Mindestbreite/Höhe, ~~~css img { width: 100%; height: auto; } ~~~ > dann soll die Grafik und der Text untereinander dargestellt werden. In *Mobile-first*{:@en}-Denke: *Erst* must du gar nichts tun, weil untereinander schon das Verhalten ohne Zutun ist. *Dann*, ab einer bestimmten Viewportbreite (in meinem Beispiel `40em`) soll’s anders sein. Also obige Regel in ein *media query*{:@en} gepackt. (Und wie Rolf sagte: in `em`!) ~~~css @media (min-width: 40em) { body { display: grid; grid-template-columns: 2fr minmax(15em, 1fr); gap: 1em; } } ~~~ Das war’s dann auch schon. Der Rest ist Schmuck am Kleid. Kein Schmuck hingegen: > ~~~html, bad > <!DOCTYPE html> > <html> > ~~~ Da fehlt die Angabe der Sprache. `<html lang="de">`{:.language-html} für Deutsch. LLAP 🖖 -- *„Man kann sich halt nicht sicher sein“, sagt der Mann auf der Straße, „dass in einer Gruppe Flüchtlinge nicht auch Arschlöcher sind.“ „Stimmt wohl“, sagt das Känguru, „aber immerhin kann man sich sicher sein, dass in einer Gruppe Rassisten nur Arschlöcher sind.“* —Marc-Uwe Kling
nicht angemeldet
