So ändern Sie die Schriftgröße mithilfe von Medienabfragen

Eine reaktionsschnelle Website verändert ihr Erscheinungsbild je nach Gerät, auf dem sie es anzeigt. Um eine Website reaktionsschnell zu machen, nutzen Sie die CSS -Medienfragen. Mit diesen Abfragen können Sie eine bestimmte Funktion Ihrer Website basierend auf der Breite oder der Bildschirmauflösung des Geräts ändern. Zum Beispiel können Sie entweder ein Element basierend auf der Bildschirmgröße ausblenden oder die Schriftgröße des Website -Inhalts usw. ändern. Hier zeigen wir, wie Sie die Schriftgröße des Textes ändern können, der auf Ihrer Website mithilfe von Medienabfragen angezeigt wird.

So ändern Sie die Schriftgröße mithilfe von Medienabfragen

Wenn der Text auf einer Website reagiert, wird als Fluid -Typografie bezeichnet, was bedeutet, dass Ihr Text seine Größe basierend auf der Bildschirmgröße des Geräts ändert. Hier präsentieren wir Ihnen zwei verschiedene Methoden, um Ihren Website -Text reaktionsschnell zu machen.

Methode 1

Die erste Methode, mit der Ihr Text reagiert werden kann, ist die Verwendung von Medienabfragen. Hier ist ein Beispiel.

Html

Wenn der Text auf einer Website reagiert
Größe des Geräts.

Hier haben wir einen Absatz angegeben, in dem wir demonstrieren, wie man die Schriftgröße mit einer Medienabfrage verändert.

CSS

P.Text
Hintergrundfarbe: Azure;
Polsterung: 15px;

Zunächst verwenden wir einige grundlegende CSS, um den Absatz eine Hintergrundfarbe und Polsterung bereitzustellen.

CSS

@media Bildschirm und (Min-Width: 700px)
P.Text
Schriftgröße: 25px;

Die erste angelegte Abfrage gibt an, dass die Schriftgröße des Absatzes 25px beträgt, wenn die minimale Bildschirmbreite 700px oder breiter ist, die Schriftgröße des Absatzes beträgt.

CSS

@media Bildschirm und (max-Width: 699px)
P.Text
Schriftgröße: 16px;

Und in dieser letzten Abfrage heißt es, dass die Schriftgröße des Absatzes 16px oder breiter ist.

Ausgang

Wenn die Bildschirmbreite 700px oder breiter ist.

Wenn die Bildschirmbreite 699px und weniger beträgt.

Die Schriftgröße wurde mit Medienabfragen erfolgreich verändert.

Methode 2

Der zweite Ansatz, mit dem Sie Ihren Text ändern können, ist die Verwendung der Ansichtsfensterbreite. Mit diesem Zusammenhang ändert sich der Text entsprechend der Größe des Browsers.

Html

Machen Sie Ihren Text reaktionsschnell

Wenn der Text auf einer Website reagiert
Größe des Geräts.

Im obigen Code haben wir eine Überschrift und einen Absatz definiert und werden die Ansichtsfenster auf diese anwenden, um ihre Schriftgröße in Bezug auf das Browserfenster zu ändern.

CSS

H2
Schriftgröße: 9VW;

Hier haben wir die Schriftgröße des Übergangs auf 9VW gesetzt. Die Einheit VW steht für die Ansichtsfensterbreite.

CSS

P
Schriftgröße: 4VW;

In Bezug auf die Schriftgröße des Absatzes wurde die Schriftgröße auf 4VW festgelegt.

Ausgang

Die Methode funktioniert ordnungsgemäß.

Abschluss

Um den Text auf Webseiten zu reagieren, können Sie Medienabfragen verwenden. Geben Sie in der Medienabfrage die Schriftgröße des Textes in einer bestimmten Breite an, und die Schriftgröße ändert sich entsprechend dem Gerätetyp. Eine andere Methode zur Ausführung dieser Aufgabe besteht darin, die Ansichtsfensterbreite zu verwenden. Diese Methode erfordert lediglich, dass Sie dem Text in 'VW' Einheit eine bestimmte Schriftgröße zuweisen können. Beide Methoden wurden in diesem Beitrag mit Hilfe relevanter Beispiele erörtert.