Hvordan lage responsiv font i CSS
Responsivitet er en essensiell faktor i webapplikasjoner. Utviklere lager design, bilder og divs responsive på websider; Imidlertid er det bare noen få som tenker på å gjøre skrifter reaksjonsevne. For når siden blir byttet fra en enhet til en annen, for eksempel fra skrivebord til mobil, kan den forstyrre skriftlysbarheten. For å synliggjøre skrifter, må reaksjonsevnen legges til.
Denne oppskrivningen vil forklare hvordan du lager responsive skrifter ved hjelp av CSS.
Hvordan lage responsiv font i CSS?
For å lage en responsiv font i CSS, bruker vi følgende metoder:
-
- Viewport -enheter
- Media spørsmål
- Klem () Funksjon
La oss gå videre og utforske hver metode individuelt!
Metode 1: Bruke Viewport -enheter for å lage responsive skrifter i CSS
En nettlesers synlig område er kjent som en visningsport. I CSS er noen enheter relatert til det, kort tid kjent som “Viewport -enheter”. Disse enhetene er nyttige for å gjøre ting responsive og forbedre synligheten med hensyn til en seer.
Her er fire Viewport -enheter beskrevet nedenfor:
| Verdier | Beskrivelse |
| VW | VW representerer Viewport -bredden. Det gjør elementene lydhøre i breddevisere angående en side. 1% av siden tilsvarer 1VW. |
| vh | VH representerer visningshøyde. Det gjør elementene lydhøre i høydemessige måter angående en side. 1% av siden tilsvarer 1VH. |
| Vmin | VMIN representerer minimum Viewport. Den brukes til å spesifisere minimumshøyden eller bredden på visningsporten med hensyn til et element. |
| Vmax | Vmax representerer ViewPort maksimalt. Den brukes til å spesifisere maksimal høyde eller bredde på visningsporten med hensyn til et element. |
La oss ta et eksempel for å anerkjenne arbeidet med Viewport -enheten.
Eksempel
I HTML -filen vår, skriv litt tekst i " Html Linux hint CSS Metode 2: Bruke media -spørsmål for å lage responsive skrifter i CSS I CSS, “Media spørsmål”Hjelp til å bruke forskjellige stylingsforhold på spesifikke elementer. Det er et regelverk som bare kan brukes hvis den definerte tilstanden er sann. I utvikling brukes ofte medier. Når egenskapen til fontstørrelse er plassert i @media-regelsettet, oppnår den de ønskede resultatene. Eksempel Angi siden minimumsbredde som "799px" ved hjelp av "@media”Og legg til element inne i dette regelsettet. Dette indikerer at den definerte regelen bare vil bli brukt hvis sidebredden er lik eller større enn 799px. Nå, spesifiser "skriftstørrelse”Eiendom som“20px”. Dette vil gjøre skriften større enn normal størrelse. CSS Metode 3: Bruke klemme () for å lage responsive skrifter i CSS “klemme()”Funksjon brukes til å spesifisere et fast minimums- og maksimumsverdi. Med andre ord, det er ofte definert som et initial- og sluttområde for en spesifikk verdi. Klemmet () -funksjonen gir stor kontroll over elementene relatert til deres reaksjonsevne. Eksempel Bruk "skriftstørrelse”Eiendom langs verdien”Klem (10px, 2.5VW, 30px)”Hvor 10px er minimumsverdien, er 30px maksimalt og 2.5VW er den nåværende verdien av den valgte skriften. Denne funksjonen vil gjøre skrifttypen responsiv under de definerte grensene. CSS Konklusjon For å lage en responsiv font, “Viewport -enheter”,“Media spørsmål”Eller“Klem () Funksjon" kan bli brukt. Det er fire Viewports enheter VW, VH, VMIN og Vmax som hjelper til med å lage responsive skrifter. Dessuten brukes CSS @media også til å bruke forskjellige stylingforhold på spesifikke elementer. Klemmefunksjonen kan også brukes til å gjøre skrifter responsive. I denne artikkelen har vi dekket hvordan du lager responsive skrifter i CSS.
I CSS -filen, spesifiser "skriftstørrelse”Eiendom med verdien”2.5VW”. Dette vil gjøre skrifttypen responsiv med hensyn til sidebredden.P
Fontstørrelse: 2.5VW;
Lagre koden og test den i nettleseren din:@media (Min-bredde: 799px)
P
Font-størrelse: 20px;
ProduksjonP
Font-størrelse: Klem (10px, 2.5VW, 30px);
Produksjon
Vi har beskrevet tre effektive metoder for å lage en responsiv skrift i CSS.