@ media Screen CSS funktioniert nicht

Lesezeit: 2 Minuten

Benutzer-Avatar
Benutzer2798091

Ich habe den folgenden Code zu meiner style.css-Datei in meinem WordPress-Design hinzugefügt, aber es funktioniert nicht. Ich möchte, dass sich der Körperhintergrund für Bildschirmbreiten zwischen 768 und 1024 Pixel ändert

CSS:

@media screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
{ 
    body {
        background: #fff;
        border-top: 2px solid #DDDDDD;
    }
}

Benutzer-Avatar
NoobEditor

Möglicherweise haben Sie Probleme mit der Reihenfolge der Medienabfrage, in der Sie die Stile erwähnt haben

Überprüfen Sie diese Geigeändern Sie die Browserbreite, um die Medienabfrage in Aktion zu sehen

@media screen and (max-width : 1500px) {
    body {
        background: #000;
        border-top: 2px solid #DDDDDD;
    }
}

@media screen and (min-width : 768px) and (max-width : 1024px) {
    body {
        background: #fff;
        border-top: 2px solid #DDDDDD;
    }
}

Diese Geige funktioniert gut, aber wenn Sie die Reihenfolge der Medienabfragen ändern es wird nicht funktionieren … versuchen Sie es selbst!

CSS wählt immer den zuletzt deklarierten Stil aus, wenn mehrere Stile für ein Attribut gefunden werden.

für zB:

@media (max-width: 1024px) {
  body {
    background: black;
  }
}

@media (max-width: 768px) {
  body {
    background: white;
  }
}

zum 765px ( da beide mq diese Breite abdecken ) Farbe ausgewählt wäre white

  • Danke das hat funktioniert. Ich habe gerade max-device-width in meinem Code in max-width geändert

    – Benutzer2798091

    26. Dezember 2013 um 8:18 Uhr

Eine der möglichen Lösungen ist das Einschließen

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

Zu head Schild

Manchmal kann es vorkommen, dass das Hinzufügen von px am Ende der Zahl übersehen wird

    @media screen and (max-width: 1024)

Dies wird nicht funktionieren, daher sollte px wie folgt hinzugefügt werden

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

Versuchen

@media only screen and (min-width: 768px) and (max-width: 1024px) {

}

Benutzer-Avatar
mina abdi

Sie können auch eine andere Datei erstellen wie: smallScreen.css und fügen Sie es mit diesem Code direkt in Ihr Head-Tag unter Ihrem Haupt-Stylesheet ein:

<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" media="only screen and (max-width:768px) "href="/smallScreen.css" />

dann können Sie auch Stil in der neuen Datei hinzufügen, wenn “nur bildschirm und…” funktioniert nicht, Sie können vermeiden, Folgendes zu verwenden: nur

1176620cookie-check@ media Screen CSS funktioniert nicht

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy