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