Between the Lines

Media Queries eignen sich hervorragend, um Werte bei verschiedenen Bildschirmgrößen in plötzlichen Sprüngen zu ändern. Aber durch die Kombination der Leistung von calc() und Viewport-Einheiten wie vw und vh können wir eine Menge an Fluidität über unsere Layouts hinweg erzielen. Dafür werden wir eine Technik namens lineare Interpolation verwenden.

Lineare Interpolation ist eine Formel, die verwendet wird, um einen Wert zwischen zwei Punkten auf einer Linie zu finden. In unserem Fall sind diese beiden Punkte CSS-Werte, wie Schriftgrößen, Ränder oder Breiten, zwischen denen wir über eine Reihe von Viewport-Breiten interpolieren möchten.

Der Grund, warum wir zwischen Werten über eine Reihe von Viewport-Breiten interpolieren möchten, ist, die Erstellung mehrerer Breakpoints zu vermeiden, um den Fluss unserer Inhalte zu steuern, wenn sich der Viewport ändert. Stattdessen lassen wir den Browser des Benutzers nach unseren Anweisungen berechnen, welche Werte er erhält. Lassen Sie es mich erklären.

Der folgende Ausschnitt ist eine Sass-Funktion, die auf linearer Interpolation basiert und die wir bei Aranja between nennen.

/**
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */

@function between($from, $to, $fromWidth, $toWidth) {
  $slope: ($to - $from) / ($toWidth - $fromWidth);
  $base: $from - $slope * $fromWidth;

  @return calc(#{$base} + #{100vw * $slope});
}

Die Funktion wird wie folgt verwendet

$small: 400px; 
$large: 1000px;

.Container {
  /* The base (smallest) value. */
  padding: 20px;

  /* In $small it should be 20px and in $large it should be 100px,  */
  /* In viewports between that its padding should be calculated */
  @media (min-width: $small) {
    padding: between(20px, 100px, $small, $large);
  }

/* In $large we cap the value at 100px */
  @media (min-width: $large) {
    padding: 100px;
  }
}

Das obige Codebeispiel zeigt, wie wir den Abstand eines Containers von 20px in "mobiler" Größe auf 100px in "Desktop"-Größe zwischen verändern können. Jede Größe dazwischen erhält einen berechneten Abstand zwischen 20 und 100 Pixeln. Um zu verhindern, dass der Abstand den Maximalwert überschreitet, begrenzen wir ihn mit einem Breakpoint.

Versuchen Sie, die folgende Demo zu verkleinern, um das Beispiel in Aktion zu sehen

Sehen Sie sich den Pen an

Die between-Funktion eignet sich hervorragend zur Lösung von Abstandsproblemen. Probleme, die wir zuvor manuell mit verschiedenen Media Queries gelöst hätten.

Beispiel-Layout

Die talentierte Carly Sylvester hat mir den folgenden Wireframe zur Verfügung gestellt, den sie für eine Freiwilligen-Feuerwehr-Website entworfen hat, damit ich diese Technik an einem realen Layout demonstrieren kann.

Das Design-Dokument besteht aus Desktop-, Tablet- und Mobilversionen der Website mit 1440px, 720px bzw. 324px.
In Wirklichkeit sind die Grenzen zwischen diesen verschiedenen Geräten nicht so klar definiert, daher werden wir die gegebenen Werte als Zielpunkte verwenden und mit unserer Funktion dazwischen interpolieren.

Beachten Sie, wie das Layout der Desktop- und Tablet-Versionen ähnlich ist, abgesehen von der Verwendung von Weißraum und Schriftgrößen – zwischen denen wir nahtlos interpolieren können. Wenn wir unseren kleinsten Zielpunkt erreichen, schnappen wir das Layout in ein klassisches Vollbild-Mobil-Layout.

Sehen Sie sich den Pen an

Zum Vergleich sehen wir die Implementierung auf die übliche Weise, bei der die 3 Haupt-Breakpoints verwendet werden, um das Layout auf seine neuen Werte zu setzen.

Sehen Sie sich den Pen an

Videos von Demos

Versuchen Sie, die Demos in verschiedenen Bildschirmgrößen zu durchsuchen, und die Vorteile unserer Funktion sollten klar sein. Um die "normale" Version der Website zu verbessern, müssten wir mehr Breakpoints zusätzlich zu den ursprünglichen drei aus dem Design-Dokument hinzufügen, was zu mehr Sprüngen führt.

Kombiniert mit der Macht von rem

Eine leistungsstarke Technik, die wir mit der Funktion machen können, ist, die Root-font-size zu between und unsere Stile auf rem zu basieren

Sehen Sie sich den Pen an

Die rem-Einheit bezieht sich auf die Root-font-size (die auf dem Element :root oder html gesetzte Schriftgröße), um ihren Wert zu bestimmen, und die Root-font-size bezieht sich auf die Viewport-Breite, um ihren Wert zu bestimmen. Wir setzen die Root-font-size auf 10px am kleinsten und 18px am größten, und das Ergebnis ist ein sanfter Übergang zwischen den beiden. Die kleinste Größe der Karte in der Demo beträgt immer 245px bei unserem $small-Breakpoint und wächst allmählich, bis sie bei unserem $large-Breakpoint ihren Höhepunkt von 440px erreicht.

Abschluss

Ich bin davon überzeugt, dass wir durch die Nutzung dieser Technik das Web zu einem besseren Erlebnis für Benutzer machen können, die Geräte nutzen, die nicht in die Verallgemeinerung von "mobilen" oder "Tablet"-Größen passen. Für mich zumindest macht es auch den Entwicklungsprozess angenehmer, da weniger Layout-bedingte Fehler auf meinem Tisch liegen.

Hinsichtlich der Browserunterstützung – die Tatsache, dass wir nur calc() und vw für die Funktionsweise der Technik benötigen, macht sie in den USA und Europa bei etwa 97 % und weltweit bei etwa 84 % verfügbar.

In den obigen Demos verwenden nicht unterstützte Browser (hauptsächlich Opera Mini und UC Browser) entweder unsere niedrigsten (Basis) oder unsere höchsten (begrenzten) Werte, abhängig von der Viewport-Breite.