web-dev-qa-db-fra.com

Largeurs recommandées pour des mises en page réactives

Quelles sont, selon vous, les largeurs à utiliser pour une mise en page réactive?

  /* Default Width: */
  .container { width: 940px; margin: 0 auto; }

  /* Smaller than standard 960 (devices and browsers) */
  @media only screen and (max-width: 959px) {}

  /* Tablet Portrait size to standard 960 (devices and browsers) */
  @media only screen and (min-width: 768px) and (max-width: 959px) {}

  /* All Mobile Sizes (devices and browser) */
  @media only screen and (max-width: 767px) {}

  /* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
  @media only screen and (min-width: 480px) and (max-width: 767px) {}

  /* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
  @media only screen and (max-width: 479px) {}
htmlcsscss3responsive-design
24
Jürgen Paul

Il n'y a pas de largeur recommandée pour une mise en page réactive. Cela dépend totalement de la structure de votre mise en page. Layout Structure signifie utiliser [~ # ~] mediaqueries [~ # ~] lorsque vous voulez des changements spécifiques sur une largeur spécifique ou lorsque votre mise en page a cassé un spécifique largeur de l'écran.

25
sandeep

J'ai commencé à utiliser les largeurs de "320 et plus" qui sont les suivantes:

Notez qu'ils vont du petit au grand et non l'inverse. C'est plus conforme à l'amélioration progressive et certainement préféré de toute façon: http://bradfrostweb.com/blog/web/mobile-first-responsive-web-design/

http://stuffandnonsense.co.uk/projects/320andup/

// Default styling here

// Little larger screen
@media only screen and (min-width: 480px) {

}

// Pads and larger phones
@media only screen and (min-width: 600px) {

}

// Larger pads
@media only screen and (min-width: 768px) {

}

// Horizontal pads and laptops
@media only screen and (min-width: 992px) {

}

// Really large screens
@media only screen and (min-width: 1382px) {

}

// 2X size (iPhone 4 etc)
@media only screen and 
        (-webkit-min-device-pixel-ratio: 1.5), only screen and 
        (-o-min-device-pixel-ratio: 3/2), only screen and 
        (min-device-pixel-ratio: 1.5) {

}

Si vous utilisez Sass, voici une petite astuce que j'utilise:

$laptop-size: "only screen and (min-width: 768px)";
$desktop-size: "only screen and (min-width: 1382px)";
// etc

Et alors

@media #{$laptop-size} {
    // Styling here...
}

De cette façon, vous pouvez facilement changer les largeurs en un seul endroit et vous n'avez pas à tout écrire à chaque fois.

42
powerbuoy

Si vous recherchez les meilleures pratiques/pratiques courantes et des largeurs particulières appliquées lors de l'utilisation de mises en page réactives, je vous suggère de consulter systèmes de grille facilement disponibles. Une recherche rapide sur Google donne beaucoup de résultats, mais l'un de mes préférés serait la grille 1140 de cssgrid.net (le site n'est plus disponible) - Je suis tout à fait d'accord avec leur logique sur le choix des mesures. Textuellement:

La grille 1140 s'intègre parfaitement dans un moniteur 1280. Sur les petits écrans, il devient fluide et s'adapte à la largeur du navigateur. Scrap 1024! Conçu une fois à 1140 pour 1280, et avec très peu de travail supplémentaire, il s'adaptera pour fonctionner sur à peu près n'importe quel moniteur, même mobile.

Si ce n'est pas le genre de réponse que vous cherchiez, veuillez reformuler la question.

4
o.v.