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

  1. 6

    L'objet de requêtes de média à modifier des éléments afin qu'ils semblent bonnes une fenêtre spécifique/taille de l'écran.

    Premier Mobile de la conception commence à devenir populaire. Essentiellement, le développeur crée le site web optimisé(ressemble et se comporte mieux) sur les appareils mobiles. Ensuite, peu à peu il insère des requêtes de média à la fin de son css pour remplacer l'original de la feuille de style css. Il ne présente donc que la page s'adapte à l'utilisateur de la fenêtre/taille de l'écran, ce qui résulte en une meilleure expérience.

    Voici un exemple:

    .ImageGalleryItems {
  float: none;
  clear: both;
  background-color: black;
}
@media only screen and (min-width: 768px) {
  float: left;
  background-color: white;
}

    Maintenant, chaque fois que l'utilisateur taille de l'écran est plus grand que 768px, l'image des éléments flottera à gauche plutôt que de les afficher les uns à côté des autres. Aussi, la couleur de fond change.

    C'est le principe, vous pouvez utiliser. Si vous développez pour mobile tout d'abord, ne pas ajouter :hover effets dans l'original de votre css parce que ceux qui ne sont pas employés pour les appareils mobiles. Ensuite, utiliser les media queries pour ajouter à ces effets de bureau. Cela permet d'économiser de l'utilisation des données et crée plus propre code.

    Merci Derek, bon point sur l'état de pointage. Je reçois les règles de base, mais je pense que ce qui est déroutant, c'est comment savoir quelles sont les tailles d'écran pour les accueillir. 321px semble être un bon portrait de la taille pour iPhone4, mais ne vous puis ajouter une autre règle pour Samsung s3 et un autre pour Samsung Note 2? Ou, sommes-nous en regardant une série, puis en s'appuyant sur les grilles fluides pour faire le reste? I. e. 321px pourrait avoir un ensemble de règles alors en groupe le s3 et le Note 2 ensemble?

    OriginalL'auteur derek_duncan

  2. 2

    Je pense que vous exagérer un peu. Réduire le nombre de requêtes de Média et d'ajouter des points d'arrêt où votre conception de la "casse" en quelque sorte.

    Considérant que mettre dans les requêtes: une façon est d'écrire une certaine forme d'général de la CSS, puis l'écrasement de certaines propriétés à l'intérieur des requêtes de média. Une autre façon est de simplement ignorer le "alternance" de la propriété en CSS et en le plaçant à l'intérieur de chacune des requêtes.

    Donc: vous n'écrivez pas TOUT votre CSS à l'intérieur des requêtes de média. Seulement les choses que vous voulez changer.

    OriginalL'auteur AntonNiklasson

  3. 1

    Il n'est pas vraiment nécessaire de tout mettre dans les media queries. Une requête de média ne s'appliquent à un appareil et ou la taille de l'écran qui tombe dans cette requête.

    @media 1 n'a pas nécessairement pour effet de @media 2.

    Remarque: Vous pouvez aussi mettre vos requêtes de média dans une liste séparée par des virgules pour gagner du temps.

    C'est la façon dont je l'ai fait sur mon site:

     /* styles for desktops */
 body{width:100%;}

 img{width:100%;} /* and so on */


@media handheld and (max-width: 960px),

screen and (max-width: 960px),

only screen and (min-device-width : 768px) and (max-device-width : 1024px),

only screen and (min-device-width : 320px) and (max-device-width : 480px),

only screen and (-webkit-min-device-pixel-ratio : 1.5),

only screen and (min-device-pixel-ratio : 1.5)

{
     /*Styles for non desk-tops*/
     /*You Only Need to put styles you want to change in here*/
     img{width:90%;}
}

    J'espère que cette aide.

    Merci, je ne pense pas que d'enchaîner les règles comme ça.

    OriginalL'auteur apaul

  4. 1

    Surtout juste d'accord avec ce qui a déjà été dit: vous concevez entre tailles et pas pour d'une certaine taille. La chose la plus importante à retenir est de jeter tout dans les pourcentages et des largeurs fixes. Le résultat de ceci est que vous devriez vraiment besoin de trois questions: l'une pour les ordinateurs de bureau, une tablette et un mobile.

    OriginalL'auteur Dave Kanter

  5. 0

    Qu'un certain nombre de requêtes de média - je pense quant à savoir si ou non vous avez vraiment besoin de toutes ces.

    Vous pouvez l'approche de mobile ou de bureau en premier. Ne fait pas de différence vraiment.

    Je vous recommande d'avoir un coup d'oeil à ce que les requêtes de média Bootstrap utiliser la valeur par défaut.

    http://twitter.github.com/bootstrap/scaffolding.html#responsive

    OriginalL'auteur Billy Moat

  6. 0

    Toujours utiliser les media queries pour les ordinateurs de bureau et mobile, parce que si vous n'avez pas l'ensemble de la css se rendre sur les navigateurs, prennent de la place et de ralentir ur de la page web (pas beaucoup, mais il peut faire d'énormes si vous avez eu un grand webapp). Donc, mon conseil serait de définir des requêtes de média pour desktop et mobile. Alors, quand il le charge charge uniquement les requêtes de média concernant les spécifications et rien de plus ou rien.

    OriginalL'auteur РАВИ