3 questions des médias pour iphone portrait, paysage et portrait ipad

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

Je vais avoir des problème quand j'ai plus de 1 requête de média. Voir ce JSfiddle exemple la div de fond n'est jamais vert, sauf si vous supprimez la dernière requête de média

C'est ce que je voudrais 3 différentes requêtes de média qui cible:

  1. les deux smartphones et tablettes(portrait). Ce sera où j'ai tous mes styles génériques pour la mise en page responsive
  2. width: 320px - 479px - cela s'applique aux écrans de petite taille, tels que l'iphone en mode portrait uniquement
  3. width: 480px - 640px - cela s'applique à de plus grands écrans tels que l'iphone en mode paysage et de l'ipad en mode portrait. Pas ipad en mode paysage.

Remarque c'est pour un e-mail en HTML donc ce n'est 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/

OriginalL'auteur John Magnolia | 2012-12-17

  1. 20

    Votre propre tentative modifié 

    @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; 
    }
}
    Notez que la virgule , fonctionne comme OR et la and fonctionne comme and. Ainsi, vous pouvez toujours combiner des requêtes de média.
    seulement screen and (max-device-width: 480px) et (orientation paysage) --ne fonctionne pas pour les iphone paysage, ne pas être reconnu
    salut, je suis sur ios 6, iphone 4, la requête de média pour "iPhone paysage" ne fonctionne pas pour moi, le reste du travail

    OriginalL'auteur Om Shankar

  2. 3

    Media queries également un dispositif de soutien à l'orientation. Vous devriez essayer que

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

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

    Vous pouvez également les combiner avec une largeur comme

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

}
    L'Orientation multimédia de la requête ne fonctionne pas sur iPad & iPad mini 🙁 ...

    OriginalL'auteur kernelpanic

  3. 1

    Prendre un coup d'oeil à cette ressource, vous donnera des requêtes de média pour à peu près tout http://arcsec.ca/media-query-builder/ , vous devez spécifier une largeur min aswell. aussi moins de de la !important, sale 🙂

    dans votre cas

    @media only all and (min-device-width: 320px) and (max-device-width: 480px) {
/* insert styles here */
}
    Merci même si j'ai eu un coup d'oeil sur le lien, mais tous ceux sélectionne sont simplement confus. J'ai utiliser le !important parce que sa pour un e-mail en HTML et j'ai besoin de remplacer des styles en ligne.

    OriginalL'auteur Richlewis

  4. 1

    Responsive e-mails peut être difficile car il ya tellement de nombreux clients de messagerie, et le soutien peuvent être limitées pour les requêtes de média. Vous voulez juste regarder dans la fabrication de votre divs fluide, avec des pourcentages, de sorte qu'ils de l'échelle, plutôt que des requêtes de média. Les personnes à zurb avons quelques grands modèles qui peuvent aider trop. http://www.zurb.com/playground/responsive-email-templates

    Espère que ça aide.

    OriginalL'auteur mToce

  5. 0

    j'ai essayé en utilisant Om solution dans un diff. façon dont il a travaillé pour moi, j'espère que ça 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*/
}
    c'est de mon plein answere:-@media seulement screen and (max-device-width:1024px) et (orientation: portrait) { /*style*/ } } @media screen and (max-device-width: 1024px) et (orientation paysage) { /*style*/ }
    pls m'aider à modifier mon answere!!

    OriginalL'auteur sahil