it-swarm.com.de

Medienabfragen werden mit falscher Breite ausgelöst

Ich baue eine responsive Seite und die Medienabfragen werden mit der falschen Breite ausgelöst. Ich benutze Chrome.

@media screen and (max-width: 1200px) {
 .logo-pic {
    display: none;
}
}

Zum Beispiel funktioniert diese Regel nur, wenn sie mit der falschen Größe ausgelöst wird. Diese Regel wird bei 1320px ausgelöst und nicht bei 1200px . Ich habe das Meta-Tag für HTML installiert. Es scheint, dass die Medienanfrage 100 Pixel oder mehr Pixel weiter als normalerweise ausgelöst wird.

<meta name="viewport" content="width=device-width, initial-scale=1">

Ich habe die vorherige responsive Site überprüft, die ich erstellt habe, und diese Haltepunkte werden korrekt ausgelöst. Ich habe den Browser auf verschiedenen Websites getestet und die Medienanfragen sind ebenfalls in Ordnung. 

Ich habe eine ähnliche Frage zum Stack-Überlauf gefunden, die aber unbeantwortet blieb.

Medienabfragen-Haltepunkt bei falschem Wert

Sie sind sich nicht sicher, was das Problem ist?

42
swollavg

Dies ist häufig der Fall, wenn Sie das Browserfenster auf eine andere Größe als 100% eingestellt haben. Wählen Sie in Ihrem Browser das Dropdown-Menü "Ansicht" und stellen Sie sicher, dass es auf 100% eingestellt ist. Wenn Sie die Ansicht vergrößern oder verkleinern, werden Medienabfragen unangemessen ausgelöst.

Und mach dir keine Sorgen darüber, dass du dich verlegen fühlst. Es ist wahrscheinlich passiert oder wird jedem passieren, aber nur einmal.


Um dieses Problem zu vermeiden, sollten Sie in Betracht ziehen, Ihre Medienabfragen mit relativen Einheiten (em oder rem statt px) zu definieren.


Sie können auch festlegen, dass die Browser-Zoomstufe beim Laden der Seite mit JavaScript auf 100% eingestellt wird. 

document.body.style.webkitTransform =  'scale(1)';
document.body.style.msTransform =   'scale(100)';
document.body.style.transform = 'scale(1)';
document.body.style.zoom = screen.logicalXDPI / screen.deviceXDPI;
138
davidcondrey

Nur eine kurze Ergänzung, um zu verhindern, dass andere weiter suchen, auch wenn die Antwort hier gegeben wird.

Mein Zoom war bereits auf 100% gesetzt, und das Problem war immer noch da .. Wenn Sie das Gleiche erfahren, ist die Antwort einfach: Setzen Sie Ihren Zoom auf 90% und wieder auf 100% will ich bin.

3
Pieter

Haben Sie iframes (oder Modals oder kleinere Fenster), die dieselbe CSS-Tabelle mit Ihrer Medienabfrage laden? In diesem Fall handelt es sich um ein Cache-Problem, und Sie müssen die CSS-Datei mit einem dummen Parameter wie dem folgenden verknüpfen:

<link href="myCss.css?iframe=1" />

Um die css-Datei als neue Datei zu laden, anstatt die zwischengespeicherte Version zu nehmen ... hoffe ich bin klar :)

2
Pouki

Nach einer Stunde der Frustration endete ich mit diesem Thread. Am Ende wurde mir klar, dass ich versehentlich Min-Height anstelle von Min-Width verwendet hatte:

@media screen and (min-height: $sm) { }

anstatt...

@media screen and (min-width: $sm) { }

Nur eine Erinnerung, um schnell zu überprüfen, ob Sie das gleiche Problem wie ich face Palm hatten, es ist spät.

0
AdheneManx

Ein weiterer Zusatz. Nach einer Stunde Debugging wurde mir klar, dass ich mehrere Medienabfragen codiert hatte. Da css-Dateien von oben nach unten ausgeführt werden, habe ich die vorherige Medienabfragelogik überschrieben.

@media (max-width: 700px) {
 .some-class { background-color: red; }
};

// This will override the above styling (assuming max-width logic is true)
@media (max-width: 800px) {
 .some-class { background-color: yellow; }
};
0
Amir

Schauen Sie sich Ihre Einheiten an: rem, em, px.

Ich hatte gerade dieses Problem und es lag daran, dass meine Basisschriftgröße 10px ist und ich max_width: 102.4rem in die Medienabfrage eingefügt habe. Die Aktivierung erfolgt jedoch um 1600px statt erwarteter 1024px.

Es aktiviert sich immer noch bei 1600px bei mir mit 102.4em, funktioniert jedoch wie erwartet, wenn ich 1024px verwende.

Hier ist ein Artikel, der über alles spricht, worauf ich hinweise:

https://zellwk.com/blog/media-query-units/

Ich habe die am besten gewählte Antwort zuerst verpasst, weil ich das Problem mit rem nicht px hatte. Die Wurzel des Problems scheint jedoch die Einheit zu sein.

0
agm1984