Grundlagen des Responsive Design



Beim Responsive Design gibt es zwei Grundprinzipien: die Verwendung von Haltepunkten und die Skalierung von Flüssigkeiten: Haltepunkte CSS3-Medienabfragen erstellen bedingte Grenzen , an denen die Breite des Browsers eines bestimmten Gerätetyps alternative Stile auslöst. Hier bei Blue Fountain Media verwenden wir im Allgemeinen einen Haltepunkt mit maximaler Breite, um einen Desktop-First-Build (verkleinern) im Vergleich zu einer Grenze mit minimaler Breite für einen Mobile-First-Build (Scale-up) zu erstellen. Abfragen können auch verwendet werden, um die Höhe und sogar die Geräteorientierung zu bestimmen.

Haltepunktgrößen (wir verwenden ab hier die Breite) können in px oder em festgelegt werden. Die Differenzierung in modernen Webdesign Leipzig Browsern ist jedoch im Vergleich zu vor einigen Jahren vernachlässigbar. Haltepunkte können in jeder Größe festgelegt werden, richten sich jedoch in der Regel nach den gängigsten Abmessungen der einzelnen Desktops, Tablet-Porträts, mobilen Landschaften und mobilen Porträts.

Im Allgemeinen sind diese 1200 / 960px, 768px, 480px bzw. 320px breit, obwohl sich die Industriestandards ständig ändern, wenn neue Geräte veröffentlicht werden. Im Laufe der Jahre haben diese Arten von Geräten begonnen, sich miteinander zu vermischen, insbesondere mit der Einführung von Retina-Displays. Infolgedessen stellen Sie möglicherweise fest, dass zwei Geräte mit demselben Haltepunkt übereinstimmen können (z. B. Tablet-Landschaft und Laptop), stellen jedoch möglicherweise auch fest, dass ein bestimmtes Gerät eine eindeutige Größe hat. Hier kommt also das nächste Prinzip ins Spiel.