LabEx
LoginBeitreten

Responsive Fluid Typografie mit CSS

Beginner

This tutorial is from open-source community. Access the source code

Einführung

In diesem Lab werden wir lernen, wie man mit CSS fluid Typografie implementiert. Fluid Typografie gewährleistet, dass der Text sich entsprechend der Breite der Anzeige skaliert, was ihn für verschiedene Bildschirmgrößen reaktionsschneller und zugänglicher macht. Indem wir die clamp()-Funktion und eine Formel verwenden, um responsive Werte für die font-size zu berechnen, können wir ein dynamischeres und nutzerfreundlicheres Design erstellen.

Dies ist ein Guided Lab, das schrittweise Anweisungen bietet, um Ihnen beim Lernen und Üben zu helfen. Befolgen Sie die Anweisungen sorgfältig, um jeden Schritt abzuschließen und praktische Erfahrungen zu sammeln. Historische Daten zeigen, dass dies ein Labor der Stufe Anfänger mit einer Abschlussquote von 94% ist. Es hat eine positive Bewertungsrate von 100% von den Lernenden erhalten.

Fluid Typografie

index.html und style.css wurden bereits in der VM zur Verfügung gestellt.

Um Text zu erstellen, der sich in der Größe nach der Breite der Anzeige anpasst, können Sie CSS verwenden. Ein Möglichkeit dazu besteht darin, die clamp()-Funktion zu verwenden, um die minimale und maximale Schriftgröße festzulegen. Eine andere Möglichkeit ist, eine Formel zu verwenden, um einen responsive Wert für die Schriftgröße zu berechnen. Hier ist ein Beispiel für ein HTML-Element mit der Klasse fluid-type:

<p class="fluid-type">Hello World!</p>

Hier ist der entsprechende CSS-Code, der die Schriftgröße so einstellt, dass sie sich zwischen 1rem und 3rem basierend auf der Breite der Anzeige anpasst:

.fluid-type {
  font-size: clamp(1rem, 8vw - 2rem, 3rem);
}

Bitte klicken Sie auf 'Go Live' in der unteren rechten Ecke, um den Webdienst auf Port 8080 auszuführen. Anschließend können Sie die Registerkarte Web 8080 aktualisieren, um die Webseite anzuschauen.

Zusammenfassung

Herzlichen Glückwunsch! Sie haben das Fluid Typography-Lab abgeschlossen. Sie können in LabEx weitere Labs ausprobieren, um Ihre Fähigkeiten zu verbessern.