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.
8
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:
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.