Sensible des Requêtes de Média - Où dois-je mettre ce code?

Ce sera mon premier site responsive, donc j'ai regardé autour et a trouvé la base des requêtes de média au bas de la poste, qui semble correspondre à la plupart des appareils d'une certaine façon ou d'une autre.

J'ai commencé le code à l'extérieur de l'une de ces requêtes (c'est à dire le ciblage de la moyenne de bureau). Ensuite, j'ai travaillé sur la première requête de support pour mobile, mais la deuxième règle ne fait pas de sens pour moi (c'est à dire tout plus grand que 321px).

Il semble vouloir dire tout plus grand que 321 jusqu'à 768, qui est la règle suivante. Je pense que je suis l'incompréhension comment cela fonctionnera? Quelqu'un peut peut-être expliquer cela dans un assez simple? Je commence à penser que tout mon code CSS doit être à l'intérieur de ces requêtes de média et que je n'ai pas commencé avec la version mobile d'abord, puis de l'étendre progressivement à mesure que la résolution est plus grande?

/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px)
{
}
/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px) and (orientation: landscape)
{
}
/* iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape)
{
}
/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait)
{
}
/* Desktops and laptops ----------- */
@media only screen and (min-width : 1224px) and (orientation: landscape)
{
}
/* Large screens ----------- */
@media only screen and (min-width : 1824px)
{
}
Vous semblez comprendre, la deuxième règle signifie que n'importe quel appareil avec une orientation paysage va suivre ce qui est à l'intérieur que les médias de la requête, alors tout ce qui est au-dessous de l'extérieur de la requête va l'écraser, de sorte que la prochaine requête de média sera utilisé. Si vous n'avez pas de code en dehors des requêtes de média, il n'y aura aucun style n'est appliqué entre 1024px et 1224px que vous avez un max dans votre troisième règle.
Grâce gaynorvader, je suis correct de dire que même avec l'orientation de la règle qu'il doit toujours respecter la taille de l'écran de règles. I. e. paysage + écran taille de pas plus de 321px?
Thaat correct.

OriginalL'auteur Jacques | 2013-03-21