Spaß-Tipp: Verwenden Sie calc(), um die Höhe einer Hero-Komponente zu ändern

Das Konzept der Fluid Typography wurde vor ein paar Jahren aufgeworfen. Die Hauptidee ist, dass wenn man weiß, wie groß die Schrift bei zwei verschiedenen Ansichten ist, dann kann die Schrift fließend zwischen den beiden Größen skaliert werden. Wir hatten eine jQuery-Lösung dafür in FitText (natürlich für Überschriften gedacht), bis die calc() Funktion herauskam und uns eine reine CSS-Lösung gab.

p {
  font-size: calc(16px + (24 - 16)*(100vw - 400px)/(800 - 400));
}

Die wichtigen Zahlen hier sind 24px (die größere Schrift bis zu 800px Ansichten) und 16px (die kleinere Schriftgröße bis zu 400px Ansichten). Ich würde die Begriffe "Minimum" oder "Maximum" nicht verwenden, um Schriftgrößen und Ansichten in diesem Kontext zu beschreiben, da dies etwas irreführend ist. Tatsächlich müssen Sie immer noch eine Standard-Schriftgröße für Ansichten kleiner als 400px und größer als 800px angeben - andernfalls wird die Schrift mit der gleichen Skalierung der Gleichung immer kleiner (oder größer). Oder, wenn Sie fancy sind, könnten Sie eine weitere Skalierung für größere Bildschirmgrößen definieren.

Das funktioniert wirklich gut und Sie sollten sich unbedingt die Mathematik dahinter ansehen.

Abstand und Zeilenhöhe?

Ich mochte das Konzept der Fluid Typography so sehr, dass ich mich gefragt habe, ob es auch für andere Eigenschaften funktionieren könnte. Und das tut es! Sie können keine Prozente verwenden, aber solange Sie sich an px, em oder rem Einheiten halten, ist es in Ordnung. Ich bin ein Pixel-Typ, daher habe ich alle meine Experimente damit durchgeführt, aber es gibt diesen netten Generator, der Ihnen bei Umrechnungen hilft, wenn Sie ihn brauchen.

Also, zurück zu padding und line-height. Mit der gleichen calc() Logik können wir ein vollständig fließendes *Layout* mit festen Werten für definierte Bildschirmgrößen erzielen.

Ich habe diese Idee auf dieser Website umgesetzt, mich aber auf font-size und line-height beschränkt. Und ja, es wird einfacher, all diese Mathematik zu übersehen und zu nutzen, je mehr man damit arbeitet.

Ein Exkurs über "Hero"-Komponenten

Wenn Sie wie ich sind, dann haben Sie vielleicht etwas gegen das, was wir alle als Hero-Komponente kennengelernt haben. Es ist allgegenwärtig bis zu dem Punkt, dass es zu einem festen Bestandteil von Designsystemen wie Bootstrap geworden ist.

Mein Hauptkritikpunkt betrifft den besten Weg, sie responsiv zu gestalten. Wenn es sich nicht um eine *vollbildgroße* Hero-Komponente handelt (d. h. sie nimmt bei jeder Größe den gesamten Viewport ein), dann frage ich normalerweise den Designer, wie sich die Seite verhalten soll. Oft gibt es ein Verhältnis der Hero-Seite, das gut funktioniert, sodass ich padding-bottom in % mit absoluter Positionierung des inneren Inhalts verwenden kann. Diese Taktik funktioniert meistens,

Das macht Spaß und funktioniert gut, besonders auf der Desktop-Version einer Website. Sie erhalten eine ordentliche Hero-Sektion, das Verhältnis ist gut und der Inhalt ist zentriert.

Aber was passiert, wenn Sie beginnen, die Ansicht zu verkleinern? Die Hero-Komponente bleibt bis zu einem gewissen Punkt lesbar, Sie müssen wirklich das Verhältnis ändern.

Wenn wir von einem Desktop-First-Responsive-Ansatz ausgehen, könnten wir mit einem horizontalen Rechteck beginnen, das so weit schrumpft, dass auf kleinen Bildschirmen ein vertikales Rechteck übrig bleibt.

Das ist eine mühsame Angelegenheit, denn Sie könnten viele Zeilen CSS benötigen, um eine schöne und lesbare Hero-Sektion bei verschiedenen Breakpoints zu erhalten.

Es muss doch einen besseren Weg geben, oder? Was wäre, wenn die Hero-Komponente ihre Höhe erhöhen könnte, während die Seitenbreite schmaler wird?

Zurück zur Fluidität!

Also wandte ich mich wieder der calc() Funktion zu, die in diesen anderen Situationen funktionierte, wie z. B. dem Browser, der die Mathematik handhabt und die Dinge entsprechend skaliert, wenn sich die Ansicht ändert.

Hier ist der CSS-Code aus dem Fluid Typography Beispiel, mit dem wir begonnen haben

p {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  font-family: 'Open Sans', sans-serif;
  font-size: calc(24px + (18 - 24)*(100vw - 400px)/(1200 - 400));
  line-height: 1.5;
  padding: 10px;
}

Hier ist, was wir wollen: eine Hero-Komponente, die größer wird, wenn Sie die Seite verkleinern. Ich habe Pixel-Einheiten für den *fließenden Teil* und Prozente überall sonst verwendet.

Hier ist ein Screencast, wie die Lösung aussieht, zu der ich gekommen bin

Live-Demo

Das ist ziemlich nützlich, wenn Sie dem Text mehr vertikalen Raum geben möchten. Wenn Sie die Ansichtsbreite von groß auf klein verkleinern, erhalten Sie mehr Zeilen für denselben Text, da die Schriftgröße nicht zu klein sein kann.

Ziemlich nett, oder? Noch eine Möglichkeit, wie calc() ein Szenario für mich lösen konnte.

Ja, es gibt einige Vorbehalte

Die Browserunterstützung ist sehr gut und erreicht fast 93 % der Nutzer (zum Zeitpunkt des Schreibens), mit der Hauptausnahme von Opera Mini.

Denken Sie auch daran, dass diese calc() Technik nur px, em und rem Einheiten unterstützt. Aber die hier behandelten Beispiele lassen sich leicht in Einheiten für Dinge wie padding-bottom Prozente in Pixel umwandeln, da die Hero-Komponente typischerweise 100% breit ist.

Oh! Und vergessen Sie nicht, Ihre Werte vor und nach den Breakpoints in der calc() Funktion zurückzusetzen. Andernfalls erhalten Sie entweder sehr große oder sehr kleine Werte für die Ziel-Eigenschaften.

Was sagen Sie?

Dies ist wahrscheinlich nur eine Möglichkeit, wie wir die Situation handhaben können, und sie wurde hauptsächlich von meinem Interesse an der calc() Funktion angetrieben. Das wirft die Frage auf: Wie haben Sie die Skalierung der Hero-Komponentenhöhe gehandhabt? Haben Sie calc() dafür verwendet? Bevorzugen Sie es, Breakpoints bei verschiedenen Breiten zu verwalten? Gibt es etwas anderes, das Sie verwenden? Lassen Sie es uns in den Kommentaren wissen!