Heim >Web-Frontend >CSS-Tutorial >CSS Fluid Typography: Eine Anleitung zur Verwendung von clamp() für skalierbaren Text
CSS Fluid Typography: Eine Anleitung zur Verwendung von clamp() für skalierbaren Text
- DDDOriginal
- 2024-09-18 18:35:16224Durchsuche
Inhaltsverzeichnis
- Einführung
- Verwenden der Funktion „clamp()“, um eine flüssige Typografie zu erzielen
- Fazit
Einführung
Das Schreiben von CSS-Medienabfragen kann manchmal herausforderndspaßig sein, insbesondere wenn zu viele Dinge zu erledigen sind. Wir konzentrieren uns oft so sehr darauf, das Layout zu erstellen und andere Teile unserer Website responsiv zu gestalten, dass es stressig wird. Aber was wäre, wenn wir diesen Stress reduzieren könnten, indem wir unseren Text unabhängig von der Bildschirmgröße skalierbar machen, ohne eine Menge Medienabfragen schreiben zu müssen?
Lassen Sie uns eintauchen und beginnen, wie Sie mithilfe der CSS-Funktion „clamp()“ eine flüssige Typografie erzielen.
Verwenden der Funktion „Clamp()“ zur Erzielung einer flüssigen Typografie
Das Problem
Hier ist eine einfache Webseite mit einem H1-Tag und einem P-Tag:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Fluid Typography</title>
</head>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
font-family: Arial, sans-serif;
background: #333;
color: white;
text-align: center;
}
h1{
font-size: 5rem;
}
p{
font-size: 3rem;
color: red;
}
</style>
<body>
<h1>CSS Fluid Typography</h1>
<p>Why is this text not scalable</p>
</body>
</html>
Jetzt schauen wir uns an, wie sich der Text auf verschiedenen Bildschirmgrößen verhält
Eine einfache Möglichkeit, den obigen Text responsiv zu gestalten, ist die Verwendung von Medienabfragen. In diesem Artikel machen wir den Text jedoch mit der CSS-Funktion „clamp()“ responsiv.
Aber vorher schauen wir uns zunächst die vw-Einheit (Ansichtsfensterbreite) an. Mit der vw-Einheit können Sie Ihre Schriftgröße im Verhältnis zur Breite des Ansichtsfensters festlegen, sodass Ihr Text responsive ist.
Aktualisieren wir unseren vorhandenen Code mit den folgenden Änderungen:
<style>
h1 {
font-size: 10vw; /* H1 size is 10% of the viewport width */
}
p {
font-size: 5vw; /* p size is 5% of the viewport width */
color: red;
}
</style>
Wenn die Breite des Ansichtsfensters 1000 Pixel beträgt:
Die h1-Schriftgröße beträgt 100 Pixel
Die p-Schriftgröße beträgt 50 Pixel
Die Schriftgrößen für H1 und p werden weiter vergrößert oder verkleinert, wenn sich die Breite des Ansichtsfensters ändert.
Mal sehen, wie es aussieht:
Aus dem GIF oben können wir ersehen, dass die Verwendung von vw für responsiven Text funktioniert, es jedoch keine Einschränkungen gibt. Wenn die Breite des Ansichtsfensters zunimmt, wächst die Schriftgröße unbegrenzt weiter, und ebenso wird sie immer kleiner, wenn die Breite des Ansichtsfensters abnimmt.
Hier kommt die Funktion „clamp()“ ins Spiel. Mit „clamp()“ können Sie eine minimale, bevorzugte und maximale Schriftgröße festlegen und so steuern, wie der Text innerhalb eines definierten Bereichs skaliert wird.
Die Lösung
Verwendung der Funktion „clamp()“
Mit der Funktion „clamp()“ in CSS können Sie einen Bereich für Ihre Schriftgröße festlegen.
Das allgemeine Format ist:
clamp(minimum, preferred, maximum)
- Minimum: Die kleinste Größe, auf die Ihr Text verkleinert werden kann.
- Bevorzugt: Die ideale Größe, häufig ein Prozentsatz der Breite des Ansichtsfensters
- Maximal: Die größte Größe, die Ihr Text erreichen kann.
Lassen Sie uns das Beispiel von oben verwenden und den Code wie folgt ändern
h1{
font-size: clamp(24px, 5vw, 48px); /* Font size scales between 24px and 48px */
}
p{
font-size: clamp(16px, 3vw, 24px) /* Font size scales between 16px and 24px)
}
Mal sehen, wie es im Browser aussieht:
Jetzt reagieren die Elemente h1 und p, da ihre Größe innerhalb des definierten Bereichs bleibt und sichergestellt wird, dass sie nicht zu groß oder zu klein werden.
Abschluss
In diesem Artikel haben wir gelernt, wie man mit der CSS-Funktion „clamp()“ eine flüssige Typografie erreicht. Vielen Dank, dass Sie bis hierhin gelesen haben. Ich bitte Sie, ein „Gefällt mir“ zu hinterlassen und diesen Artikel mit Ihren Kollegen zu teilen, die davon profitieren werden.
Was denken Sie über diesen Artikel? Teilen Sie Ihre Gedanken gerne im Kommentarbereich unten mit.
P.S. Ich suche derzeit nach Möglichkeiten für Frontend-Entwickler. Wenn Sie Hinweise haben oder jemanden einstellen möchten, schauen Sie sich gerne meinen Lebenslauf an oder vernetzen Sie sich mit mir auf LinkedIn. Ich würde gerne von Ihnen hören!
Das obige ist der detaillierte Inhalt vonCSS Fluid Typography: Eine Anleitung zur Verwendung von clamp() für skalierbaren Text. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!