Meilleure façon d'utiliser les requêtes multimédias pour les conceptions mobiles

Question

Je sais ce que sont les requêtes multimédias et pourquoi elles sont utilisées, mais je ne suis pas sûr de la meilleure façon de développer un site mobile avec elles. Exemple: J'ai mysite.com qui a une feuille de style avec tous les styles nécessaires (disons que c'est un très gros fichier). À ce stade, aucun de mes styles ne cible les résolutions d'écran inférieures ou d'autres périphériques. Je décide alors de faire une version mobile de mon site. Pour le rendre facile, je vais cibler uniquement les utilisateurs d'iPhone pour l'instant, et si le code détecte que quelqu'un visite mon site sur un iPhone, ils obtiennent la version mobile.

Mes questions: Où est le meilleur endroit pour inclure ces styles supplémentaires, de sorte qu'un utilisateur voit la version mobile? Devrais-je inclure ces styles dans la feuille de style originale, ou serait-il préférable de les séparer dans leur propre feuille de style?

Dites que mon site est entièrement construit avec des flottants, mais ma version mobile montrera simplement chaque élément empilé les uns sur les autres. Comment puis-je montrer cela en utilisant des requêtes média? Est-ce aussi simple que de déclarer float: none; ou quelque chose? Fondamentalement, ce que j'essaie de demander dans le paragraphe ci-dessus est, comment puis-je construire ma feuille de style pour que, par exemple, les couleurs de base et peut-être les positions de liaison ou quoi que ce soit persistent dans la version mobile version mais avec des différences telles que empiler tout sur l'autre dans la version mobile? Les règles de la section de requête de média d'une feuille de style sont-elles fondamentalement supérieures à celles que vous avez déclarées dans les sections de requête non-média?

J'ai trouvé de nombreux exemples d'utilisation de requêtes média, mais je ne trouve pas d'exemple de site complet. Si j'ai un mobile.css et un main.css liés dans la même page HTML, comment travaillent-ils ensemble pour conserver certains aspects de mon site dans la version mobile mais en changer d'autres?

Dernière question: est-il possible d'avoir un design entièrement à largeur fixe, mais toujours utiliser des requêtes média? Le code sera toujours capable de détecter quand le navigateur rétrécit ou se développe après une certaine largeur/hauteur, correct?

Désolé pour la longue question et probablement déroutant. J'espère que vous pouvez dire ce que j'essaie de demander.

Answer 1

Il y a (au moins!) Quatre façons de le faire:

1. CSS normale, avec des requêtes des médias au fond (ils remplacent les CSS ci-dessus)
2. Deux (ou plus) fichiers CSS chargé à l'aide de requêtes des médias sur l'élément de liaison
3. détection côté serveur qui ajoute différents liens CSS dans le code HTML
détection de côté
4. Server puis une redirection vers m.example.com ou example.com/mobile

Si vous parlez de modifications mineures (float: none, tailles de police différentes, etc), alors je voudrais aller pour 1. S'il y a beaucoup et beaucoup de changements à la CSS, j'utiliserais 2 ou 3 (3 isn 't aussi bon, que vous comptez sur useragents, plutôt que des propriétés d'écran). Si le HTML et CSS change, j'utiliserais 4.

Pour tout cela, vérifiez votre travail dans Internet Explorer 6 - 8, ils peuvent ignorer les requêtes de médias et utiliser tous les CSS, y compris les bits mobiles si vous utiliser 1.

Jetez un oeil à http://mediaqueri.es/ quelques exemples de sites en utilisant 1 et 2.

Voici une autre ressource qui pourrait aider: https://docs.google.com/present/view?id=dkx3qtm_22dxsrgcf4

Answer 2

je recommande l'option 3.

agent utilisateur renifler pour détecter les appareils ne sont pas mauvais. Il a été une constante pour créer des sites Web mobiles depuis des années maintenant. En utilisant PHP device detection, vous avez plus de contrôle de votre site sur différents appareils. Non seulement vous pouvez choisir quels fichiers CSS vont à quel appareil vous pouvez choisir quels actifs/majoration sont chargés par catégorie d'appareil; mobile, tablette, ordinateur de bureau, télévision, etc.

Avec cette méthode, vous pouvez vous assurer que les mobiles ne reçoivent pas les éléments de bureau/styles/balisage et vice-versa, même si JavaScript est désactivé.

Answer 3

Je suggère de ne pas duper avec la détection de navigateur/appareil mobile du tout; C'est là que les requêtes des médias excellent. Pensez plus organiquement, et au lieu de devoir constamment mettre à jour votre site Web avec de nouveaux appareils et des navigateurs mobiles, utilisez simplement un fichier CSS et utilisez la largeur max/largeur de périphérique de CSS3.

place <meta name="viewport" content="width=device-width"/> dans votre tête et dans votre fichier CSS parse dans une version de bureau et une version mobile:

/* Desktop Version */ 

@media screen { 
    body { 
     margin-left: 0px; 
     margin-top: 0px; 
     margin-right: 0px; 
     margin-bottom: 0px; 
     text-align: center; 
     background-color:#900; 
     background-image:url(../images/bg_white.png); 
     background-repeat: repeat-y; 
     background-position: center top; 
    } 
} 

/* SmartPhone Version */ 

@media only screen and (max-width: 480px), only screen and (max-device-width: 640px) { 
    body { 
     margin-left: 0px; 
     margin-top: 0px; 
     margin-right: 0px; 
     margin-bottom: 0px; 
     text-align: center; 
     background-color:#900; 
     background-image:url(../images/m_bg_white.png); 
     background-repeat: repeat-y; 
     background-position: center top; 
    } 
} 

Answer 4

Je ne recommanderais pas l'option 3. renifleur a été prouvé un mauvais moment de choix et le temps encore. Que se passe-t-il lorsqu'un appareil/navigateur présente des informations erronées? C'est facilement détourné.

Ne faites pas cela. Media requêtes tout le chemin. C'est la norme supportée.