Quais são os tamanhos de viewport mais frequentes para usar no design responsivo?

Vejo sugestões diferentes, desde muito detalhadas (como aqui ) até mais breves, como o google ( aqui ). então eu estou querendo saber quais são os tamanhos mais adequados para serem usados ​​na tela @media.

Pode não ser uma "estatística", mas dê uma olhada no Twitter Bootstrap que está começando a ser muito usado.

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

Em resumo:

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

Eu acho que isso depende do design, que pode diferir a cada compilação. Também depende se você estiver usando 100% de fluido ou alterando pontos de interrupção.

Costumo usar alguns dos seguintes itens, geralmente os tamanhos grandes não mudam muito entre os pontos de interrupção:

@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

Não adianta tentar cobrir todas as diferentes resoluções do Android, etc ... existem tantas.

Às vezes, também os pontos de interrupção não são acionados no tamanho real devido à barra de rolagem, para a qual cada navegador possui regras diferentes. Pode ser prudente reduzir 20px por @media para garantir que eles sejam acionados. Às vezes, troco a largura mínima: 320px pela largura máxima: 480px, pois em 320 nada pode ser exibido.