So verwenden Sie CSS-Ansichtsfenstereinheiten, um die Schriftgröße basierend auf der Bildschirmgröße anzupassen

So verwenden Sie CSS-Ansichtsfenstereinheiten, um die Schriftgröße entsprechend der Bildschirmgröße anzupassen

Die CSS-Ansichtsfenstereinheit ist eine Einheit relativ zur Ansichtsfenstergröße, die uns dabei helfen kann, die Schriftgröße dynamisch an die Bildschirmgröße anzupassen. Im Zeitalter mobiler Geräte kann uns diese Technologie helfen, das Problem zu großer oder zu kleiner Schriftarten zu lösen, die durch unterschiedliche Bildschirmgrößen verursacht werden. In diesem Artikel wird erläutert, wie Sie CSS-Ansichtsfenstereinheiten verwenden, um die Schriftgröße basierend auf der Bildschirmgröße anzupassen, und einige spezifische Codebeispiele bereitgestellt.

1. VW-Einheiten verwenden

Die Ansichtsfensterbreiteneinheit (Ansichtsfensterbreiteneinheit, auch als VW bezeichnet) ist eine Einheit relativ zur Breite des Ansichtsfensters. Die grundlegende Verwendung ist wie folgt:

h1{
  font-size: 4vw;
}

Im obigen Code wird die Schriftgröße des h1-Tags angepasst, wenn sich die Breite des Ansichtsfensters ändert, wobei ein proportionales Verhältnis zur Breite des Ansichtsfensters beibehalten wird.

2. VH-Einheiten verwenden

Die Ansichtsfenster-Höheneinheit (Ansichtsfenster-Höheneinheit, als VH bezeichnet) ist eine Einheit relativ zur Höhe des Ansichtsfensters. Die grundlegende Verwendung ist wie folgt:

p{
  font-size: 3vh;
}

Im obigen Code wird die Schriftgröße der p-Beschriftung angepasst, wenn sich die Höhe des Ansichtsfensters ändert, wobei ein proportionales Verhältnis zur Höhe des Ansichtsfensters beibehalten wird. „Verwenden Sie die Einheiten Vmin und Vmax.“ Breite und Höhe des Ansichtsfensters. Die grundlegende Verwendung ist wie folgt:

h2{
  font-size: 2vmin;
}
h3{
  font-size: 2vmax;
}

Im obigen Code wird die Schriftgröße des h2-Tags mit dem kleineren Wert der Breite und Höhe des Ansichtsfensters angepasst, und die Schriftgröße des h3-Tags wird mit dem kleineren Wert angepasst Passen Sie die Breite und Höhe des Ansichtsfensters an große Wertänderungen an.

Kombiniert mit Medienabfragen

Um bessere Ergebnisse auf Bildschirmen unterschiedlicher Größe zu erzielen, können wir Medienabfragen kombinieren, um eine feinere Anpassung der Schriftgröße zu erreichen. Wenn Sie beispielsweise unterschiedliche Schriftgrößen bei unterschiedlichen Bildschirmbreiten verwenden möchten, können Sie den folgenden Code verwenden:

h4{
  font-size: 20px;
}

@media screen and (max-width: 600px){
  h4{
    font-size: 15px;
  }
}

Im obigen Code wird die Schriftgröße des h4-Tags auf 15 Pixel angepasst, wenn die Bildschirmbreite kleiner ist als 600px, sonst bleibt es bei 20px.
4. Mit CSS-Viewport-Einheiten und Medienabfragen lässt sich die Schriftgröße ganz einfach an die Bildschirmgröße anpassen. Dadurch können Webseiten nicht nur schöner und komfortabler auf Bildschirmen unterschiedlicher Größe dargestellt werden, sondern auch das Benutzererlebnis verbessert werden.

Mit dem obigen Codebeispiel können wir die Schriftgröße ganz einfach an verschiedene Geräte und Bildschirmgrößen anpassen. Dieser Responsive-Design-Ansatz stellt sicher, dass unsere Webseiten auf verschiedenen Geräten optimal lesbar und sichtbar sind. Ich hoffe, dieser Artikel hilft Ihnen!

Das obige ist der detaillierte Inhalt vonSo verwenden Sie CSS-Ansichtsfenstereinheiten, um die Schriftgröße basierend auf der Bildschirmgröße anzupassen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!