css Expandieren basierend auf Hoch- oder Querformat Bildschirmgröße?

Question

Ich habe zwei Divs, die nebeneinander schwimmen. Was ich möchte, ist es eine Breite von 100px haben zu haben, wenn man es im Portrait-Modus suchen und sagen wir mal 200 Pixel in der Landschaft. Dies geschieht tatsächlich auf einem mobilen Gerät angezeigt wird.

Also das div wird erweitert, wenn im Querformat und schrumpft ein wenig in Porträt.

Irgendwelche Ideen?

Answer 1

Gut, das mit CSS2 nicht möglich ist, aber es wäre möglich, zu tun, was Sie mit Javascript wollen (lesen Sie sich die Bildschirmgröße usw.).

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

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

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

Sehen Sie sich dieses Beispiel für weitere Erklärung oder dieses .

Bearbeiten Nur weil ich fand diese Seite heute: Hardbroiled CSS3 Media Queries -. sehr gut writeup

Answer 2

Sie können dies tun, indem Sie die CSS-Media-Funktion „Orientierung“ verwendet wird. Auf diese Weise können Sie Stile festlegen, abhängig von der Bildschirmausrichtung, die unabhängig von der Bildschirmgröße. Sie können die offizielle w3.org Definition finden über diese Medien verfügen über hier . In Kombination mit den Angaben auf developer.mozilla.org das wird erklären, wie es funktioniert.

---

Zitat von w3.org über die ‚Orientierung‘ Medien verfügen:

  

Die ‚Orientierung‘ Medien-Funktion ist ‚Porträt‘, wenn der Wert der   ‚ Höhe ‘ Medien-Funktion ist größer oder gleich auf den Wert der   ‚ Breite ‘ Medien verfügen. Ansonsten ‚Orientierung‘ ist ‚Landschaft‘.

Ein Hinweis / Zitat aus developer.mozilla.org über die "Orientierung" -Funktion:

  

Hinweis: Dieser Wert (dh Hoch- oder Querformat) hat nicht entspricht tatsächliche Geräteausrichtung .   Das Öffnen der Soft-Tastatur auf den meisten Geräten im Hochformat Willen   bewirken, dass das Darstellungsfeld breiter wird als hoch ist, wodurch   der Browser zu verwenden Landschaft Stile statt Porträt.

---

So zu wiederholen, ist es nicht eigentlich die Ausrichtung des Bildschirms, dass Trigger Hoch- oder Quermedienanfragen. Es ist jedoch das Verhältnis zwischen Höhe und Breite des Bildschirms! Aus diesem Grunde macht es auch Sinn, das „Orientierungsmerkmal“ mit nicht mobil / taktilen Geräten zu verwenden, daher habe ich eine kleine Demo hinzugefügt, um das Verhalten dieser Medien-Anfragen zu zeigen.

JSFIDDLE DEMO (versuchen, den Viewport Größe ändern )

Hier sind die repräsentativen Medienanfragen Hoch- und Querformat zu beeinflussen.

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

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

 }