Wie kann CSS in verschiedenen Medienabfragen mit den Firebug und Chrome Developer Tools debuggen?

"Ein Browser oder Gerät bestimmt die Ausrichtung durch Abhören der Breite und Höhe des Fensters. Wenn die Höhe größer als die Breite ist, befindet sich das Fenster im Hochformat. Wenn die Breite größer als die Höhe ist, befindet es sich im Querformat. "

Weitere Informationen: Ссылка

Im Grunde müssen Sie die Größe Ihres Browserfensters ändern, damit die Ausrichtung der Portait-Ausrichtung wirksam wird.

Wenn Sie den Firebug innerhalb des Browserfensters öffnen, z. Firebug ist am unteren Rand, die Höhe des Browserfensters ändert sich und die Ausrichtung wird zur Landschaft, so dass Sie Ihre Portraitstile verlieren. Versuchen Sie, die Tools in den beiden Debugging-Tools firebug und chrome in einem eigenen Fenster zu starten, damit die Größe Ihres Browsers nicht beeinträchtigt wird.

PS. Ich würde Firebug für diese Art der Bearbeitung verwenden, weil Sie deutlich sehen können, dass sich die CSS ändert, wenn Sie die Größe des Browsers ändern.

Seit kurzem (Chrome 17) zeigt Chrome DevTools den Medienabfragekontext an, der jede übereinstimmende CSS-Regel (falls vorhanden) betrifft. Während die aktuelle Implementierung die Stile für die Bewertung von Medienabfrageänderungen nicht aktualisiert (Sie müssen den betroffenen Knoten erneut auswählen), Ссылка Spuren die Anforderung, die übereinstimmenden CSS-Regeln dynamisch zu aktualisieren.

Wie oben erwähnt, können Sie die Größe Ihres Browserfensters so ändern, dass die Höhe größer als die Breite ist, damit das Medienporträt wahr ist. Sie können diese URL Ссылка verwenden, um die Größe des Browsers zu ändern, diese Seite zu aktualisieren, und Sie werden sehen, ob für das Hochformat True erkannt wird.

Endlich jetzt Im reaktionsfähigen Modus von Firefox 16 ist es möglich. Überprüfen Sie Youtube-Video hier Ссылка