Gewusst wie: Debuggen von css-inside verschiedenen Medien-Anfragen mit Firebug und Chrome-Developer-tools?
Gewusst wie: Debuggen von css zur Orientierung:portrait in Chrome Developer tools?
Was auch immer ich Schreibe, innen (orientation:portrait) können nicht bearbeitet werden on the fly " von Firebug und Chrome-Developer-tools. Es zeigt immer die normalen Eigenschaften.
/*normal styles here */
#wrap {
width:1024px;
}
@media only screen and (orientation:portrait){
/* portrait styles here */
#wrap {
width:768px;
}
}Schreibe einen Kommentar
Du musst angemeldet sein, um einen Kommentar abzugeben.
"Einem browser oder Gerät bestimmt die Orientierung durch das hören auf die Breite und Höhe des Fensters. Wenn die Höhe größer ist als die Breite der Fenster ist im portrait-Modus. Wenn die Breite größer ist als die Höhe es im landscape-Modus."
Mehr info: http://www.1stwebdesigner.com/css/how-to-use-css3-orientation-media-queries/
Grundsätzlich müssen Sie die Größe Ihrer browser-Fenster, um die hochformatiger Ausrichtung css wirksam.
Wenn Sie zum öffnen von firebug in den browser-Fenster, dh. firebug ist unten, die Höhe des browser-Fensters ändert, wodurch die Ausrichtung zu Querformat, damit Sie verlieren Ihr portrait-Stile. Für beide firebug und chrome developer tools, probieren Sie die tools in Ihrem eigenen Fenster, so dass Sie Ihre browser-Größe ist nicht betroffen.
PS. Ich benutze Firebug für diese Art der Bearbeitung, da können Sie deutlich sehen, die css ändern Sie die Größe des Browsers.
Seit kurzem (Chrome 17), Chrome-DevTools-Anzeige die media-query-Kontext Auswirkungen auf jedes passende CSS-Regel (wenn vorhanden). Während der aktuellen Implementierung nicht aktualisiert die Stile, die auf media-query-Evaluierung Veränderungen (Sie müssen re-wählen Sie die betroffenen Knoten), http://webkit.org/b/74292 Spuren der Anforderung dynamisch zu aktualisieren, die angepassten CSS-Regeln.
Wie Sie sagen, über Sie können die Größe Ihrer browser-Fenster, um die Höhe größer als die Breite, so dass dann die Medien Porträt ist wahr.
Sie können diese url http://robnyman.github.com/matchmedia/ so die Größe des Browsers, aktualisieren Sie diese Seite und Sie werden sehen, wenn die Erkennung von true für Querformat.
Schließlich Es ist nun möglich, in Firefox 16 responsive-Modus. Überprüfen Youtube video hier http://www.youtube.com/watch?v=t07cLJhJkjQ