L'expansion css est-elle basée sur la taille de l'écran portrait ou paysage?

Question

J'ai deux div qui flottent l'un à côté de l'autre. Qu'est-ce que je voudrais, c'est avoir une largeur de 100px lorsque vous le regardez en mode portrait et laisse dire 200 px en paysage. Cela se produit en réalité sur un appareil mobile. Donc, la div va se développer en mode paysage et se rétrécir un peu en mode portrait.

Des 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 suis pas sûr de la technologie que vous cherchez, mais CSS3 fournit exactement ce que vous voulez avec CSS3 Media Queries.

Avec CSS3 vous avez des choses amusantes 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 */ 
} 

Découvrez this example page pour plus d'explications, ou this one.

EDIT Juste parce que j'ai trouvé cette page aujourd'hui: - très bonne rédaction.

Answer 2

Vous pouvez le faire en utilisant la fonction "orientation" du support css. De cette façon, vous pouvez spécifier des styles en fonction de l'orientation de l'écran, sans rapport avec la taille de l'écran. Vous pouvez trouver la définition officielle de w3.org à propos de cette fonctionnalité multimédia here. Combiné avec les spécifications sur developer.mozilla.org cela va expliquer comment cela fonctionne.

---

Citation de w3.org sur la 'orientation' option pour les médias:

La fonctionnalité multimédia 'd'orientation' est 'portrait' lorsque la valeur de la 'hauteur' fonctionnalité est supérieure ou égale à à la valeur de la fonction de média 'largeur'. Sinon "orientation" est "paysage".

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

Note: Cette valeur (c.-à-portrait ou paysage) ne fait pas correspondent aux résultats réels orientation du périphérique. Si vous ouvrez le clavier virtuel sur la plupart des périphériques en orientation portrait, la fenêtre sera plus large que haute, ce qui permettra au navigateur d'utiliser les styles paysage au lieu de portrait.

---

Donc, je le répète, il est en fait l'orientation de l'écran qui déclenche les requêtes des médias portrait ou paysage. Cependant c'est le rapport entre hauteur et largeur de l'écran!Pour cette raison, il est également logique d'utiliser la "fonction d'orientation" avec des appareils non mobiles/tactiles, d'où j'ai ajouté une petite démonstration pour montrer le comportement de ces requêtes de médias.

JSFIDDLE DEMO(essayez de redimensionner le port de vue)

Voici les médias représentatifs questions touchant 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*/ 

}