Jak zmienić rozmiar czcionki za pomocą zapytań multimedialnych

Responsywna strona internetowa zmienia swój wygląd w zależności od urządzenia, na którym wyświetla. W celu reakcji strony internetowej skorzystaj z zapytań Media CSS. Te zapytania umożliwiają zmianę konkretnej funkcji Twojej witryny na podstawie szerokości lub rozdzielczości ekranu urządzenia. Na przykład możesz ukryć element na podstawie rozmiaru ekranu lub zmienić rozmiar czcionki zawartości witryny itp. Tutaj pokażemy, w jaki sposób możesz zmienić rozmiar czcionki tekstu pojawiającego się w Twojej witrynie za pomocą zapytań multimedialnych.

Jak zmienić rozmiar czcionki za pomocą zapytań multimedialnych

Wykonanie tekstu na stronie internetowej jest nazywane typografią płynną, co oznacza, że ​​Twój tekst zmieni rozmiar na podstawie rozmiaru ekranu urządzenia. Tutaj zaprezentujemy dwie różne metody, aby Twoja witryna była reaktywna.

Metoda 1

Pierwszą metodą, którą można użyć do reakcji tekstu, jest użycie zapytań multimedialnych. Oto przykład.

Html

Dokonanie reakcji tekstu na stronie internetowej jest nazywane typografią płynną, co oznacza, że ​​Twój tekst zmieni jego rozmiar na podstawie ekranu
Rozmiar urządzenia.

Tutaj stwierdziliśmy akapit, w którym zamierzamy zademonstrować, jak zmienić rozmiar czcionki za pomocą zapytania multimedialnego.

CSS

P.tekst
kolor tła: Azure;
Wyściółka: 15px;

Po pierwsze, używamy podstawowych CSS, aby zapewnić trochę koloru tła i wyściółka do akapitu.

CSS

@Media ekran i (min min: 700px)
P.tekst
Rozmiar czcionki: 25px;

Pierwsze zastosowane zapytanie stwierdza, że ​​jeśli minimalna szerokość ekranu wynosi 700px lub szersza, rozmiar czcionki akapitu wyniesie 25px.

CSS

@Media ekran i (maksymalny szerokość: 699px)
P.tekst
Rozmiar czcionki: 16px;

I to ostatnie zapytanie stwierdza, że ​​jeśli maksymalna szerokość ekranu wynosi 699px lub mniejsza, rozmiar czcionki akapitu będzie 16px lub szerszy.

Wyjście

Gdy szerokość ekranu jest 700px lub szersza.

Gdy szerokość ekranu wynosi 699px i mniejsza.

Rozmiar czcionki został pomyślnie zmieniony przy użyciu zapytań multimedialnych.

Metoda 2

Drugim podejściem, którego możesz użyć do zmiany rozmiaru tekstu, jest użycie szerokości rzutni. Korzystanie z tego tekst zmieni się zgodnie z rozmiarem przeglądarki.

Html

Reagowanie tekstu

Dokonanie reakcji tekstu na stronie internetowej jest nazywane typografią płynną, co oznacza, że ​​Twój tekst zmieni jego rozmiar na podstawie ekranu
Rozmiar urządzenia.

W powyższym kodzie zdefiniowaliśmy nagłówek i akapit i zastosujemy na nich szerokość rzutni, aby zmienić rozmiar czcionki w odniesieniu do okna przeglądarki.

CSS

H2
Rozmiar czcionki: 9VW;

Tutaj ustawiliśmy rozmiar czcionki nagłówka na 9VW. Jednostka VW oznacza szerokość rzutni.

CSS

P
Rozmiar czcionki: 4vW;

Jeśli chodzi o wielkość czcionki akapitu, rozmiar czcionki został ustawiony na 4 ww.

Wyjście

Metoda działa poprawnie.

Wniosek

W celu uczynienia tekstu na stronach internetowych możesz korzystać z zapytań multimedialnych. W zapytaniu multimedialnym określ rozmiar czcionki tekstu na dowolnej szerokości, a rozmiar czcionki zmieni się zgodnie z typem urządzenia. Inną metodą wykonywania tego zadania jest użycie szerokości rzutni. Ta metoda wymaga po prostu przypisania określonego rozmiaru czcionki do tekstu w jednostce „VW”. Obie te metody zostały omówione w tym poście za pomocą odpowiednich przykładów.