Spaß-Tipp: Verwenden von calc() zum Ändern der Höhe eines Helden Komponente

0
12

Das Konzept der Flüssigkeit Typografie wurde herumgeworfen vor ein paar Jahren. Die Grundidee ist, dass, wenn Sie wissen, was die Größe der Schrift wird in zwei verschiedenen viewport-Größen haben, können Sie die schriftart, die Skalierung reibungslos zwischen den beiden Größen. Wir hatten eine jQuery-Lösung für das in FitText (gemeint überschriften natürlich), bis die calc () – Funktion geliefert wurde, gibt uns eine Reine CSS-Lösung.

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

Finden Sie die Pen-Fluid Typografie von Martino Stenta (@martinostenta) auf CodePen.

Die wichtigsten zahlen sind hier 24px (die größere Schrift bis zu 800px Ansichtsfenster) und 16px (die kleinere Schrift unten auf 400px Ansichtsfenster). Ich würde nicht verwenden die Begriffe “minimum” oder “maximum” zu beschreiben, Schriftgrößen und viewports in diesem Kontext, weil es ein wenig irreführend. In der Tat, die Sie noch brauchen, um eine Standard-Schriftgröße für das Ansichtsfenster kleiner als 400px und größer als 800px — ansonsten, die Schrift wird immer kleiner (oder größer) mit dem gleichen Maßstab der Gleichung. Oder, wenn Sie Lust haben, könnten Sie eine andere Skala für die größere Bildschirm-Größen.

Finden Sie die Pen-Fluid Typografie mit reset-Größe von Martino Stenta (@martinostenta) auf CodePen.

Es funktioniert wirklich gut, und Sie sollten auf jeden Fall überprüfen Sie die Mathematik, die dahinter steckt.

Padding und line-height?

Ich mochte das Konzept der Flüssigkeit Typografie so viel, dass ich mich gefragt, ob es funktionieren könnte mit anderen Eigenschaften. Und das tut es auch! Sie können nicht verwenden Sie einen Prozentsatz, aber solange man mit px, em oder rem-Einheiten, dann ist es OK. Ich bin ein pixel-Kerl, also alle meine Experimente verwendet haben, aber es gibt dieses nette generatorthat hilft Ihnen bei Umbauten, wenn Sie es brauchen.

Also, zurück zu padding und line-height. Mit der gleichen calc () – Logik, die wir erreichen können, eine voll Flüssigkeit *layout* mit festen Werten für die definierten Bildschirmgrößen.

Finden Sie den Stift, Reines CSS-Variable-Padding, Font-Size und Line-Height von Martino Stenta (@martinostenta) auf CodePen.

Ich führte diese Idee auf dieser Webseite, aber behielt es für font-size und line-height. Und, ja, es wird einfacher, all das vorbei schauen Mathematik und je mehr Sie mit ihm arbeiten.

Finden Sie das Stift-Beispiel calc() auf font-size und line-hieght von Martino Stenta (@martinostenta) auf CodePen.

Ein Exkurs über “Hero” – Komponenten

Wenn Sie wie ich sind, dann könnten Sie die Frage stellen, was wir alle sind gekommen, um zu wissen, wie die Helden-Komponente. Es ist allgegenwärtig in dem Ausmaß, dass es ist geworden ein Grundnahrungsmittel in den design-Systemen (wie Bootstrap) und Sie haben vielleicht auch gesehen, dass es hübsch aufs Korn genommen, die auf Seiten wie dieser.

Mein Haupt-Kritikpunkt betrifft die beste Weg, um Sie zu reagieren. Wenn es nicht ein *Vollbild* held (d.h. nimmt über den gesamten viewport in jeder Größe), dann kann ich in der Regel Fragen Sie den designer, wie sich die Seite Verhalten soll. Es gibt oft ein Teil der Helden-Seite, die funktioniert einwandfrei, so dass mir erlaubt, zu use padding-bottom in % mit einer absoluten Positionierung des inneren Inhalt. Diese Taktik funktioniert meistens,

Das ist lustig, und es funktioniert gut, vor allem auf die desktop-version einer website. Sie am Ende mit einer ordentlichen Helden-Abschnitt, der Anteil ist gut, und der Inhalt wird zentriert.

Finden Sie die Stift-Standard-held Abschnitt mit ‘padding-bottom’ durch Martino Stenta (@martinostenta) auf CodePen.

Aber was passiert, wenn Sie beginnen verkleinern des Viewports? Der held lesbar bleibt, bis zu einem Punkt, die Sie wirklich brauchen, um zu ändern, der Anteil.

Angenommen, wir arbeiten mit einem desktop-first-responsive-Ansatz konnten wir beginnen mit einem horizontalen Rechteck, dass die Waage nach unten zu dem Punkt, wo wir sind Links mit einem vertikalen Rechteck auf kleinen Bildschirmen.

Held Komponente mit unterschiedlichen Anteilen, basierend auf Gerät

Dies ist ein PITA, weil Sie könnte Ende-up mit vielen Zeilen CSS, um eine schöne und gut lesbare hero Abschnitt an verschiedenen Haltepunkten.

Es muss einen besseren Weg, richtig? Was ist, wenn der held könnte erhöhen Ihre Höhe, während die Breite Seite immer schmaler?

Zurück zu Flüssigkeit!

So drehte ich mich wieder um die calc () – Funktion gearbeitet, die in diesen anderen Situationen, wie der browser mit der Mathematik und der Maßstab der Dinge entsprechend, als die viewport-änderungen.

Hier ist die CSS von der Flüssigkeit, Typografie Beispiel starten wir mit:

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: ein held Komponente größer wird, während Sie verkleinern der Seite. Ich verwendete pixel-Einheiten für die Flüssigkeit Teil-und Prozentangaben, wie überall sonst.

Hier ist ein screencast, wie die Lösung landete ich auf:

Live-Demo

Dies ist sehr nützlich, wenn Sie möchten, um mehr vertikalen Platz auf den text. Die Verkleinerung des viewport-Breite von groß bis klein wird am Ende mit mehr Linien für den gleichen text, da kann die Schriftgröße nicht zu klein sein.

Finden Sie die Stift-Held Abschnitt mit calc() von Martino Stenta (@martinostenta) auf CodePen.

Ziemlich nett, Recht? Noch in anderer Weise calc() erwies es sich lösen könnte, ein Szenario für mich.

Ja, es gibt einige Einschränkungen

Browser-Unterstützung ist sehr gut, der Auszählung fast 93% der Nutzer (zur Zeit des Schreibens), mit der wichtigsten Ausnahme von Opera mini.

Dieser browser support-Daten von Caniuse, welche hat mehr Details. Eine Zahl zeigt an, dass browser die Funktion unterstützt in dieser version.

Desktop

ChromeOperaFirefoxIEEdgeSafari
19* 15 4* 10 12 6*

Mobile / Tablet

iOS SafariOpera MobileOpera MiniAndroidAndroid ChromeAndroid Firefox
6.0-6.1* 46 Keine 67 69 62

Denken Sie auch daran, dass dieser calc () ” – Technik unterstützt nur px, em-und rem-Einheiten. Aber die Beispiele, die wir hier behandelt werden, sind ziemlich einfach zu konvertieren Einheiten für Dinge wie padding-bottom Prozentsätze zu Pixeln, da der held ist, in der Regel 100% in der Breite.

Oh! Und denken Sie daran, reset Ihre Werte vor und nach der Haltepunkte in die calc () – Funktion. Sonst wirst du am Ende mit entweder sehr große oder sehr kleine Werte für den Ziel-Eigenschaften.

Was sagen Sie?

Dies ist wahrscheinlich nur eine Möglichkeit, wie wir mit der situation umgehen können und es war in Erster Linie mein Interesse für die calc () – Funktion. So stellt sich die Frage: wie haben Sie behandelt die Skalierung held Komponente Höhe? Haben Sie setzen calc() zu verwenden? Bevorzugen Sie streiten Haltepunkte auf verschiedenen weiten? Ist es etwas, das Sie verwenden? Leuchtet die Kommentare!

Das Jetpack WordPress-plugin läuft auf dieser Website, indem Sie nicht nur die verwandten Beiträge unten, aber die social sharing links oben, der Sicherheit und des backups, Markdown-support, site-Suche, das Kommentar-Formular, postulieren soziale Netzwerk-verbindungen und vieles mehr!