Jak stworzyć responsywną czcionkę w CSS

Wskazówka Linux

W pliku CSS podaj „rozmiar czcionki„Własność o wartości”2.5vw". To sprawi, że czcionka reaguje w odniesieniu do szerokości strony.

CSS

P
Rozmiar czcionki: 2.5vw;

Zapisz kod i przetestuj go w przeglądarce:

Metoda 2: Korzystanie z zapytań medialnych do tworzenia responsywnych czcionek w CSS

W CSS „zapytania medialne„Pomóż zastosować różne warunki stylizacji na określonych elementach. Jest to zestaw reguł, który można zastosować tylko wtedy, gdy zdefiniowany warunek jest prawdziwy. W rozwoju zapytania medialne są często wykorzystywane do reakcji elementów lub projektów w odniesieniu do urządzeń/typów medialnych. Gdy właściwość wielkości czcionki jest umieszczona w ramach reguły @Media, osiąga pożądane wyniki.

Przykład

Ustaw minimalną szerokość strony jako „799px" za pomocą "@głoska bezdźwięczna”I dodaj

element wewnątrz tego zestawu reguł. Wskazuje to, że określona reguła zostanie zastosowana tylko wtedy, gdy szerokość strony jest równa lub większa niż 799px. Teraz określ „rozmiar czcionki„Nieruchomość jako„20px". To sprawi, że czcionka będzie większa niż normalna rozmiar.

CSS

@Media (min-szerokość: 799px)
P
Rozmiar czcionki: 20px;

Wyjście

Metoda 3: Używanie clamp () do tworzenia responsywnych czcionek w CSS

„„Zacisk()”Funkcja jest wykorzystywana do określania stałej wartości minimalnej i maksymalnej. Innymi słowy, jest to powszechnie definiowane jako początkowy i końcowy zakres dla określonej wartości. Funkcja Clamp () zapewnia doskonałą kontrolę nad elementami związanymi z ich reaktywnością.

Przykład

Używać "rozmiar czcionki„Własność wzdłuż wartości”zacisk (10px, 2.5vw, 30px)„Gdzie 10px jest wartością minimalną, 30px to maksimum, a 2.5vW to bieżąca wartość wybranej czcionki. Ta funkcja sprawi, że czcionka reaguje na określone limity.

CSS

P
Rozmiar czcionki: zacisk (10px, 2.5vW, 30px);

Wyjście

Opisaliśmy trzy wydajne metody tworzenia responsywnej czcionki w CSS.

Wniosek

Aby stworzyć responsywną czcionkę, „jednostki rzutni”,„zapytania medialne" Lub "Funkcja clamp ()" może być użyte. Istnieją cztery jednostki VW, VH, VMIN i VMAX, które pomagają tworzyć responsywne czcionki. Ponadto CSS @Media służy również do zastosowania różnych warunków stylizacji do określonych elementów. Funkcję Clamp () można również wykorzystać do reagowania czcionek. W tym artykule omówiliśmy, jak tworzyć responsywne czcionki w CSS.