2010-10-04 19 views
12

Ich habe zwei divs, die nebeneinander schweben. Was ich möchte ist es eine Breite von 100px haben, wenn Sie es im Hochformat betrachten und sagen wir 200 px in Landschaft. Dies geschieht tatsächlich auf einem mobilen Gerät.css erweitert basierend auf Hochformat oder Querformat Bildschirmgröße?

So wird das Div erweitern, wenn im Querformat und ein wenig im Hochformat schrumpfen.

Irgendwelche Ideen?

Antwort

43

Nun, das ist mit CSS2 nicht möglich, aber es wäre möglich, mit Javascript zu arbeiten (lies die Bildschirmgröße aus).

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

Mit CSS3 haben Sie Spaß Sachen wie diese (oder man könnte sogar Breite zum Beispiel 200px angeben):

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

Check out this example page für weitere Erklärung oder this one.

BEARBEITEN Nur weil ich diese Seite heute gefunden habe: - sehr gute writeup.

+0

+1 es funktioniert super! –

+0

einfache und elegante Weise .. Daumen hoch für Sie! – saadk

1

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*/ 

} 
Verwandte Themen