Medienabfragen funktionieren nicht

Question

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;} 
} 

http://jsfiddle.net/N9mYU/

Answer 1

würden Sie (max-width: 768px) statt (max-device-width: 768px) verwenden. Siehe den Unterschied zwischen max-device-width/max-width erklärt here.

ein Ansichtsfenster hinzufügen, wenn Sie die Medienabfrage wollen auf mobilen Geräten arbeiten:

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

UPDATED EXAMPLE HERE

@media only screen and (max-width: 768px) { 
    .box { 
     border: 5px solid blue; 
    } 
} 

Weiterführende Literatur: A pixel is not a pixel/Viewport width and screen width (mdn)

Answer 2

Sorry Leute, aber diese Frage strittig nur wurde : Firefox Dev Edition hat gerade ein Upgrade durchgeführt und die Anzeige der Geräte geändert: Sie können die Bildschirmgröße nicht mehr auswählen b y Pixel unter Verwendung einer Dropdown-Box; Sie müssen nun den Gerätenamen auswählen, dessen Abmessungen angezeigt werden.

Ich hatte lange Probleme, wenn Firefox ein Update herausgegeben hat, während ich den Browser geöffnet habe.

Der reguläre Firefox-Browser mit Firebug reagiert jetzt besser. Einige der Probleme, mit denen ich es zu tun habe, sind, dass wenn ich ein Limit wie "min-width 320px" festlege, FDE die Änderung nur bei einem größeren min, sagen wir 380px, durchführt. Dies ändert sich in der aktualisierten Ausgabe nicht.