@media screen and (min-width: xxxpx) problem

    Hallo liebe Woltlab Gemeinde,

    Ich habe ein Problem mit der Media screen and (min-width: xxxpx) Angabe.


    Ich habe eine Animation auf mein Logo im Header, diese möchte ich nun in jeder Bildschirm Auflösung anpassen.

    Da ich selbst eine Auflösung von 2560x1440px und diese Bildschirme auch immer mehr werden, wollte ich das gerne auch auf die Größe anpassen. Also nicht nur bis 1920px


    Leider funktioniert das nicht ganz und es spinnt immer rum.

    Ich habe z. B.

    Code
    @media screen and (max-width: 768px) {
Animation
}
@media screen and (max-width: 1920px) {
Animation
} 
@media screen and (min-width: 2560px) {
Animation
}

    Eingegeben, doch egal was ich auf max oder min setze nimmt er jedesmal entweder die Animation von 1920px oder halt die 2560px Animation.

    Die (1920px) Animation sieht auf dem 2560px Bildschirm natürlich nicht richtig aus und umgekehrt.


    Was mach ich falsch, oder wie muss ich umschreiben damit er dies richtig darstellt?


    Danke im voraus für die Antworten

    Die Reihenfolge ist falsch herum. CSS ist kaskadenartig, d. h. nachfolgender Code kann vorherigen Code überschreiben (gleiche Gewichtung vorausgesetzt).


    Bei dir verhält sich das bei einem Display mit einer Breite von 1440px beispielsweise so:


    @media screen and (max-width: 768px) – trifft zu.

    @media screen and (max-width: 1920px) – trifft zu.

    @media screen and (min-width: 2560px) – trifft nicht zu.


    Sowohl das erste als auch das zweite trifft hier zu. Da aber das zweite später im Code vorkommt (und vermutlich die identische Gewichtung bezüglich des Selektors hat), überschreibt sie das erste Vorkommen.


    Lösung: Gehe immer von oben nach unten vor, hier also von groß nach klein:

    @media screen and (min-width: 2560px)

    @media screen and (max-width: 1920px)

    @media screen and (max-width: 768px)


    Alternativ arbeite nur mit min-width (empfehlenswert, hier dann von klein nach groß):

    Lasse das @media screen and (max-width: 768px) weg und schreibe die Animation ohne einen @media-Query.

    @media screen and (min-width: 769px)

    @media screen and (min-width: 2560px)

    Du müsstest dann schon mit „min“ und „max“ gleichzeitig arbeiten, um es einzuschränken.


    Als Beispiel:

    Sonst greift auch bei einem Smartphone die Anweisung mit „max-width: 1920px“, wenn du die nicht zusätzlich mit z.b. „min-width: XXXXpx“ einschränkst, so dass sie für Smartphones nicht mehr passt.

    Ah ok, danke euch ihr beiden. Da muss ich mal gucken ob ich das in der falschen Reihenfolge habe.

    Es geht nicht nur um die Animation, es ist auch die Größe und die Position des Logos in den verschiedenen Auflösungen :thumbup:

Participate now!

Don’t have an account yet? Register yourself now and be a part of our community!

Register Yourself Login