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.
8
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:
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é.