Hvordan endre fontstørrelse ved hjelp av medier

Et responsivt nettsted endrer utseendet avhengig av enheten som den viser det. Med det formål å gjøre et nettsted lydhør, kan du benytte deg av CSS Media -spørsmålene. Disse spørsmålene lar deg endre en bestemt funksjon på nettstedet ditt basert på bredden, eller skjermoppløsningen til enheten. For eksempel kan du enten skjule et element basert på skjermstørrelsen eller endre skriftstørrelsen på nettstedinnholdet osv. Her vil vi vise hvordan du kan endre skriftstørrelsen på teksten som vises på nettstedet ditt ved hjelp av mediespørsmål.

Hvordan endre skriftstørrelse ved hjelp av medier

Å gjøre teksten lydhør på et nettsted blir referert til som flytende typografi, noe som betyr at teksten din vil endre størrelsen basert på skjermstørrelsen på enheten. Her vil vi presentere deg for to forskjellige metoder for å gjøre nettstedet til nettstedet ditt responsiv.

Metode 1

Den første metoden som kan brukes til å gjøre teksten vår responsiv er ved å bruke medier. Her er et eksempel.

Html

Å gjøre teksten lydhør på et nettsted blir referert til som flytende typografi, noe som betyr at teksten din vil endre størrelsen basert på skjermen
størrelsen på enheten.

Her har vi uttalt et avsnitt som vi skal demonstrere hvordan vi endrer skriftstørrelse ved hjelp av en medieforespørsel.

CSS

p.tekst
Bakgrunnsfarge: Azure;
polstring: 15px;

Først av alt bruker vi noen grunnleggende CSS for å gi litt bakgrunnsfarge og polstring til avsnittet.

CSS

@Media-skjerm og (min bredde: 700px)
p.tekst
Font-størrelse: 25px;

Den første spørringen som brukes, sier at hvis minimumsskjermbredden er 700px eller bredere, vil skriftstørrelsen på avsnittet være 25px.

CSS

@Media-skjerm og (maks bredde: 699px)
p.tekst
Font-størrelse: 16px;

Og denne siste spørringen sier at hvis den maksimale bredden på skjermen er 699px eller mindre, vil skriftstørrelsen på avsnittet være 16px eller bredere.

Produksjon

Når skjermbredden er 700px eller bredere.

Når skjermbredden er 699px og mindre.

Fontstørrelsen ble vellykket endret ved hjelp av medier.

Metode 2

Den andre tilnærmingen du kan bruke til å endre størrelse på teksten din, er ved å bruke Viewport -bredden. Ved å bruke dette vil teksten endre i henhold til størrelsen på nettleseren.

Html

Gjør teksten responsiv

Å gjøre teksten lydhør på et nettsted blir referert til som flytende typografi, noe som betyr at teksten din vil endre størrelsen basert på skjermen
størrelsen på enheten.

I koden ovenfor har vi definert en overskrift og et avsnitt, og vi vil bruke ViewPort -bredden på disse for å endre skriftstørrelsen deres med hensyn til nettleservinduet.

CSS

H2
Font-størrelse: 9VW;

Her har vi satt skriftstørrelsen på overskriften til 9VW. Enheten VW står for Viewport -bredden.

CSS

P
Font-størrelse: 4VW;

Når det gjelder skriftstørrelsen på avsnittet.

Produksjon

Metoden fungerer som den skal.

Konklusjon

For å få teksten til å vises på websider responsivt, kan du bruke medier. I media -spørringen, spesifiser skriftstørrelsen på teksten med en bestemt bredde, og skriftstørrelsen vil endre i henhold til enhetstypen. En annen metode for å utføre denne oppgaven er å bruke Viewport -bredden. Denne metoden krever ganske enkelt at du tildeler en viss skriftstørrelse til teksten i 'VW' -enhet. Begge disse metodene har blitt diskutert i dette innlegget ved hjelp av relevante eksempler.