CSS media queries pour iPhone

J'ai un site web qui s'affiche sur le bureau et sur un iPhone en utilisant les media queries pour servir les différentes feuilles de style ainsi, par exemple, chargez TOUJOURS le réinitialiser.css, mais si sur le bureau de la charge de travail du bureau.css, mais si sur iPhone (ou si l'utilisateur redimensionne la fenêtre du navigateur à la taille) de la charge de l'iphone.css à la place, MAIS ne se charge pas de bureau.css plus, et également ajouter à l'orientation.les fichiers css en fonction de si l'utilisateur a déplacé l'iPhone.

par exemple 

/*

    Theme Name: mywebsite

*/

@import "reset.css";

@media only screen and (min-device-width: 320px) and (max-device-width: 480px)
{
    @import "desktop.css";
}

@media only screen and (min-device-width: 320px) and (max-device-width: 480px)
{
    @import "iphone.css";

    @media all and (orientation:portrait)
    {
        @import "iphone-portrait.css";
    }

    @media all and (orientation:landscape)
    {
        @import "iphone-landscape.css";
    }
}

Il doit être fait à l'intérieur de la feuille de style en raison de la façon dont je suis la création de mon site web et je veux seulement utiliser un fichier css dans le HTML.

Quelqu'un peut-il m'aider à la réparer jusqu'à ce que je veux. Des acclamations.

  • Toutes les mises à jour? Merci
InformationsquelleAutor Cameron | 2011-03-16
  1. 2

    Votre @import doit passer avant tout autre contenu dans votre CSS.

    Si vous voulez juste 1 fichier CSS dans le HTML, pourquoi ne pas copier et coller tous ces importations et les coller où vous essayez d'appeler les importations, c'est à dire.

    //css for reset.css

@media only screen and (min-device-width: 320px) and (max-device-width: 480px)
{
    //css for desktop
}
...
    InformationsquelleAutor Koes Bong
  2. 1

    Pourquoi ne pas utiliser les css pour les ordinateurs de bureau en ligne, et de la remplacer par css pour l'iphone? En outre, des postes de travail sont beaucoup plus larges que ces dimensions (min-device-width: 320px) et (max-device-width: 480px).
    (min-device-width: 320px) et (max-device-width: 480px) sont des dimensions de l'iphone/smartphones (la plupart d'entre eux au moins). Par conséquent, le code devrait être:

    @import "reset.css";

@media only screen and (min-device-width: 320px) and (max-device-width: 480px)
{
@import "iphone.css";
}

//1024px - max width of an ipad, min-device-aspect-ratio - detects desktop
@media all and (min-width: 1024px) and (min-device-aspect-ratio: 1/1)
{
@import "desktop.css";
}
    InformationsquelleAutor Teena Thomas