Na IMO, estes são os melhores pontos de interrupção:
@media (min-width:320px) { /* smartphones, portrait iPhone, portrait 480x320 phones (Android) */ }
@media (min-width:480px) { /* smartphones, Android phones, landscape iPhone */ }
@media (min-width:600px) { /* portrait tablets, portrait iPad, e-readers (Nook/Kindle), landscape 800x480 phones (Android) */ }
@media (min-width:801px) { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
@media (min-width:1281px) { /* hi-res laptops and desktops */ }
Edit : Refinado para funcionar melhor com 960 grades:
@media (min-width:320px) { /* smartphones, iPhone, portrait 480x320 phones */ }
@media (min-width:481px) { /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ }
@media (min-width:641px) { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ }
@media (min-width:961px) { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
@media (min-width:1281px) { /* hi-res laptops and desktops */ }
Na prática, muitos projetistas convertem pixels em ems, em grande parte b / c ems oferece melhor zoom. No zoom padrão 1em === 16px
. Multiplique pixels por 1em/16px
para obter ems. Por exemplo 320px === 20em
,.
Em resposta ao comentário, min-width
é padrão no design "móvel primeiro", no qual você começa projetando para as telas menores e depois adiciona consultas de mídia cada vez maiores, trabalhando em telas cada vez maiores. Independentemente de você preferir min-
, max-
ou combinações delas, conhecer a ordem de suas regras, lembre-se de que, se várias regras corresponderem ao mesmo elemento, as regras posteriores substituirão as regras anteriores.