@media (min-width: ...)

[Walter P.]

Hallo,

in Eurem holy grail, sind min-width-Angaben. Wie kann ich an einem PC die entsprechenden view-Größen einstellen/testen?

Schönen Gruß

Walter

[Auge]

Hallo

in Eurem holy grail, sind min-width-Angaben. Wie kann ich an einem PC die entsprechenden view-Größen einstellen/testen?

• Firefox (1): Menü => Weitere Werkzeuge => Bildschirmgrößen testen + Werkzeuge für Webentwickler
• Firefox (2): Extras => Browser-Werkzeuge => Bildschirmgrößen testen + Werkzeuge für Webentwickler
• Chromium/Chrome: Menü => Weitere Tools => Entwickertools (dort der Button links neben „Elemente“)
• Edge: Menü => Weitere Tools => Entwicklungstools (zweiter Button von links)

Tschö, Auge

[Gunnar Bittersmann]

@@Auge

in Eurem holy grail, sind min-width-Angaben. Wie kann ich an einem PC die entsprechenden view-Größen einstellen/testen?

• Firefox (1): Menü => Weitere Werkzeuge => Bildschirmgrößen testen + Werkzeuge für Webentwickler
• Firefox (2): Extras => Browser-Werkzeuge => Bildschirmgrößen testen + Werkzeuge für Webentwickler
• Chromium/Chrome: Menü => Weitere Tools => Entwickertools (dort der Button links neben „Elemente“)
• Edge: Menü => Weitere Tools => Entwicklungstools (zweiter Button von links)

Was ich mache:

• Entwicklertool öffnen, links positionieren und dann die Trennlinie zwischen Entwicklertool und Viewport hin- und herschieben.

🖖 Live long and prosper

[Walter P.]

Was ich mache:

• Entwicklertool öffnen, links positionieren und dann die Trennlinie zwischen Entwicklertool und Viewport hin- und herschieben.

[Walter P.]

@Gunnar

Was ich mache:

• Entwicklertool öffnen, links positionieren und dann die Trennlinie zwischen Entwicklertool und Viewport hin- und herschieben.

Ja, da erkenne ich wann sich das Bild ändert. Wie kommen aber die Angaben im holy graid zustande? Sind die willkürlich oder hat die jemand gemessen an diversen Geräten?

[Auge]

Hallo

• Entwicklertool öffnen, links positionieren und dann die Trennlinie zwischen Entwicklertool und Viewport hin- und herschieben.

Ja, da erkenne ich wann sich das Bild ändert. Wie kommen aber die Angaben im holy graid zustande? Sind die willkürlich oder hat die jemand gemessen an diversen Geräten?

Nein, niemand hat gemessen. Die Grenzen, die man mit @media bestimmt, richten sich nach der Darstellung des Inhalts und nicht nach irgendwelchen Displaygrößen. Davon gibt es einfach viel zu viele.

Tschö, Auge

[Auge]

Hallo

in Eurem holy grail, sind min-width-Angaben. Wie kann ich an einem PC die entsprechenden view-Größen einstellen/testen?

• Firefox (1): Menü => Weitere Werkzeuge => Bildschirmgrößen testen + Werkzeuge für Webentwickler
• Firefox (2): Extras => Browser-Werkzeuge => Bildschirmgrößen testen + Werkzeuge für Webentwickler
• Chromium/Chrome: Menü => Weitere Tools => Entwickertools (dort der Button links neben „Elemente“)
• Edge: Menü => Weitere Tools => Entwicklungstools (zweiter Button von links)

Was ich mache:

• Entwicklertool öffnen, links positionieren und dann die Trennlinie zwischen Entwicklertool und Viewport hin- und herschieben.

… oder so. mit mehreren Bildschirmen habe ich die Entwicklertools aber gerne in einem separaten Fenster. Ich kann zwar immer noch die Breite des Browserfensters ändern, aber so fehlt mir die Kontrolle, die ich mit den dedizierten Tools habe. Funktionieren tut ja beides tuen tun^[1].

Tschö, Auge

---

1. Au ja, und schon sind die Socken kaputt. ↩︎

[Walter P.]

@Gunnar, wenn ich in dem hloy graid angebe

<footer>
	<p>text1</p>
	<p>text2</p>
	<p>text3</p>
</footer>

oder <div>....,

warum stehen die Texte nicht in einer Reihe?

[Rolf B]

Hallo Walter,

warum sollten sie das tun? Zumindest in unserem Holy Grail Beispiel gibt es keine Aufforderung an den Browser, Blockelemente nebeneinander zu stellen.

Im header ist das anders, der ist als eigenes Grid erstellt worden. Im Footer wird mit float:right; clear:right; rumgetrickst, um die Inhalte rechtsbündig zu bekommen, das ist aber auch Technik von vor 2010…

Um im Footer 3 divs nebeneinander zu bekommen, kannst Du den footer zur Flexbox machen.

footer {
   display: flex;
   gap: 1em;
   justify-content: end;
}

Reicht schon. Das gap sorgt für etwas Abstand, und wenn Du die Elemente nicht rechts haben willst, kann justify-content auch weg. Wenn Du willst, dass bei schmalem Viewport die Darstellung untereinander erfolgen soll, kannst Du die Flex-Darstellung entweder über @media steuern oder ein flex-flow: wrap; hinzufügen.

Rolf

[Walter P.]

Hallo Rolf,

schön und gut,

aber erst kürzlich wurde mir grid als bessere/einfachere Alternative zu flex empfohlen.

Und jetzt noch beides verbinden?

Walter

[Rolf B]

Hallo Walter,

warum nicht? Beide Layoutmodelle haben ihre Stärken und beide haben ihre Existenzberechtigung. Niemand sagt, dass Flexbox durch Grid vollständig abgelöst wäre.

Wenn Du jetzt denkst "dann muss ich ja noch mehr lernen" - hm, ja, leider. Hey, ich bin fast 60, ich schaff das auch 😉

Rolf