ИМО это лучшие точки останова:
@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, в большинстве случаев лучше использовать масштабирование. При стандартном зуме 1em === 16px
. Умножьте пиксели на, 1em/16px
чтобы получить ЭМС. Например, 320px === 20em
.
В ответ на комментарий, min-width
это стандартная конструкция «сначала для мобильных устройств», в которой вы начинаете с разработки дизайна для своих самых маленьких экранов, а затем добавляете постоянно растущие медиазапросы, прокладывая себе путь к большим и большим экранам. Независимо от того, предпочитаете ли вы min-
, max-
или их комбинации, быть осведомленным о порядке ваших правил, имея в виду , что если несколько правил соответствует один и тот же элемент, более поздние правила будут переопределять более ранние правила.