+- garden of the multiverse (https://garden-of-the-multiverse.de)
+-- Forum: got a secret can you keep it? (https://garden-of-the-multiverse.de/forumdisplay.php?fid=9)
+--- Forum: together we build magic (https://garden-of-the-multiverse.de/forumdisplay.php?fid=14)
+---- Forum: VIP - Lara (https://garden-of-the-multiverse.de/forumdisplay.php?fid=18)
+---- Thema: Responsivität mit media queries (/showthread.php?tid=88)
Responsivität mit media queries - Juliette Butterfield - 22.06.2024
In Zeiten von unterschiedlich großen Bildschirmen und der Verwendung von Smartphones wird Responsivität immer wichtiger und ist im Webdesign mittlerweile etablierter Standard. In Foren hat sich das leider noch nicht durchgesetzt und ich persönlich finde so extra Themes, die alle gestalterischen Elemente ausblenden, alles andere als schön. Das Volumen von Datenpaketen für Internet unterwegs ist mittlerweile auch ausreichend groß, dass man weder auf Bilder, noch auf anderen Schnickschnack verzichten muss - Leute spielen unterwegs Spiele, die mehr MB aufbrauchen, als eine Website, und haben am Ende des Monat immer noch was übrig.
Vorbereitung für MyBB
Damit dein Forum auch mobil bei korrekter Auflösung angezeigt wird und man nicht überall heranzoomen und herumschieben muss, gibt es eine kleine Änderung in der [inline-code]headerinclude[/inline-code], die vorgenommen werden muss. Folgende Zeile einfach hinzufügen:
Code:
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">Desweiteren solltest du einmal im CSS folgendes hinzufügen.
Code:
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}Das bewirkt, dass wir gut mit Prozenten arbeiten können und [inline-code]padding[/inline-code] sowie [inline-code]border[/inline-code] nicht obendrauf gerechnet werden, sondern in [inline-code]width[/inline-code] und [inline-code]height[/inline-code] immer einberechnet sind.
D.h. habe ich eine [inline-code]width[/inline-code] von [inline-code]100px[/inline-code] und [inline-code]padding[/inline-code] von [inline-code]20px[/inline-code] bleibt die Breite bei [inline-code]100px[/inline-code] und wir haben einen inneren Abstand von [inline-code]20px[/inline-code]. Hätten wir die Änderung nicht, hätten wir insgesamt [inline-code]120px[/inline-code]. Beim Arbeiten mit Prozenten sehr lästig.
media queries
Responsivität lässt sich nicht bloß dadurch erzielen, dass wir für alles %, rem oder em verwenden, man kann auch weiterhin mit px arbeiten und auf sogenannte media queries zugreifen. D.h. wir wenden für verschiedene Bildschirm- bzw. Browserfenstergrößen unterschiedliches CSS an. Idealerweise haben wir einmal für alles CSS angegeben und überschreiben dann in den media queries ein paar Dinge für andere Größen.
Reihenfolge & Vorgehen
Nun gibt es zwei unterschiedliche Vorgehensweisen. Wir arbeiten uns vom kleinsten zum größten (mobile first) oder vom größten zum kleinsten. Da Foren in der Regel am Desktop aufgerufen werden, würde ich hier erst mal alles genau darauf anpassen und vielleicht sogar einen gemischten Weg gehen. D.h. ich würde das Theme erst mal auf deine Auflösung anpassen (wahrscheinlich 1920px breit mal 1080px hoch). Und dann würde ich mich einmal hoch und einmal runterarbeiten.
Heranziehen kann man dabei die Größen von Bootstrap. Das erwähne ich deshalb, weil ich es selbst nutze und es sich daher anbietet, das einzuhalten. Wenn man keinen Plan hat, welche Größen man nehmen soll, ist es sicherlich auch gut, das einfach als Orientierung zu nehmen.
Man kann die media queries direkt dort hinzufügen, wo man das Element definiert hat, man kann es aber auch alles in einem Schwung machen. Ich persönlich mach es beruflich so, dass ich ein Element style und direkt auch für kleinere Größen anpasse, also die media queries direkt beim Element hinzufüge (da benutze ich SCSS statt CSS, es ist also übersichtlicher).
Privat hingegen mache ich es so, dass ich mir im ACP an letzter Stelle eine mobile.css erstelle und dort alle media queries drin habe. Hier entwerfe ich Themes für den Desktop und passe diese erst später und nicht direkt an.
Werkzeuge
Im Browser hat man übrigens ein Werkzeug, mit dem man die Größe anpassen kann, ohne jedes mal das ganze Fenster kleinerziehen zu müssen. Einmal mit Strg + Shift + I den Inspektor öffnen (oder Rechtsklick > Untersuchen) und dann wird ein Fenster geöffnet, bei dem du erst mal dein HTML und CSS ansehen kannst. Der Inspektor kommt aber noch mit einem praktischen Tool: Bildschirmgrößen testen. Dafür gibt es recht weit oben ein Symbol, das wie ein Smartphone vor einem Tablet aussieht (oder Strg + Shift + M). Damit kannst du dir deinen Screen innerhalb des Browserfenster zurechtziehen oder auch vorgegebene Größen für bestimmte Tablets oder Smartphones auswählen.
Beispiel
Ich würde in jedem Fall immer mit Prozenten arbeiten, dann muss man nämlich nicht so viel anpassen. Also [inline-code]width: 100%;[/inline-code] ist bei mir absoluter Standard und das einzige, was ich anpasse, ist die [inline-code]max-width[/inline-code]. Das kann dann am Ende so aussehen:
Code:
.container {
width: 100%;
max-width: 1400px;
}
.content {
width: 100%;
padding: 100px;
}
/* screens >= 1930px */
@media (min-width: 1930px) {
.container {
max-width: 1600px;
}
.content {
padding: 120px;
}
}
/* screens < 1400px */
@media (max-width: 1399px) {
.container {
max-width: 1000px;
}
.content {
padding: 80px;
}
}
/* screens < 1200px */
@media (max-width: 1199px) {
.container {
max-width: 800px;
}
.content {
padding: 60px;
}
}Das ermöglicht auch, die Reihenfolge bei der Anordnung von Elementen zu verändern, ohne die Elemente selbst zu verschieben. Das geht nämlich ganz einfach mit [inline-code]order[/inline-code].