Гибернация с HSQLDB и Oracle

IMO - это лучшие точки останова:

@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 */ }

Редактирование: улучшено, чтобы работать лучше с сетями 960:

@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 */ }

На практике многие дизайнеры конвертируют пиксели в ems, в основном b / c ems лучше обеспечивают масштабирование. При стандартном увеличении 1em === 16px. Умножьте пиксели на 1em/16px, чтобы получить ems. Например, 320px === 20em.

В ответ на комментарий, min-width является стандартным в «мобильном первом» дизайне, в котором вы начинаете с проектирования для самых маленьких экранов, а затем добавляете постоянно увеличивающиеся медиа запросов, работающих на больших и больших экранах. Независимо от того, предпочитаете ли вы min-, max- или их комбинации, будьте в курсе порядка ваших правил, имея в виду, что если несколько правил соответствуют одному и тому же элементу, более поздние правила будут отменять предыдущие правила.