Quelles sont les tailles de fenêtres les plus fréquemment utilisées dans une conception réactive?

Je vois différentes suggestions de très détaillées (comme ici ) à plus brèves, comme google ( ici ). Je me demande donc quelles sont les tailles les plus appropriées pour être utilisées sur l'écran @media.

Ce n'est peut-être pas une «statistique», mais jetez un œil à Twitter Bootstrap qui commence à être beaucoup utilisé.

https://github.com/twitter/bootstrap/blob/master/less/responsive.less

En bref:

• <= 767px
• 768px - 979px
• 980px - 1199px
• > = 1200px

Je suppose que cela dépend de la conception, qui peut différer d'une construction à l'autre. Cela dépend également si vous utilisez du fluide à 100% ou si vous changez de points d'arrêt.

J'ai tendance à utiliser certains des éléments suivants, généralement les grandes tailles ne changent pas du tout entre les points d'arrêt:

@media screen and (min-width:320px){} // mobile portrait
@media screen and (min-width:480px){} // mobile landscape
@media screen and (min-width:768px){} // ipad portrait
@media screen and (min-width:1024px){} // browser, ipad landscape
@media screen and (min-width:1200px){} // browser
@media screen and (min-width:1600px){} // browser

Inutile d'essayer de couvrir toutes les différentes résolutions Android etc ... il y en a tellement.

Parfois, les points d'arrêt ne se déclenchent pas sur la taille réelle en raison de la barre de défilement, pour laquelle chaque navigateur a des règles différentes. Il pourrait être judicieux de couper 20 pixels par @media pour vous assurer qu'ils se déclenchent. J'échange parfois la largeur minimale: 320px pour une largeur maximale: 480px, car sous 320, rien ne peut être affiché.