Sie können dies tun, indem Sie die css-Medienfunktion "Ausrichtung" verwenden. Auf diese Weise können Sie Stile abhängig von der Bildschirmausrichtung angeben, unabhängig von der Bildschirmgröße. Sie finden die offizielle w3.org-Definition zu diesem Medien-Feature here. Kombiniert mit den Spezifikationen auf developer.mozilla.org wird dies erklären, wie es funktioniert.
Zitat aus w3.org über die 'Orientierung' Medieneigenschaft:
Die 'Orientierung' Medien-Funktion ist 'Portrait', wenn der Wert der 'Höhe' media Merkmal ist größer als oder gleich auf den Wert der 'Breite' Medienfunktion. Ansonsten ist "Orientierung" "Landschaft".
Eine Anmerkung/Zitat aus developer.mozilla.org über die "Orientierung" -Funktion:
Hinweis: Dieser Wert (dh Hoch- oder Querformat) tut nicht zu tatsächlichen entsprechen Geräteausrichtung. Wenn Sie die Soft-Tastatur bei den meisten Geräten im Hochformat öffnen, wird das Bildfenster breiter als hoch, was dazu führt, dass der Browser Landschaftsstile anstelle von Hochformat verwendet.
So zu wiederholen, ist es nicht eigentlich die Bildschirmausrichtung, die Medienanfragen Portrait- oder Landschafts auslöst. Es ist jedoch das Verhältnis zwischen Höhe und Breite des Bildschirms!Aus diesem Grund ist es auch sinnvoll, die "Orientierungsfunktion" mit nicht mobilen/taktilen Geräten zu verwenden. Daher habe ich eine kleine Demo hinzugefügt, um das Verhalten dieser Medienabfragen zu zeigen.
JSFIDDLE DEMO(versuchen, den Viewport Größe ändern)
Hier sind die repräsentativen Hoch- und Quermedienanfragen Orientierung zu beeinflussen.
@media screen and (orientation:portrait) {
/* Portrait styles */
/*set width to 100px */
}
@media screen and (orientation:landscape) {
/* Landscape styles */
/* set width to 200px*/
}
+1 es funktioniert super! –
einfache und elegante Weise .. Daumen hoch für Sie! – saadk