it-swarm.com.de

cSS-Erweiterung basierend auf der Bildschirmgröße im Hoch- oder Querformat?

Ich habe zwei Divs, die nebeneinander schweben. Was ich möchte, ist, dass es eine Breite von 100px hat, wenn Sie es im Hochformat betrachten und sagen wir 200 px im Querformat. Dies geschieht tatsächlich auf einem mobilen Gerät angezeigt.

Das Div wird also im Querformat erweitert und im Hochformat etwas verkleinert.

Irgendwelche Ideen?

15
Xtian

Das ist zwar nicht mit CSS2 möglich, aber Sie könnten mit Javascript das tun, was Sie möchten (Bildschirmgröße auslesen usw.).

Ich bin nicht sicher, welche Technologie Sie verwenden, aber CSS3 bietet genau das, was Sie mit CSS3 Media Queries wollen.

Mit CSS3 haben Sie so etwas Spaß (oder Sie können auch die Breite angeben, beispielsweise 200px):

/* Portrait */
@media screen and (orientation:portrait) {
   /* Portrait styles here */
}
/* Landscape */
@media screen and (orientation:landscape) {
   /* Landscape styles here */
}

Check out diese Beispielseite für weitere Erklärungen oder diese .

EDITNur weil ich diese Seite heute gefunden habe: Hardbroiled CSS3 Media Queries - sehr gutes Schreiben.

52
Dennis G

Sie können dies tun, indem Sie die CSS-Funktion "Orientierung" verwenden. Auf diese Weise können Sie Stile abhängig von der Bildschirmausrichtung festlegen, unabhängig von der Bildschirmgröße. Die offizielle w3.org-Definition dieser Medienfunktion finden Sie hier . In Kombination mit den Spezifikationen auf developer.mozilla.org wird dies erklärt, wie es funktioniert.


Zitat von w3.org zum Medienelement ‘Orientation’):

Die Medienfunktion "Orientierung" ist "Hochformat", wenn der Wert der Medienfunktion Höhe 'größer oder gleich dem Wert der ' Breite 'Medienfunktion. Ansonsten ist "Orientierung" "Landschaft".

Ein Hinweis/Zitat von developer.mozilla.org über die "Orientierungsfunktion"):

Hinweis: Dieser Wert (z. B. Hochformat oder Querformat) entspricht nicht dem tatsächlichen Geräteausrichtung. Das Öffnen der Softtastatur der meisten Geräte im Hochformat wird bewirkt, dass das Ansichtsfenster breiter wird, als es groß ist, wodurch der Browser anstelle von Hochformat Querformatstile verwendet.


Um es zu wiederholen: Es ist nicht die Bildschirmausrichtung, die Abfragen im Hoch- oder Querformat 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 Sie, die Größe des Ansichtsports zu ändern) 

Hier sind die repräsentativen Medienanfragen, die sich auf Hoch- und Querformat beziehen.

 @media screen and (orientation:portrait) {
     /* Portrait styles */
     /*set width to 100px */

 }
 @media screen and (orientation:landscape) {
     /* Landscape styles */
     /* set width to 200px*/

 }
1
kasper Taeymans