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.

Antworten:



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.

Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.