Was sind die häufigsten Ansichtsfenstergrößen für Responsive Design?

8

Ich sehe verschiedene Vorschläge von sehr detailliert (wie hier ) bis kurz, wie Google ( hier ). Daher frage ich mich, welche Größen für den @ media-Bildschirm am besten geeignet sind.

responsive-webdesign media-queries

— Alfish
quelle

7

Dies ist möglicherweise keine „Statistik“, aber werfen Sie einen Blick auf Twitter Bootstrap, das häufig verwendet wird.

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

Zusamenfassend:

<= 767px
768px - 979px
980px - 1199px
> = 1200px

— sebastien
quelle

7

Ich denke, das hängt vom Design ab, das bei jedem Build unterschiedlich sein kann. Es hängt auch davon ab, ob Sie 100% Flüssigkeit verwenden oder die Haltepunkte ändern.

Ich neige dazu, einige der folgenden zu verwenden, im Allgemeinen ändern sich die großen Größen zwischen den Haltepunkten überhaupt nicht viel:

@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

Es macht keinen Sinn, all die verschiedenen Auflösungen für Android usw. abzudecken ... es gibt so viele.

Manchmal werden die Haltepunkte aufgrund der Bildlaufleiste, für die jeder Browser unterschiedliche Regeln hat, nicht bei der tatsächlichen Größe ausgelöst. Es könnte ratsam sein, 20 Pixel pro @media abzuschneiden, um sicherzustellen, dass sie ausgelöst werden. Ich tausche manchmal die minimale Breite: 320px gegen eine maximale Breite: 480px, da unter 320 möglicherweise nichts angezeigt wird.

— DBUK
quelle