Ich habe eine Frage zum Thema Media Queries

[marcelgerard]

Hallo Leute,

ich beschäftige mich schon länger mit dem Thema Media Queries und habe dazu noch eine Frage. Ich weiß nämlich nicht, wie man es einsetzen kann oder es nutzt, wenn z.B bei der Desktop Version und der Mobile Version sich die Struktur der z.B div Container stark verändert.

Sagen wir ich baue eine Navigation und in der Desktop Version ist das Logo links zu sehen, daneben einige Menü-Punkte und rechts ein Login-Button. In der Mobile Version aber soll es anders aussehen. Da hat man das typische Mobile-Menü (nennt man das Toggle Menü?) und das Logo soll in der Mitte sitzen, der Login-Button bleibt rechts. Nach meinen Kenntnissen hätte man hier ja zwei verschiedene HTML (div Container) Strukturen.

Bisher fällt mir hier nur ein, eben zwei html Navigationen zu bauen und sie jeweils für die Endgerät Version mit "display: none" zu verstecken oder eben die gebrauchte Version anzuzeigen oder geht man hier ganz anders vor.

Ich bin da gerne für Tipps und Hilfe dankbar, damit ich das in Zukunft richtig machen kann. Ich hoffe meine Erklärung bez. Beispiel ist verständlich.

LG Marcel

 

[Aaron3219]

Nein eine andere Navigation zu schreiben und display: none zu setzen ist ein Ansatz, den man eigentlich vermeiden sollte.
Der Punkt von media-queries ist es, dass CSS so zu verändern, dass es für jede Bildschirmgröße responsive ist.
Sprich: Die Grundstruktur sollte i.d.R. gleich bleiben. Z.B. die Anordnung von Containern ist bei Desktop nebeneinander und bei mobile devices untereinander.

Sowas funktioniert bei deinem Menü eigentlich auch. Da kannst du mit floats (auch wenn ich generell floating vermeiden würde), Grids, Flexboxen und wenn dein Menü eine feste Höhe hat, könnte man sogar mit absoluten positionen arbeiten und nur dein Logo wird normal mittig gesetzt.

 

[marcelgerard]

Hmm okay, muss ich mal gucken wie ich das mache. Sollte man grundsätzlich nicht mit display none arbeiten oder kann man es für kleinere Sachen verwenden z.B nur einen Link ausblenden oder etwas ausblenden was in der Mobile Version oder umgekehrt nicht zu sehen sein soll?

 

[Aaron3219]

Hmm okay, muss ich mal gucken wie ich das mache. Sollte man grundsätzlich nicht mit display none arbeiten oder kann man es für kleinere Sachen verwenden z.B nur einen Link ausblenden oder etwas ausblenden was in der Mobile Version oder umgekehrt nicht zu sehen sein soll?

Wenn du willst, dass ab einer bestimmten Bildschirmbreite/höhe etwas nicht mehr zu sehen sein soll, kannst du natürlich mit display: none arbeiten. Es ging mir darum, dass man keinen Code doppelt gemoppelt haben soll, nur weil man nicht weiß, wie man sein CSS richtig anpasst.

 

[marcelgerard]

Ja da hast du recht, macht Sinn. Jetzt wo @Sempervivum das mit dem flex und order sagt klingelts bei mir wieder. Das hatte ich schon mal gelesen. Das schau ich mir mal an.