Linear skalierende Schriftgröße mit CSS Clamp () basierend auf dem Ansichtsfenster

Responsive Typografie hat in der Vergangenheit viele Methoden ausprobiert, wie z. B. Medienabfragen und CSS Calc ().

In diesem Artikel wird ein anderer Ansatz untersucht, der den Text linear zwischen den minimalen und maximalen Größen skalieren soll, wenn die Ansichtsfenster -Breite zunimmt, mit dem Ziel, sein Verhalten an verschiedenen Bildschirmgrößen vorhersehbarer zu machen - alle mit nur einer Zeile von CSS -Code dank clamp() .

Die CSS -Funktion clamp() ist leistungsstark. Es funktioniert für alle Zwecke, ist aber besonders nützlich für die Typografie. Es funktioniert wie folgt: Es akzeptiert drei Werte:

 <code>clamp(minimum, preferred, maximum);</code>

Der Wert, den IH -Renditen zurücksetzt, ist der bevorzugte Wert, bis der bevorzugte Wert unter dem Mindestwert liegt (der Mindestwert wird zurückgegeben) oder über dem Maximalwert (der Maximalwert wird zurückgegeben).

Angenommen, Sie setzen also keinen seltsamen Wert und setzen ihn zwischen den minimalen und maximalen Werten fest, ist es immer der bevorzugte Wert? Nun, Sie sollten Formeln mit bevorzugten Werten verwenden, zum Beispiel:

 <code>.banner { width: clamp(200px, 50% 20px, 800px); /* 是的，您可以在clamp() 中进行数学运算！*/ }</code>

Nehmen wir an, Sie möchten die minimale Schriftgröße des Elements auf 1 REM einstellen, wenn die Ansichtsfensterbreite 360px oder unter und die maximale Schriftgröße 3,5 REM beträgt, wenn die Ansichtsfensterbreite 840px oder höher beträgt.

Mit anderen Worten:

 <code>1rem  = 360px 及以下缩放= 361px - 839px 3.5rem = 840px 及以上</code>

Jede Ansichtsfensterbreite zwischen 361 und 839 Pixel erfordert eine Schriftgröße, die zwischen 1REM und 3,5REM linear skaliert ist. Die Verwendung von clamp() ist eigentlich sehr einfach ! Beispielsweise erhalten wir mit einer Ansichtsfensterbreite von 600 Pixel (zwischen 360 und 840 Pixel) den Zwischenwert zwischen 1REM und 3,5REM, d. H. 2,25REM.

Das Ziel, das wir mit clamp() erreichen möchten, wird als lineare Interpolation bezeichnet: Erhält die Zwischeninformationen zwischen zwei Datenpunkten.

Hier sind vier Schritte, um dies zu tun:

Schritt 1

Wählen Sie die minimalen und maximalen Schriftgrößen sowie die minimalen und maximalen Ansichtsfenster aus. In unserem Beispiel beträgt die Schriftgröße 1REM und 3,5REM und die Breite 360px und 840px.

Schritt 2

Breite in REM konvertieren. Da 1REM bei den meisten Browsern standardmäßig 16px ist (dazu später mehr), werden wir es verwenden. Daher betragen die minimalen und maximalen Ansichtsfensterbreiten 22,5 REM bzw. 52,5 REM.

Schritt 3

Hier werden wir leicht in Richtung des Mathematikaspekts voreingenommen sein. Bei der Kombination bilden die Ansichtsfensterbreite und die Schriftgröße zwei Punkte auf den X- und Y -Koordinatensystemen, und diese Punkte bilden eine Linie.

Wir brauchen diese Linie - genauer gesagt, wir brauchen ihre Neigung und ihre Kreuzung mit der Y -Achse. Hier ist die Berechnungsmethode:

 <code>slope = (maxFontSize - minFontSize) / (maxWidth - minWidth) yAxisIntersection = -minWidth * slope minFontSize</code>

Dies führt uns zu einem Steigungswert von 0,0833 und einem y -Achsen -Schnittwert von -0,875.

Schritt 4

Jetzt bauen wir clamp() -Funktion auf. Die Formel für den bevorzugten Wert lautet:

 <code>preferredValue = yAxisIntersection[rem] (slope * 100)[vw]</code>

Die Funktion endet also so:

 <code>.header { font-size: clamp(1rem, -0.875rem 8.333vw, 3.5rem); }</code>

Sie können die Ergebnisse in der folgenden Demonstration visualisieren:

Mach weiter und versuche es. Wie Sie sehen können, wird die Schriftgröße nicht mehr wächst, wenn die Ansichtsfensterbreite 840px beträgt, und wenn die Ansichtsfenster 360px beträgt, wird die Schriftgröße nicht mehr abnimmt. Alles zwischen wechselnden Veränderungen linear.

Was ist, wenn der Benutzer die Root -Schriftgröße ändert?

Möglicherweise haben Sie bei diesem Ansatz einen kleinen Fehler bemerkt: Es funktioniert nur, wenn die Wurzel -Schriftgröße das ist, was Sie denken (16px im vorherigen Beispiel) und sich nie ändert.

Wir konvertieren die Breiten 360px und 840px in REM -Einheiten, indem wir sie bis 16 aufgeben, weil wir annehmen, dass dies die Wurzel -Schriftgröße ist. Wenn der Benutzer seine Präferenz für eine andere Root -Schriftgröße wie 18px anstelle des Standards 16px festlegt, wird die Berechnung schief gehen und der Text wird nicht wie erwartet ärgern.

Wir haben hier nur eine Möglichkeit, hier zu verwenden, nämlich (1) die erforderlichen Berechnungen im Code durchzuführen, wenn die Seite geladen wird, (2) auf Änderungen in der Root -Schriftgröße anhören, und (3) alles neu berechnen, wenn Änderungen auftreten.

Hier ist eine nützliche JavaScript -Funktion zur Durchführung von Berechnungen:

 // Die Ansichtsfensterbreite in Pixel und die Schriftgröße in REM -Funktion Clampbuilder (Minwidthpx, MaxWidthpx, Minfontsize, MaxFontsize) {erhalten
  const root = document.querySelector ("html");
  const pixelsperrem = nummer (getComputedStyle (root) .fontSize.slice (0, -2));

  const minwidth = minwidthpx / pixelsperrem;
  const maxwidth = maxwidthpx / pixelsperrem;

  const slope = (maxfontsize - minfontsize) / (maxwidth - minwidth);
  const yaxisintersection = -Minwidth * Slope Minfontsize;

  return `clamp ($ {minfontsize} rem, $ {yaxisintersection} Rem $ {Slope * 100} vw, $ {maxfontsize} rem)`;
}

// Clampbuilder (360, 840, 1, 3,5) -> "Klemme (1REM, -0,875REM 8.333VW, 3,5REM)"

Ich habe absichtlich weggelassen, wie die zurückgegebene Zeichenfolge in CSS injiziert werden kann , da es je nach Ihren Bedürfnissen viele Möglichkeiten gibt, dies zu tun und ob Sie native CSS, CSS-in-JS-Bibliothek oder etwas anderes verwenden. Außerdem gibt es keine nativen Ereignisse für Änderungen der Schriftgröße, daher müssen wir manuell überprüfen. Wir können setInterval einmal in einer Sekunde überprüfen, dies kann jedoch die Leistung beeinflussen.

Dies ist eher eine extreme Situation. Nur wenige Menschen ändern die Schriftgröße ihrer Browser, und noch weniger Menschen ändern sie, wenn sie Ihre Website besuchen. Wenn Sie jedoch möchten, dass Ihre Website so reaktionsschnell wie möglich ist, ist dies der beste Weg, dies zu tun.

Für diejenigen, denen extreme Situationen nichts ausmachen

UPDATE: Die hier geteilten Ressourcen haben seit der ersten Veröffentlichung dieses Artikels nicht mehr funktioniert. Wenn Sie nach einem Taschenrechner suchen, um die Schriftgrößen unter verschiedenen Ansichtsfenstern zu bestimmen, sollten Sie den Flüssigkeitsgenerator verwenden, der moderne Flüssigkeitsypografie verwendet.

Wie man eine SMS -Neuanpassung vermeidet

Eine solche sorgfältige Kontrolle über die Typografiegröße ermöglicht es uns, andere coole Dinge zu tun-wie das Verhindern, dass Text in verschiedenen Ansichtsfenster-Breiten neu anpasst.

Dies ist das normale Verhalten von Text.

Aber jetzt können wir mit unserer Kontrolle den Text die gleiche Anzahl von Zeilen halten und immer Zeilen mit demselben Wort einwickeln, egal welche Ansichtsfensterbreite wir verwenden.

Wie können wir das tun? Erstens muss das Verhältnis zwischen Schriftgröße und Ansichtsfenster die gleiche bleiben. In diesem Beispiel wechseln wir von 1REM bei 320px zu 3REM bei 960px.

 <code>320 / 1 = 320 960 / 3 = 320</code>

Wenn wir clampBuilder() -Funktion verwenden, wird sie:

 const text = document.querySelector ("p");
text.Style.fontSize = clampbuilder (320, 960, 1, 3);

Es hält das gleiche Verhältnis von Breite zu Schriftart. Der Grund, warum wir dies tun, ist, dass wir sicherstellen müssen, dass der Text bei jeder Breite die richtige Größe hat, damit wir die gleiche Anzahl von Zeilen beibehalten können. Es wird immer noch in unterschiedlichen Breiten angepasst, aber dies ist für die nächste Arbeit, die wir ausführen müssen, notwendig.

Jetzt müssen wir Hilfe von den CSS -Charakteren (CH) -Initen (CH) erhalten, da die richtige Schriftgröße nicht ausreicht. Eine CH -Einheit entspricht der Breite der Glyphen "0" in der Element -Schriftart. Wir möchten den Textkörper so breit wie das Ansichtsfenster machen, nicht indem wir width: 100% , sondern indem width: Xch , wobei x die Anzahl der CH -Einheiten (oder 0) ist, die erforderlich sind, um das Ansichtsfenster horizontal zu füllen.

Um X zu finden, müssen wir die minimale Ansichtsfensterbreite 320px durch die CH -Größe des Elements an der Schriftgröße dividieren, wenn die Ansichtsfensterbreite 320px beträgt. In diesem Fall ist es 1 REM.

Mach dir keine Sorgen, hier ist ein Code -Snippet, um die CH -Größe des Elements zu berechnen:

 // Gibt die Breite des "0" -Glyphens des Elements (in Pixeln) an der gewünschten Schriftgröße zurück
Funktion Calculatech (Element, fontsize) {
  const Zero = document.createelement ("span");
  Zero.Innertext = "0";
  Zero.Style.position = "Absolute";
  Zero.Style.Fontsize = fontSize;

  Element.AppendChild (Null);
  const chpixels = null.getBoundingClientRect (). Breite;
  Element.removechild (Null);

  Chpixel zurückgeben;
}

Jetzt können wir weiterhin die Breite des Textes festlegen:

 Funktion Calculatech (Element, fontsize) {...}

const text = document.querySelector ("p");
text.Style.fontSize = clampbuilder (320, 960, 1, 3);
text.style.width = `$ {320 / calculatech (text," 1rem ")} ch`;

Wow, warte. Etwas Schlimmes passiert. Es gibt eine horizontale Schriftrollenleiste, die die Dinge durcheinander bringt!

Wenn wir über 320px sprechen, sprechen wir über die Breite des Ansichtsfensters, einschließlich der vertikalen Scrollbar. Daher ist die Breite des Textes auf die Breite des sichtbaren Bereichs sowie die Breite der Bildlaufleiste eingestellt, wodurch er horizontal überlaufen wird.

Warum also nicht eine Maßnahme verwenden, die nicht die Breite der vertikalen Bildlaufleiste enthält? Wir können nicht, es liegt an der CSS VW -Einheit. Denken Sie daran, wir verwenden VW in clamp() um die Schriftgröße zu steuern. Sie werden sehen, dass VW die Breite der vertikalen Bildlaufleiste enthält, wodurch die Schriftart zusammen mit der Ansichtsfensterbreite, einschließlich der Scrollbar, skaliert wird. Wenn wir eine Neuanpassung vermeiden möchten, muss die Breite proportional zur Ansichtsfensterbreite sein, einschließlich der Bildlaufleiste.

Also, was sollen wir tun? Wenn wir das tun:

 text.style.width = `$ {320 / calculatech (text," 1rem ")} ch`;

… Wir können das Ergebnis eingrenzen, indem wir es mit einer Zahl von weniger als 1. 0,9 multiplizieren können, kann das Problem lösen. Dies bedeutet, dass die Breite des Textes 90% der Ansichtsfensterbreite beträgt, was ausreicht, um den kleinen Raum auszugleichen, den die Bildlaufleiste einnimmt. Wir können es enger machen, indem wir kleinere Zahlen verwenden (z. B. 0,6).

 Funktion Calculatech (Element, fontsize) {...}

const text = document.querySelector ("p");
text.Style.fontSize = clampbuilder (20, 960, 1, 3);
text.style.width = `$ {320 / calculatech (text," 1rem ") * 0.9} ch`;

Möglicherweise neigen Sie dazu, einfach ein paar Pixel von 320 zu subtrahieren, um die Scrollbar zu ignorieren, wie so:

 text.style.width = `$ {(320 - 30) / calculatech (text," 1rem ")} ch`;

Das Problem dabei ist, dass das Wiederherstellungsproblem wiederhergestellt wird! Dies liegt daran, dass das Subtrahieren von 320 das Verhältnis von Ansichtsfenster zerstört.

Die Breite des Textes muss immer ein Prozentsatz der Ansichtsfensterbreite sein. Eine andere Sache, die zu beachten ist, ist, dass wir sicherstellen müssen, dass wir dieselbe Schriftart auf jedem Gerät laden, das die Site verwendet. Das klingt offensichtlich, nicht wahr? Nun, hier ist ein kleines Detail, das Ihren Text abweichen könnte. Dinge wie font-family: sans-serif garantiert nicht, dass in jedem Browser die gleichen Schriftarten verwendet werden. sans-serif setzt Arial für Windows auf Chrome, aber Roboto auf Chrome für Android. Darüber hinaus kann die Geometrie einiger Schriftarten eine Neuanpassung verursachen, auch wenn Sie alles richtig machen. Monowidth -Schriftarten erzielen in der Regel die besten Ergebnisse. Stellen Sie daher sicher, dass Ihre Schriftarten genau sind.

Siehe dieses Beispiel für nicht retunierendes Beispiel in der folgenden Demonstration:

Nicht-Realisierungstext im Container

Wir müssen jetzt die Schriftgröße und die Breite des Containers anwenden, nicht direkt auf das Textelement. Der darin enthaltene Text muss nur auf width: 100% . Für Absätze und Titel ist dies nicht erforderlich, da sie selbst Elemente auf Blockebene sind und automatisch die Breite des Containers füllen.

Ein Vorteil der Anwendung dieser Methode in einem übergeordneten Container besteht darin, dass seine Kinder automatisch reagieren und die Größe der Größe der Schriftgröße und der Breite nacheinander ändern. Wenn wir die Schriftgröße eines einzelnen Elements ändern müssen, ohne die anderen zu beeinflussen, ändern wir einfach die Schriftgröße in einen beliebigen EM -Wert und es wird natürlich relativ zur Schriftgröße des Behälters sein.

Nicht-Retuning-Text ist wählerisch, aber ein subtiler Effekt, der dem Design gute Ergebnisse bringen kann!

Zusammenfassen

Zusammenfassend habe ich eine kleine Demonstration zusammengestellt, wie all dies in einem realen Szenario aussieht.

In diesem letzten Beispiel können Sie auch die Root -Schriftgröße ändern, und clamp() wird automatisch neu berechnet, sodass der Text in jedem Fall die richtige Größe hat.

Obwohl das Ziel dieses Artikels darin besteht, clamp() mit Schriftgröße zu verwenden, kann dieselbe Technik verwendet werden, um CSS -Attribute von Längeneinheiten zu empfangen. Jetzt sage ich nicht, dass Sie es überall verwenden sollten . Oft ist eine gute font-size: 1rem ist genug. Ich möchte Ihnen nur zeigen, wie viel Kontrolle Sie haben können, wenn Sie es brauchen .

Persönlich glaube ich, dass clamp() eines der besten Dinge in CSS ist, und ich kann es kaum erwarten zu sehen, was andere Anwendungsmöglichkeiten finden, da es immer größer wird!

Das obige ist der detaillierte Inhalt vonLinear skalierende Schriftgröße mit CSS Clamp () basierend auf dem Ansichtsfenster. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!