web-dev-qa-db-fra.com

Comment définir des requêtes multimédia portrait et paysage en css?

Voici ma requête média:

@media screen and (min-device-width: 768px) and (max-device-width: 1824px) and (orientation : portrait){
  .hidden-desktop {
    display: inherit !important;
  }
  .visible-desktop {
    display: none !important ;
  }
  .visible-tablet {
    display: inherit !important;
  }
  .hidden-tablet {
    display: none !important;
  }
}

@media screen and (min-device-width: 768px) and (max-device-width: 1824px) and (orientation : landscape){
  .hidden-desktop {
    display: inherit !important;
  }
  .visible-desktop {
    display: none !important ;
  }
  .visible-tablet {
    display: inherit !important;
  }
  .hidden-tablet {
    display: none !important;
  }
}
@media screen and (max-device-width: 767px) and (orientation: portrait) {
  .hidden-desktop {
    display: inherit !important;
  }
  .visible-desktop {
    display: none !important;
  }
  .visible-phone {
    display: inherit !important;
  }
  .hidden-phone {
    display: none !important;
  }
}
@media screen and (max-device-width: 767px) and (orientation: landscape) {
  .hidden-desktop {
    display: inherit !important;
  }
  .visible-desktop {
    display: none !important;
  }
  .visible-phone {
    display: inherit !important;
  }
  .hidden-phone {
    display: none !important;
  }
}

Mais dans la tablette, si elle est en mode paysage, cette div montre

 .visible-tablet {
    display: inherit !important;
  }

Si elle est en mode portrait, cette div affiche

.visible-phone {
    display: inherit !important;
  }

Je veux cette div .visible-tablet à afficher à chaque fois que je passe ma tablette en mode de rotation automatique (mode portrait et paysage)

Mais j’ai utilisé les conditions de portrait et de paysage, mais je suis toujours confronté à ce problème. Des commentaires?

htmlcssmedia-queries
25
UI_Dev

requêtes multimédia sur iPad (toutes générations - y compris iPad mini)

Grâce au travail d’Apple pour la création d’une expérience cohérente pour les utilisateurs et à la simplicité pour les développeurs, les 5 différents iPad (iPad 1-5 et iPad mini) peuvent être ciblés avec une seule requête multimédia CSS. Les prochaines lignes de code devraient fonctionner parfaitement pour une conception réactive.

iPad en portrait et paysage 

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px)  { /* STYLES GO HERE */}

iPad en paysage 

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) { /* STYLES GO HERE */}

iPad en portrait 

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) { /* STYLES GO HERE */ }

iPad 3 & 4 Requêtes avec les médias

Si vous souhaitez cibler uniquement les iPads Retina de 3e et 4e générations (ou les tablettes avec une résolution similaire) pour ajouter des graphiques @ 2x, ou d'autres fonctionnalités pour l'écran Retina de la tablette, utilisez les requêtes multimédia suivantes.

Retina iPad en portrait et paysage 

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 2) { /* STYLES GO HERE */}

Retina iPad en paysage 

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 2) { /* STYLES GO HERE */}

Retina iPad en portrait 

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio: 2) { /* STYLES GO HERE */ }

Questions sur les iPad 1 et 2

Si vous souhaitez fournir des graphismes différents ou choisir une typographie différente pour l’affichage iPad de résolution inférieure, les requêtes multimédia ci-dessous fonctionneront à merveille dans votre design réactif!

iPad 1 & 2 en portrait & paysage 

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (-webkit-min-device-pixel-ratio: 1){ /* STYLES GO HERE */}

iPad 1 & 2 en mode paysage 

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 1)  { /* STYLES GO HERE */}

iPad 1 & 2 en portrait 

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) 
and (-webkit-min-device-pixel-ratio: 1) { /* STYLES GO HERE */ }

Source: http://stephen.io/mediaqueries/

33
KiV

Cela peut aussi être aussi simple que cela.

@media (orientation: landscape) {

}
14
quemeful