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() 中進(jìn)行數(shù)學(xué)運(yùn)算！*/ }</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!