Erstellen Sie adaptive Layouts ohne Medienabfragen

Ich habe lange versucht, auf Webseiten eine perfekte visuelle Komposition zu erreichen. Ich hatte in meiner täglichen Arbeit große Probleme mit CSS-Haltepunkten und war nie ganz zufrieden mit den üblichen Methoden zum Umgang mit dem reaktionsschnellen Layout. Kürzlich habe ich eine sehr coole entdeckt sich anpassendes Webdesign Trick, der alles einfach, konsistent und logisch macht, und ich bin gespannt darauf, ihn mit Ihnen zu teilen.

In diesem Artikel geht es hauptsächlich um kreative Entwicklung, daher sowohl für Front-End-Entwickler, die diese Technik möglicherweise nützlich finden, als auch für Webdesigner, die ein allgemeines Verständnis der Webproduktion und der Verbesserung der endgültigen Ausgabe haben sollten. Ich gehe davon aus, dass Sie bereits über CSS, Haltepunkte und Medienabfragen Bescheid wissen.

Importieren Sie Illustrator-Ebenen in After Effects

Der traditionelle Weg

Adaptive Layouts: Haltepunkte



Haltepunkte können zu unbefriedigenden Ergebnissen für nicht standardmäßige Ansichtsfenster führen

Tragbare Geräte erobern die Welt. Eine Vielzahl von Geräten aller Art verändert die Art und Weise, wie wir Websites erstellen. Bei einer 'reaktionsfähigen Website' gehen die meisten Menschen nur von Desktop- und Mobilversionen aus (manchmal Desktop, Tablet, Mobile). So funktioniert es traditionell:

h1 { font-size: 80px; } .container { width: 980px; margin: 0 auto; } @media (max-width: 1023px) { h1 { font-size: 48px; } .container { width: auto; padding: 0 30px; } }

In der Tat in der Regel die Website-Layout Wir sehen, ist nicht für unser Gerät gemacht. Lassen Sie uns zum Beispiel sehen, wie wir die Schriftgröße von anpassen

Titel:

Adaptive Layouts

Mit nur einem Haltepunkt können Sie seltsam aussehende Punktgrößen erhalten

Sie sehen, unsere

Der Titel hat 'Schriftgröße: 48px' auf Geräten mit 320px und 800px Breite und 'Schriftgröße: 80px' auf 1024px und 2560px.

Natürlich können wir weitere Haltepunkte hinzufügen, aber die Anzahl der verschiedenen Geräte ist unzählig! Dies wird die Designspezifikationen sehr kompliziert und verwirrend machen, da es schwierig ist zu wissen, welcher Wert auf welchen Bildschirm angewendet wird.

Adaptive Layouts: Schriftgröße

Sie können nie genug Haltepunkte erstellen, um die Schriftgröße auf jedem Bildschirm perfekt zu machen

Was wir wirklich brauchen, ist Folgendes:

Ansichtsfenster-Einheiten

Adaptive Layouts: Ansichtspunkteinheiten

Ansichtsfenster-Einheiten verbessern die Dinge, aber sie brauchen noch Arbeit

Die Lösung für dieses Problem umfasst die Ansichtsfenstereinheiten VW und VH. Hierbei handelt es sich um Längeneinheiten, die 1/100 der Breite / Höhe des Ansichtsfensters darstellen (von Browsern ab IE9 + weitgehend unterstützt).

Wir können diese verwenden, um die Eigenschaften einer Webseite entsprechend ihrer Größe anzupassen. Die Situation wird sich etwas verbessern, aber der Schmerz ist immer noch der gleiche:

h1 { font-size: calc( ( 80 / 1920 ) * 100vw; } .container { width: 80vw; margin: 0 auto; } @media (max-width: 1023px) { h1 { font-size: calc( ( 48 / 375 ) * 100vw; } .container { width: 90vw; } }

Wir wissen nie, ob es zu groß oder zu klein ist.

Wie können wir ein wirklich adaptives Layoutsystem aufbauen? Wie gestalten wir eine reaktionsfähige Website, die nativ von 320px bis 2560px funktioniert?

Photoshop ersetzt Farbe durch bestimmte Farbe

Im Idealfall sollte Ihr Modell die Logik hinter dem Layout erläutern und erläutern, wie es sich von einer kleineren Auflösung zu einer größeren anpasst:

Die Lösung

Adaptive Layouts: Lösung

Hier erfahren Sie, wie Sie ein wirklich anpassungsfähiges Layoutsystem erstellen

Wir möchten die Eigenschaften kontinuierlich von einem kleinen Bildschirm auf einen großen anpassen. Keine Haltepunkte und keine Medienabfragen. Was wir wollen, ist ein einziger Wert, der für jede Anzeige funktioniert.

Eine mathematische Funktion mit zwei Variablen ist der Schlüssel. Wenn wir beispielsweise die Schriftgröße eines Titels anpassen möchten, sollte die Funktion folgendermaßen aussehen:

1920x + y = 80
375x + y = 48

1920 - Standard-Desktopbreite in einem Designmodell (entspricht 100vw)
375 - Standard-Mobilbreite in einem Designmodell (entspricht 100vw)
80 - gewünschte Schriftgröße für den H1-Titel auf dem Desktop
48 - gewünschte Schriftgröße für H1-Titel auf Mobilgeräten

wie man Konzeptkunst in Photoshop macht

Dies sind die X- und Y-Werte:

x = (80 - 48) / (1920 - 375)
x = 0,0207

y = 80 - 1920 * 0,0207
y = 40.256

Um diese Werte verwenden zu können, benötigen wir die CALC-CSS-Funktion, um Berechnungen auf der Webseite durchzuführen (die von Browsern ab IE9 + weitgehend unterstützt wird). Wir sollten X * 100-mal zählen (weil 1VW-Einheit = 1/100 der Breite des Ansichtsfensters).

Wir übernehmen unsere ursprüngliche Funktion:
1920x + y = 80
375x + y = 48

Ersetzen Sie 1920 durch 100vw:
100vw * x + y = gewünschter Wert

Ersetzen Sie x und y durch die Werte:
100 vw * 0,0207 + 40,256 = gewünschter Wert

Wir bekommen den endgültigen CSS-Stil:

h1{ font-size: calc(2.07vw + 40.25px)}

Überraschenderweise funktioniert das endlich so, wie wir es wollten!

Nur eine Eigenschaft für alle Anzeigen. Die Werte müssen nicht immer wieder überschrieben werden. Sie können alle Arten von Eigenschaften anpassen und berechnen: Breite, Schriftgröße, Abstand, Rand usw.

Versuchen wir, mit dieser Technik ein tatsächliches Layout zu erstellen:

Dieser Ansatz hat jedoch einen Nachteil: Es ist schwer zu verstehen, welcher Wert hinter dieser CALC-Funktion steht. Wie können wir es vereinfachen?

Wie heißt der Vogel vom Twitter-Logo?

Wenn Sie täglich HTML codieren, sind Sie wahrscheinlich mit SASS / SCSS-Vorprozessoren vertraut. Hier ist eine kleine Hilfe für Sie: Lassen Sie uns ein 'Mixin' machen und all diese Berechnungen automatisch durchführen und dabei unsere ursprünglichen Werte beibehalten.

Es ist die gleiche Funktion wie oben beschrieben, aber als SASS-Mixin erstellt:

$display-wide: 1920 $display-narrow: 375 @mixin fluid($property, $minValue, $maxValue) $x: ($maxValue - $minValue)/($display-wide - $display-narrow) $y: $maxValue - $display-wide * $x #{$property}: calc(#{100*$x}vw + #{$y}px) h1 @include fluid('font-size',48,80) .container @include fluid('width',315,1580) @include fluid('padding',30,60)

Adaptive Layouts: Mixin

Ein SASS-Mixin kann den gesamten Prozess vereinfachen

Diese Technik bietet eine sehr ausgefeilte Lösung, um endlich wirklich reaktionsschnelle Weblayouts zu erstellen. Es unterstützt die meisten Browser, stellt sicher, dass Ihr Projekt einem Besucher korrekt angezeigt wird, vereinfacht die Struktur Ihrer Stile und macht Ihr Weblayout vor allem konsistent und logisch. Ich hoffe, es kann Ihnen helfen, einige erstaunliche Webprojekte zu starten.

Zum Thema passende Artikel: