Kuidas luua CSS-iga reageerivat tüpograafiat

Nii paljude katkestuspunktidega veebisaidi arendamine võib olla väsitav. CSS-is on palju uusi tehnikaid, mida õppida, olenemata sellest, kas olete kogenud arendaja või kesktaseme arendaja.

Aga kuidas alustada tundliku tüpograafiaga? Siin on, kuidas astuda samme, et kohandada veebilehti mis tahes ekraanisuurusega.

Responsiivse tüpograafia tähtsus

Tüpograafia mängib veebiarenduses ja -kujunduses üliolulist rolli, tagades veebisaidi loetavuse, kasutatavuse ja üldise esteetika. Kõik tahavad tundlikku veebisaiti. Kas poleks tore, kui tekst või fondid kohanduksid automaatselt erinevate ekraanisuurustega? Muud tundliku tüpograafia eelised veebiarenduses hõlmavad järgmist;

• See parandab üldist kasutuskogemust erinevates seadmetes või ekraanisuuruses, tagades loetavuse ja loetavuse.
• See suurendab juurdepääsetavust, majutades nägemispuudega või muude puuetega kasutajaid. See mahutab erinevaid kasutaja eelistusi, näiteks reguleeritavad kirjasuurused.
instagram viewer
• Järjepidev tüpograafia seadmetes ja eraldusvõimetes aitab säilitada kaubamärgi identiteeti ja visuaalset ühtsust.

Siin on koodimall, mille saate enne alustamist oma koodiredaktorisse kopeerida, et saaksite järgida käsitletavaid tehnikaid.

HTML-koodi fail

index.html
html>
<htmllang="en">
<pea>
<metamärgistik="UTF-8">
<metanimi="vaateava"sisu="laius = seadme laius, esialgne skaala = 1,0">
<linkrel="laadileht"href="stiil.css">
<pealkiri> Vastupidav tüpograafia pealkiri>
pea>
<keha>
<divklass="konteiner">
<h1> Lorem ipsum h1>
<lk> Lorem ipsum dolor sit, amet consectetur adipisicing eliit. Ut, obcaecati. Corporis quam, blanditiis odit optio dignissimos facilis magni doloribus adipisci at quaerat oluptas molestiae eius dicta officia quod eaque perspiciatis! 
lk>
div>
keha>
html>

CSS-koodi fail

/*style.css*/
keha{
kuva: painduv;
õigustama-sisu: Keskus;
joondada-üksused: Keskus;
kõrgus: 100vh;
}
.konteiner{
laius: 400px;
taustavärv: antiikvalge;
polsterdus: 15px;
kast-vari:0 2px 5pxrgba(0,0,0, 0.1) ;
}
h1{
värvi: soe roosa;
}

Nüüd uurime mõnda tõhusat meetodit ja tehnikat reageeriva tüpograafia rakendamiseks CSS-i abil

1. Kinnitus

See on kaasaegne CSS-i tüpograafiatehnika, mis võimaldab ja tagab, et elemendi fondi suurus jääb teatud vahemikku. Klambrifunktsioon "Clamp()" võtab kolm parameetrit: miinimumväärtus, ideaalne väärtus ja maksimaalne väärtus. Klambrifunktsioon ei piirdu tüpograafiaga. Seda saab kasutada piltide, kaartide, videote ja muu meedia jaoks. See toimib nii.

Klamber (minimaalne väärtus, ideaalväärtus, maksimaalne väärtus):

h1{
fondi suurus: klamber(2rem, 5vw, 3rem);
}
lk{
fondi suurus: klamber(1rem, 3vw, 2rem);
}

Selles näites määratakse pealkirja ja lõigu fondi suurused funktsiooni „clamp()” abil. Pealkirja „h1” puhul määratakse minimaalseks väärtuseks „2rem”, mis tagab, et fondi suurus ei langeks kahekordsest juurfondi suurusest väiksemaks. Ideaalne või eelistatud väärtus on seatud väärtusele 5vw, mis on 5% vaateava laiusest, muutes selle tundlikuks erinevatele ekraanisuurustele. Maksimaalseks väärtuseks on seatud "3 rem", mis tagab, et fondi suurus ei ületa kolmekordset juurfondi suurust. Lõigu stiili puhul vastupidi.

Ideaalse väärtuse jaoks on parim tava kasutada vaateava laiust „vw” või protsenti „%”, kuna see võimaldab atribuuti olemasoleva ruumi alusel proportsionaalselt skaleerida, muutes kujunduse tundlikumaks. Veenduge, et teate millist CSS-i ühikut peaksite kasutama teie stsenaariumi jaoks.

See on kõige levinum tüpograafiatehnika, mida arendajad kasutavad. See hõlmab meediumipäringute loomist iga katkestuspunkti jaoks. See võimaldab teil rakendada konkreetseid stiile, mis põhinevad erinevatel ekraanisuurustel. Siin on illustratsioon:

/* Vaikimisi fondi suurus */
h1{
fondi suurus: 38px;
}
lk{
fondi suurus: 20px;
}
/* Kirja suurus väikeste ekraanide jaoks */
@meedia (maksimaalne laius:800 pikslit){
h1{
fondi suurus: 32px;
}
lk{
fondi suurus: 18px;
}
}
/* Fondi suurus väiksemate ekraanide jaoks */
@meedia (maksimaalne laius:400 pikslit){
h1{
fondi suurus: 28px;
}
lk{
fondi suurus: 15px;
}
}

Selles näites on pealkirja ja lõigu vaikeväärtuseks määratud vastavalt „38px” kuni „20px”. Seejärel seatakse tingimused väiksematele ekraanisuurustele, et muuta paigutus mobiiltelefonides tundlikuks. Saate luua nii palju meediumipäringuid kui soovite, lähtudes soovitud disainist ja reageerimisvõimest ning paljudest muudest meediapäring CSS-i nipid, mida peaksite teadma.

3. CSS-i kohandatud atribuudid

Tuntud ka kui CSS-i kohandatud muutujad, see salvestab väärtused, mida saab stiilis uuesti kasutada. Seda saab kasutada tüpograafia jaoks, et võimaldada lihtsat haldamist ja kohandamist. Siin on näide.

:juur {
--pealkirja-fondi suurus: 3rem;
--lõike-fondi suurus: 1.5rem;
}
h1{
fondi suurus: var(--pealkirja-fondi suurus);
}
lk{
fondi suurus: var(--lõike-fondi suurus);
}
@meedia (maksimaalne laius:800 pikslit){
:juur {
--pealkirja-fondi suurus: 2rem;
--lõike-fondi suurus: 0.9rem;
}
}
@meedia (maksimaalne laius:400 pikslit){
:juur {
--pealkirja-fondi suurus: 1.5rem;
--lõike-fondi suurus: 0.8rem;
}
}

Selles näites on CSS-i atribuut seatud juurtasemel, mis võimaldab meil sellele globaalselt juurde pääseda. --heading-font-size ja --paragraph-font-size on vastavalt pealkirja ja lõigu kirjeldavad nimed, mõlemale on antud vaikeväärtused. Seda tehnikat saab erinevate meediumipäringute jaoks uuesti kasutada, et tagada järjepidevus kõikjal.

Reageeriva tüpograafia parimad tavad

Arendajate seas on levinud tava kasutada tüpograafia tegemiseks otse vaateava laiust (vw). Kuigi see on lihtne ja näib töötavat, muutub see väikeste ekraanisuuruste korral pisikeseks ja suurel ekraanil äärmiselt suureks. See juhtub ka siis, kui suumite oma lehte sisse ja välja. Kui saate, vältige otse sellise vaateava kasutamist;

h1{
fondi suurus: 2vh;
 }

Alati testige ja veenduge, et teie tüpograafia on loetav erinevates suurustes ekraanidel ning testige alati brauseri ühilduvust. Arvestage loetavust ja veenduge, et fondi suurused ei oleks liiga väikesed ega liiga suured

Tundlik tüpograafia on loetava veebidisaini võti

Responsiivne tüpograafia mängib veebidisainis ja -arenduses keskset rolli. Rakendades selliseid meetodeid ja tehnikaid nagu klambrid, meediumipäringud ja CSS-i kohandatud atribuudid, saate tagada oma tüpograafia ulatuse erinevates ekraanisuurustes ja seadmetes. CSS-i abil reageerimisvõime loomisel tuleb uurida nii palju tehnikaid – kasutage neid tehnikaid, et alustada asjatundlikkuse arendamist selles valdkonnas.