Fluid Typografie

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.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("CSS")) -.-> css/BasicConceptsGroup(["Basic Concepts"]) css(("CSS")) -.-> css/BasicStylingGroup(["Basic Styling"]) css/BasicConceptsGroup -.-> css/selectors("Selectors") css/BasicStylingGroup -.-> css/fonts("Fonts") subgraph Lab Skills css/selectors -.-> lab-35200{{"Responsive Fluid Typografie mit CSS"}} css/fonts -.-> lab-35200{{"Responsive Fluid Typografie mit CSS"}} end

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.