¿Cuáles son los tamaños de ventana de visualización más frecuentes para usar en el diseño receptivo?

Veo diferentes sugerencias desde muy detalladas (como aquí ) hasta más breves, como google ( aquí ). así que me pregunto cuáles son los tamaños más adecuados para usar en la pantalla de medios.

Esto puede no ser una "estadística", pero eche un vistazo a Twitter Bootstrap que se está comenzando a usar mucho.

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

En breve:

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

Supongo que esto depende del diseño, que puede diferir en cada compilación. También depende si está usando un 100% de líquido o si cambia en puntos de interrupción.

Tiendo a usar algunos de los siguientes, generalmente los tamaños grandes no cambian mucho entre puntos de interrupción:

@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

No tiene sentido tratar de cubrir todas las diferentes resoluciones de Android, etc. ... hay tantas.

Además, a veces los puntos de interrupción no se activan en el tamaño real debido a la barra de desplazamiento, para la cual cada navegador tiene reglas diferentes. Puede ser conveniente cortar 20px por @media para asegurarse de que se disparen. A veces cambio el ancho mínimo: 320 píxeles por un ancho máximo: 480 píxeles, ya que debajo de 320 no se puede mostrar nada.