Какие размеры окна просмотра чаще всего используются в адаптивном дизайне?

8

Я вижу разные предложения от очень подробных (как здесь ) до более кратких, как Google ( здесь ). поэтому мне интересно, какие размеры наиболее подходят для использования @media screen.

responsive-webdesign media-queries

— alfish
источник

7

Возможно, это не «статистика», но взгляните на Twitter Bootstrap, который начинает часто использоваться.

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

Короче говоря:

<= 767 пикселей
768px - 979px
980px - 1199px
> = 1200px

— Себастьен
источник

7

Я думаю, это зависит от дизайна, который может отличаться в каждой сборке. Это также зависит от того, используете ли вы 100% жидкости или меняете точки останова.

Я склонен использовать некоторые из следующих, как правило, большие размеры практически не меняются между точками останова:

@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

Нет смысла пытаться охватить все различные разрешения Android и т.д. ... их так много.

Также иногда точки останова не срабатывают по фактическому размеру из-за полосы прокрутки, для которой у каждого браузера свои правила. Возможно, было бы разумно обрезать 20 пикселей на @media, чтобы убедиться, что они срабатывают. Иногда я меняю min-width: 320px на max-width: 480px, так как ниже 320 ничего не может отображаться.

— DBUK
источник