3 requêtes média pour iphone portrait, paysage et ipad portrait

Question

J'ai essayé les différentes combinaisons de width & device-width mais sur l'iPhone en mode paysage ce code ne fait jamais tourner le fond en rouge;

Je rencontre un problème lorsque j'ai plus d'une requête média. Voir ce JSfiddle example l'arrière-plan div est jamais vert sauf si vous supprimez le dernier média requête

Voilà ce que je voudrais 3 différentes questions des médias qui ciblent:

1. les smartphones et les tablettes (portrait uniquement). Ce sera là où j'ai tous mes styles génériques pour la mise en page sensibles
2. largeur: 320px - 479px - cela s'appliquera aux petits écrans, tels que l'iPhone en mode portrait que
3. largeur: 480px - 640px - ceci sera appliqué aux écrans plus grands tels que l'iphone dans le paysage et l'ipad dans le portrait. Pas ipad dans le paysage.

RemarqueCet est un e-mail HTML de sorte que son pas possible d'utiliser JS.

@media only screen and (max-width: 640px) { 
    body { padding: 10px !important } 
} 
/* Small screen */ 
@media only screen and (min-device-width: 320px) and (max-device-width: 479px) { 
    body { background: blue !important } 
} 
/* iPhone landscape and iPad portrait */ 
@media only screen and (max-device-width: 480px) and (max-device-width: 640px) { 
    body { 
     background: red !important 
     -webkit-text-size-adjust:none; 
    } 
} 

Référence: http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

Answer 1

votre propre tentative modifiée

@media only screen and (max-width: 640px) and (orientation: portrait) { 
    body { padding: 10px !important } 
} 

/* Small screen */ 
@media only screen and (min-device-width: 320px) and (max-device-width: 479px) and (orientation: portrait) { 
    body { background: blue !important } 
} 

/* iPhone landscape and iPad portrait */ 
@media only screen and (max-device-width: 480px) and (orientation: landscape), 
@media only screen and (max-device-width: 640px) and (orientation: portrait) { 
    body { 
     background: red !important 
     -webkit-text-size-adjust:none; 
    } 
} 

Answer 2

Jetez un oeil à cette ressource, vous donnera les demandes des médias pour tout à peu près http://arcsec.ca/media-query-builder/, vous devez être spécifieront un aswell min largeur. aussi moins de! important, sale :)

dans votre cas

@media only all and (min-device-width: 320px) and (max-device-width: 480px) { 
/* insert styles here */ 
} 

Answer 3

requêtes des médias prennent également en charge l'orientation de l'appareil. Vous devriez essayer

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

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

Vous pouvez également les combiner avec une largeur comme tant

@media screen and (max-device-width : 320px) and (orientation:portrait) { 

} 

Answer 4

emails réactifs peut être difficile car il y a tellement de clients e-mail là-bas, et le soutien peut être limité requêtes de médias. Vous voudrez peut-être simplement faire en sorte que vos divs soient fluides avec des pourcentages, de sorte qu'ils évoluent, plutôt que des requêtes média. Les gens à zurb ont quelques bons modèles qui peuvent aider aussi. http://www.zurb.com/playground/responsive-email-templates

Espérons que ça aide.

Answer 5

j'ai essayé cela en utilisant la solution de Om dans une diff. comment cela a fonctionné pour moi, j'espère que cela aide quelqu'un

@media only screen and (max-device-width:1024px) and (orientation: portrait)  { 
    /*style*/  
    } 
@media only screen and (max-device-width: 1024px) and (orientation: landscape) { 
    /*style*/ 
}