expanser css basée sur la taille du portrait ou de l'écran du paysage?

Question

J'ai deux divs qui flottent à côté de l'autre. Ce que je voudrais est de l'avoir une largeur de 100px lorsque vous regardez en mode portrait et permet de dire 200 px dans le paysage. Cela se produit l'affichage sur un appareil mobile réellement.

Ainsi, la div se développera en mode paysage et réduire un peu en mode portrait.

Toutes les idées?

Answer 1

Eh bien, ce n'est pas possible avec CSS2, mais il serait possible de faire ce que vous voulez avec Javascript (lire la taille de l'écran, etc.).

Je ne sais pas ce que la technologie que vous cherchez à, mais CSS3 offre exactement ce que vous voulez avec CSS3 médias Requêtes .

Avec CSS3 vous avez des trucs fun comme ça (ou vous pouvez même spécifier la largeur par exemple 200px):

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

Consultez cet exemple pour plus d'explications, ou celui-ci .

EDIT Tout simplement parce que je trouve cette page aujourd'hui: Hardbroiled CSS3 médias Requêtes -. très bon writeup

Answer 2

Vous pouvez le faire en utilisant la fonctionnalité de média css « d'orientation ». De cette façon, vous pouvez spécifier les styles en fonction de l'orientation de l'écran, sans rapport avec de la taille de l'écran. Vous pouvez trouver la définition officielle de w3.org sur ce média disposent . Combiné avec les spécifications sur developer.mozilla.org cela explique comment cela fonctionne.

---

Citation de w3.org sur les médias « d'orientation » comportent:

  

La fonction média « d'orientation » est « portrait » lorsque la valeur du   « hauteur » fonctionnalité multimédia est supérieure ou égale à la valeur de la   « Largeur » disposent les médias. Sinon, « orientation » est « paysage ».

Une note / citation de developer.mozilla.org sur la fonction "orientation":

  

Note: Cette valeur (c.-à-portrait ou paysage) ne pas correspondent à l'orientation réelle de l'appareil .   Ouverture du clavier virtuel sur la plupart des appareils dans l'orientation portrait volonté   provoquer la fenêtre pour devenir plus large que haut, ce qui provoque   le navigateur à utiliser les styles de paysage au lieu de portrait.

---

Je le répète, il est en fait l'orientation de l'écran que les déclencheurs portrait ou paysage questions des médias. Cependant, il est le rapport entre la hauteur et la largeur de l'écran! En raison de cela, il est également judicieux d'utiliser la « fonction d'orientation » avec les appareils tactiles de / non mobile d'où j'ai ajouté une petite démo pour montrer le comportement de ces questions des médias.

jsFiddle DEMO (essayez de redimensionner le port de vue )

Voici les questions des médias représentant une incidence sur l'orientation portrait et paysage.

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

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

 }