Dienstag, Februar 18, 2020

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

http://jsfiddle.net/N9mYU/

InformationsquelleAutor user2013488 | 2014-01-29

2 Kommentare

  1. 9

    Verwenden Sie (max-width: 768px) statt (max-device-width: 768px). Sehen Sie den Unterschied zwischen max-device-width/max-width erklärt hier.

    Hinzufügen einer Ansicht, wenn Sie wollen, dass die Medien-Abfrage, um auf mobilen Geräten arbeiten:

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

    AKTUALISIERTES BEISPIEL HIER

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

    Weiter Lesen: Ein pixel ist nicht ein pixel-Viewport width und screen width (mdn)

  2. -2

    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.

    • Diese Frage ist nicht irrelevant. Können Sie noch die Größe Ihres Browsers, ohne mit Dev-tools. Noch ist diese Frage Fragen Sie über die dev-tools. Die ursprüngliche Frage war, weil der max-device-width vs. max-width. FF Dev hatte das Gerät dropdown-seit ein paar Versionen jetzt.

Kostenlose Online-Tests