Media queries funktioniert nicht
Weiß jemand, warum mein media queries code nicht funktioniert ?
<div class="box"></div>
.box {
background-color: red;
width: 100%;
height: 50px;
}
@media only screen and (max-device-width: 768px) {
.box {border: 5px solid blue;}
}
Du musst angemeldet sein, um einen Kommentar abzugeben.
Verwenden Sie
(max-width: 768px)
statt(max-device-width: 768px)
. Sehen Sie den Unterschied zwischenmax-device-width
/max-width
erklärt hier.Hinzufügen einer Ansicht, wenn Sie wollen, dass die Medien-Abfrage, um auf mobilen Geräten arbeiten:
AKTUALISIERTES BEISPIEL HIER
Weiter Lesen: Ein pixel ist nicht ein pixel-Viewport width und screen width (mdn)
Sorry Leute, aber diese Frage wurde nur moot: Firefox Dev edition habe gerade ein upgrade und verändert, wie das Gerät Bildschirme angezeigt werden: Sie können nicht mehr wählen, Bildschirm, die Größe von Pixeln mit Hilfe eines drop-down-box, haben Sie jetzt, wählen Sie den Namen des Geräts, das seinen Abmessungen angezeigt.
Habe ich lange Probleme gehabt, wenn Firefox hat ein update herausgegeben, während ich den browser geöffnet ist.
Den regulären Firefox-browser mit firebug ist jetzt besser. Einige Themen beschäftige ich mich mit ist, dass wenn ich eine Grenze wie "min-width 320px" FDE nur führt die änderung zu einer größeren min, sagen 380px. Dies ändert sich nicht in der aktualisierten Auflage.
max-device-width
vs.max-width
. FF Dev hatte das Gerät dropdown-seit ein paar Versionen jetzt.