Les Requêtes de média - Mobile vs Navigateur de Bureau

J'ai vu beaucoup de sites qui répondent à la fois sur les navigateurs de bureau et les navigateurs de téléphones mobiles, je suis en train de travailler sur un site et j'ai la feuille de style suivant de l'installation: (La Hicks Conception de site web est un bon exemple de ce que je veux atteindre, si vous en avez besoin)

/* Normal styles go here */

@media screen and (min-device-width:321px)
{
    /* Styles */
}
@media screen and (min-width:701px)
{
    /* Styles */
}
@media screen and (min-width:1025px)
{
    /* Styles */
}
@media screen and (min-width:2049px)
{
    /* Styles */
}

Cependant ma feuille de style ci-dessus ne semble fonctionner sur les navigateurs de bureau. (testé avec Android Firefox et le navigateur Android par défaut sur un Sony Xperia Ray)

La Hicks conception du site, les règles sont très similaires à la mienne, cependant, ils font usage de min et max, mais pour moi ne semble pas fonctionner sur les mobiles et les navigateurs de bureau. (Je compte sur l'optimisation de mon requêtes de média plus, je suis juste essayer d'obtenir les notions de base pour fonctionner comme je veux pour le moment).

Si j'utilise max-device-width, au lieu de max-width, il devient sensible sur les navigateurs mobiles, mais pas les navigateurs de bureau...

J'ai essayé les suivantes pour contourner le problème:

@media screen and (max-width:480px), screen and (max-device-width:480px)
{
    /* Styles */
}

aussi:

@media screen and (max-width:480px), and (max-device-width:480px)
{
    /* Styles */
}

Cependant, je ne pense pas que ce soit de ces sont correctes, la web developer toolbar pour Firefox se plaint-il. J'ai aussi essayé quelques variations sur les règles ci-dessus, mais ne peut toujours pas le faire fonctionner.

De ce que je comprends max-width lit de la fenêtre d'affichage de la largeur (dire.. .la largeur de la fenêtre du navigateur) et max-device-width lit la largeur réelle de l'écran que vous utilisez pour afficher le site. - Je suis confus pourquoi max-width ne semble pas lire le mobile de la largeur du navigateur.

Je pense que je suis peut-être rater quelque chose d'évident sur les media queries ici... Il ne semble pas faire sens que si je veux que mon site responsive sur le bureau et les navigateurs mobiles, je dois faire une copie de tous mes requêtes de média et il suffit de changer la requête à partir de l'écran " et (max-width)' à 'écran et (max-device-width)" ou vice versa. (dont je suis honteux de même type comme une solution de contournement)

Comment puis-je combiner le (max-width) et (max-device-width) règles ou comment puis-je y parvenir?

Si vous préférez ne pas lire tous les ci-dessus:

Je suis à l'aide de @media screen and (max-width:480px) cependant, il semble que @media screen and (max-device-width:480px) fonctionne sur les mobiles. Comment puis-je combiner ces deux règles pour parvenir à une conception sensible sur les mobiles et les navigateurs de bureau?

InformationsquelleAutor Dan | 2012-10-23