wake-up-neo.com

Allgemeine Haltepunkte für Medienabfragen auf einer reaktionsfähigen Site

Deshalb arbeite ich an meiner ersten responsiven Website, auf der Medienanfragen umfassend genutzt werden. Ich habe mich gefragt, ob es einige gängige Seitenbreiten gibt, für die ich optimieren sollte.

Ich werde wahrscheinlich eine maximale Breite haben (die nicht vollständig flüssig wird). Ich denke, ich werde vielleicht 3-5 eingestellte Breiten mit lustigen kleinen CSS3-Übergängen zwischen ihnen haben (ähnlich wie CSS-Tricks funktioniert).

Momentan sind die Zahlen, die ich benutze, etwas willkürlich:

@media all and (max-width: 599px){...}
@media all and (min-width: 600px) and (max-width:799px){...}
@media all and (min-width: 800px) and (max-width:1024px){...}
@media all and (min-width: 700px) and (max-width: 1024px){...}
@media all and (min-width: 1025px) and (max-width: 1399px){...}
@media all and (min-width: 1400px){...}

Außerdem habe ich gelesen, dass sich einige Mobilgeräte nicht wie erwartet verhalten (mit @media). Wo kommt das ins Spiel und wie soll ich mit diesen Situationen umgehen?

42
Zach Lysobey

Berücksichtigen Sie bei der Festlegung von Haltepunkten für Ihre Medienabfragen die folgenden Realitäten:

  • Es gibt Hunderte verschiedener Bildschirmgrößen auf Tausenden verschiedener Geräte.
  • Die Zukunft wird neue Bildschirmgrößen bringen.
  • Apple, Samsung, Microsoft, LG, Nokia und alle anderen Gerätehersteller können die Bildschirmgröße ihrer beliebten Modelle jederzeit ändern.

Bei so vielen Ansichtsfenstermöglichkeiten klingt das Zuordnen von Haltepunkten zu bestimmten Geräten nicht nach einer effizienten Strategie. Nur auf dem Laufenden zu bleiben, was beliebt ist, was neu ist und was sich geändert hat, wird eine unendliche Aufgabe sein.

Ein besserer Ansatz könnte darin bestehen, Haltepunkte basierend auf Inhalt und Layout festzulegen.

Bei diesem Ansatz passt sich Ihre Site anhand ihrer natürlichen Haltepunkte an all Ansichtsfenstergrößen an und nicht an künstliche Haltepunkte, die auf derzeit übliche Bildschirmgrößen abzielen.

Diese Methode ist so einfach und leicht, dass es kaum zu glauben ist:

  1. Führen Sie Ihre Website auf einem Desktop oder Laptop aus.
  2. Beachten Sie beim Verengen des Browserfensters, wie die Website reagiert.
  3. Wenn Sie den Punkt erreichen, an dem Ihr Layout nicht mehr perfekt ist, ist dies Ihr erster Haltepunkt.
  4. Passen Sie Ihre Site an die Bildschirmgröße an (die möglicherweise keine Beziehung zu einem Gerät hat).
  5. Verengen Sie das Browserfenster weiter.
  6. Wenn Sie das nächste Layoutproblem treffen, ist dies Ihr zweiter Haltepunkt.
  7. ... und so weiter und so fort.

Wenn Sie Mobile-first entwerfen, läuft der Prozess natürlich in umgekehrter Reihenfolge ab: Beginnen Sie mit einem schmalen Bildschirm und arbeiten Sie sich heraus.

Mit natürlichen Haltepunkten müssen Sie sich nicht mehr auf ein riesiges Universum von Ansichtsfenstergrößen konzentrieren, da sich Ihre Site jetzt und in Zukunft an jedes Gerät anpassen kann.


Laut einem Entwickler bringt dieser Ansatz Haltepunkte mit vollem Kreis zu ihrer ursprünglichen Absicht:

Ich bin mir nicht sicher, wie wir überhaupt auf den Begriff "gerätespezifische Haltepunkte" gekommen sind ... Wie ich es verstanden habe, war der Begriff "Haltepunkt" immer ein Hinweis darauf, wo der Inhalt oder das Layout "brechen" würde ( dh fehlerhaft erscheinen) und daher müssten Sie an diesem Punkt eine Medienabfrage anwenden. Aber ich denke, das ist nur Semantik. Ich habe immer gedacht, dass es vernünftig ist, im Kontext von Inhalt oder Layout auf Haltepunkte zu verweisen.

~ Louis Lazaris, ImpressiveWebs

quelle: https://responsivedesign.is/articles/why-you-dont-need-device-specific-breakpoints#comment-168596745


Weitere Informationen (externe Seiten):

25
Michael_B

Auch würde ich definitiv empfehlen, device-width für Ihre Mobilgrößen, es sei denn, Sie möchten, dass Benutzer Ihre Mobilstile sehen, wenn sie die Größe ihres Browserfensters auf einem nicht mobilen Gerät ändern. width ist die Breite des Ansichtsfensters und device-width ist die aktuelle Auflösung des Geräts.

Außerdem habe ich gelesen, dass sich einige Mobilgeräte nicht wie erwartet verhalten (mit @media).

Du hast Recht. Viele Geräte geben Ihnen nicht die Zeichen width oder device-width, die Sie erwarten, insbesondere beim Wechsel zwischen Quer- und Hochformat (im Hochformat wird häufig die Querformatbreite angegeben). Das automatische Zoomen von Geräten kann auch einen Schraubenschlüssel in die Sache stecken. Die Verwendung des Metatags Ansichtsfenster kann bei vielen dieser Probleme Abhilfe schaffen. (Mehr Infos dazu hier)

43
Drew Gaynor

Das benutze ich ...

@media screen and (max-width:320px) {}
@media screen and (min-width:321px) and (max-width:639px) {}
@media screen and (min-width:640px) and (max-width:959px) {}
@media screen and (min-width:960px) and (max-width:1279px) {}
@media screen and (min-width:1280px) and (max-width:1599px) {}
@media screen and (min-width:1600px) {}
@media screen and (min-width:1920px) {}
@media print {}

Es gibt alle Arten von anderen, je nach Bedarf (min-width ohne max-width oder max-width ohne min-width), aber dies ist meine Grundeinstellung.

Ich persönlich habe die ungewöhnlichen Breiten, die viele Leute verwenden, nie verstanden. Zum Beispiel hat 20 und höher fünf CSS3-Medienabfrageschritte: 480, 600, 768, 992 und 1382px.

Das ergibt für mich keinen Sinn. Logische Unterbrechungen erfolgen in Intervallen von 320px (320, 640, 960, 1280, 1600, 1920). Beachten Sie, dass diese Unterbrechungen für so gut wie jedes Gerät in beiden Richtungen ein etwas anderes Layout ergeben können (Omnia 240x400, iPhone 320x480, Droid x 480x858, iPad 768x1024, Galaxy S3 720x1280, und es handelt sich um 1920x1080-Tablets).

JJ

21
doubleJ

einige Vorsätze zu suchen:

iPhone-Bildschirm (viele andere Smartphones haben ähnliche Bildschirmgrößen: 960 x 640 Pixel Auflösung bei 326 ppi http://www.Apple.com/iphone/specs.html

iPad-Bildschirm (viele andere Tablets haben ähnliche Bildschirmgrößen mit einer Auflösung von 1024 x 768 Pixel bei 132 Pixel pro Zoll (ppi) http://www.Apple.com/ipad/specs/

'normaler' Bildschirm Viele normale Bildschirme haben auch eine Auflösung von 1024 mal 768 Pixel, laut: http://www.w3schools.com/browsers/browsers_display.asp aber ich bin nicht für ihre Vertrauenswürdigkeit bürgen.

Ich suche jetzt nach mehr Daten.

1
bigblind