web-dev-qa-db-fra.com

css en expansion en fonction de la taille de l’écran portrait ou paysage?

J'ai deux divs qui flottent côte à côte. Ce que je voudrais, c’est qu’il ait une largeur de 100 pixels lorsque vous le regardez en mode portrait et qu’il soit 200 pixels en mode paysage. Cela se produit réellement sur un appareil mobile.

La div va donc s’agrandir en mode paysage et se réduire un peu en portrait.

Des idées?

cssmobilelandscapeportrait
15
Xtian

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

Je ne suis pas sûr de la technologie que vous envisagez, mais CSS3 fournit exactement ce que vous voulez avec CSS3 Media Queries .

Avec CSS3, vous avez des choses amusantes comme celle-ci (ou vous pouvez même spécifier une largeur, par exemple 200 pixels):

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

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

EDITJuste parce que je trouve cette page aujourd’hui: Hardbroiled CSS3 Media Queries - très bonne rédaction.

52
Dennis G

Vous pouvez le faire en utilisant la fonctionnalité de média css "orientation". 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 fonction média ici . Combiné avec les spécifications de developer.mozilla.org , cela expliquera comment cela fonctionne.

Citation de w3.org à propos de la fonctionnalité média ‘orientation’:

La fonction de média 'd'orientation' est 'portrait' lorsque la valeur de la fonction de média ' height ' est supérieure ou égale à à la valeur de la propriété de ' width ' caractéristique du média. Sinon, ‘orientation’ est ‘paysage’.

Une note/une citation de developer.mozilla.org à propos de la fonctionnalité "orientation":

Remarque: cette valeur (portrait ou paysage)} fait pas correspond à l'orientation réelle du périphérique . . Ouvrir le clavier logiciel sur la plupart des périphériques en mode portrait L’orientation fera que la fenêtre de visualisation deviendra plus large que haute, ce qui obligera le navigateur à utiliser des styles de paysage au lieu de portrait.

Donc, pour répéter, ce n’est pas réellement l’orientation de l’écran qui déclenche les requêtes multimédia en mode portrait ou paysage. Cependant c'est le rapport entre la hauteur et la largeur de l'écran! Pour cette raison, il est également judicieux d'utiliser la "fonctionnalité d'orientation" avec des appareils non mobiles/tactiles, c'est pourquoi j'ai ajouté une petite démo pour montrer le comportement de ces requêtes multimédia. 

JSFIDDLE DEMO (essayez de redimensionner le port d'affichage)} 

Voici les requêtes de médias représentatives affectant 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*/

 }
1
kasper Taeymans