1. Herzlich willkommen bei WPDE.org, dem grössten und ältesten deutschsprachigen Community-Forum rund um das Thema WordPress. Du musst angemeldet oder registriert sein, um Beiträge verfassen zu können.
    Information ausblenden

media queries funktionieren nicht richtig

Dieses Thema im Forum "Design" wurde erstellt von HolgerGr, 14. August 2017.

  1. HolgerGr

    HolgerGr Well-Known Member

    Registriert seit:
    10. November 2015
    Beiträge:
    93
    Zustimmungen:
    0
    Hallo,

    ich versuche gerade, mein Theme via media queries responsiv zu machen. Dazu habe ich (erst einmal) drei Breakpionts eingetragen. Leider funktiert das Ganze aber nicht so wie ich mir das vorgestellt habe.

    Das div "rechts" soll eine margin-left von 160px. haben. Hatte es beim ursprünglichen css (ohne media queries) auch. Dann habe ich jedoch die Margin für schmalere Displays verringert und das hat zufolge, dass sie nun auch für große Displays verringert ist.

    Hier der entsprechende Code:

    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    Wie man sieht soll bei Displays, die größer oder gleich 1200 Pixel breit sind, eine Margin-left von 160px haben. Erst ab 985px Breite soll margin-left dann nur noch 20px groß sein.

    Allerdings werden immer 20px ausgeführt - auch bei großen Monitoren.

    Hier der Link zur Seite: http://wighty.de/13/

    Wenn ich die Anweisungen umdrehe, also die kleinen Displays oben und die großen darunter notiere, tritt der Fehler nicht auf aber dann funktioniert die ganze Sache gar nicht mehr.

    Hat jemand eine Idee, was ich falsch mache?

    Grüße
    Holger
     
  2. danielgoehr

    danielgoehr Well-Known Member

    Registriert seit:
    13. Juli 2016
    Beiträge:
    2.674
    Zustimmungen:
    128
    Das ist kein Fehler, sondern das korrekte (logische) Verhalten.

    Die Media Queries funktionieren so:

    Der Inhalt der jeweiligen Media-Query Regel gilt immer dann, wenn die Bedingung erfüllt ist. CSS bleibt aber trotzdem hierarchisch. Das heißt, Regeln die weiter unten stehen, überschreiben die vorher gesetzten Werte.

    Wenn du sie so schreibst, wie in deinem Beispiel, gilt immer die untere. Denn die ist ja ebenfalls erfüllt.

    Das heißt, du musst sie umdrehen. Erst die kleinste Bildschirm-Breite, dann die jeweils größere.

    Was meinst du mit "die Seite funktioniert dann gar nicht mehr"?

    Alternativ kannst du für jede Media Query auch min und max Werte angeben. Dann wäre die Reihenfolge quasi egal, weil immer nur genau eine erfüllt sein kann.
     
    #2 danielgoehr, 14. August 2017
    Zuletzt bearbeitet: 14. August 2017
  3. HolgerGr

    HolgerGr Well-Known Member

    Registriert seit:
    10. November 2015
    Beiträge:
    93
    Zustimmungen:
    0
    Vielen Dank

    schwer in Worte zu fassen was passiert wenn ich sie umdrehe. Ich hab's gerade gemacht. Sieh's Dir doch mal bitte an. Wenn ich jetzt den Browser entkopple und zusammenschiebe, habe ich nur an ganz bestimmten Punkten das Ergebnis, das ich haben will. Dazwischen ist alles so, also gäbe es dafür keine Definition. Aber es heißt doch "größer oder gleich" und nicht "exakt".
     
  4. danielgoehr

    danielgoehr Well-Known Member

    Registriert seit:
    13. Juli 2016
    Beiträge:
    2.674
    Zustimmungen:
    128
    Ich bin gerade nur am Handy. Da kann ich nicht viel schieben ;)

    Aber ich schaue es mir gern morgen mal an...
     
  5. HolgerGr

    HolgerGr Well-Known Member

    Registriert seit:
    10. November 2015
    Beiträge:
    93
    Zustimmungen:
    0
    das wäre toll :)
     
  6. SirEctor

    SirEctor Well-Known Member
    Ehrenmitglied

    Registriert seit:
    28. Oktober 2008
    Beiträge:
    12.361
    Zustimmungen:
    427
    Wenn ich es teste, funktionieren die media-queries wie beschrieben. Den ersten media-query hast du aber nicht abgeschlossen. Aber es kommt bei gewissen Breiten zu Fehlverhalten, weil die media-queries mMn falsch gesetzt sind. Das heißt die Breite von #links und #rechts zusammengerechnet ist zu groß. Du musst jeweils padding und margin dazu rechnen.
     
  7. danielgoehr

    danielgoehr Well-Known Member

    Registriert seit:
    13. Juli 2016
    Beiträge:
    2.674
    Zustimmungen:
    128
    Ich habe jetzt nur mal geschaut, was mit besagtem margin-left passiert. Das ist jetzt alles korrekt. Sprich, die Media-Queries ansich funktionieren.
    Dein #rechts bricht halt manchmal um, dazu siehe die Antwort von @SirEctor.
     
  8. HolgerGr

    HolgerGr Well-Known Member

    Registriert seit:
    10. November 2015
    Beiträge:
    93
    Zustimmungen:
    0
    Vielen Dank Euch beiden.
    Ich habe die Breiten für die media Queries von twentysixteen übernommen weil mein Theme auch auf twentysixteen aufbaut.

    Was wären denn geeigente Breiten um die gängigsten Displays abzudecken?
    Wie muss ich die Daten ändern, damit es nicht zu diesen plötzlichen Umbrüchen kommt?

    Gibt es ein Browsertool das mir die genauen Breiten beim Zusammenschieben des Browsers anzeigt? Ich rate da immer rum.

    Und dann noch etwas: Ich verwende u.a. dieses Tool hier um zu überoprüfen, ob meine Einstellungen richtig sind: http://www.responsive-design-test.de/?url=wighty.de%2F13

    Auf der ersten Seite sieht es zwar so aus aber wenn ich auf "Darstellung in weiteren Geräten" klicke, passt es nur noch beim ersten Gerät (1600x992). Darunter befindet sich ein Laptop mit 1280x802 Pixeln Auflösung. Da geht es schon nicht mehr, d.h. die margin-left des divs "rechts" wird nicht kleiner, so dass der Platz nicht ausreicht und das Teil unter das div "links" springt.

    Ich habe nun SirEctors Rat folgends, die Breiten variiert, die bei den media queries eingegeben wurden, habe sie kleiner und größer gemacht. Kein Erfolg.
     
  9. danielgoehr

    danielgoehr Well-Known Member

    Registriert seit:
    13. Juli 2016
    Beiträge:
    2.674
    Zustimmungen:
    128
    Die Media-Queries sind nicht das Problem. Aber die Elemente (#rechts und #links) sind (inkl. Margins und Paddings) breiter als der verfügbare Platz. Dadurch bricht #rechts um.

    Die beiden Elemente dürfen für keine Bildschirmauflösung breiter sein, als das Browser-Fenster.

    Chrome macht das automatisch, sobald die Developer-Tools geöffnet sind (rechts oben im Browser-Fenster)
    Für Firefox gibt es entsprechende Plugins. Ich verwende z.B. Firesizer.

    Wenn ich das richtig sehe, ist die Anzeige des "Tools" korrekt. So sieht deine Seite jeweils aus, wenn man die entsprechende Bildschirmauflösung hat. Was ist denn genau die Frage dazu?
     
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Information ausblenden
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Information ausblenden