Kako ustvariti odzivno tipografijo s CSS

Razvijanje spletnega mesta s toliko prelomnimi točkami je lahko naporno. V CSS se lahko naučite veliko novih tehnik, ne glede na to, ali ste izkušen razvijalec ali razvijalec na srednji ravni.

Toda kako začeti z odzivno tipografijo? Tukaj je opisano, kako narediti korake za prilagoditev spletnih strani kateri koli velikosti zaslona.

Pomen odzivne tipografije

Tipografija igra ključno vlogo pri spletnem razvoju in oblikovanju, saj zagotavlja berljivost, uporabnost in splošno estetiko spletnega mesta. Vsak si želi odzivno spletno stran. Ali ne bi bilo super, če bi se besedilo ali pisave samodejno prilagajale različnim velikostim zaslona? Druge prednosti odzivne tipografije v spletnem razvoju vključujejo naslednje;

• Izboljšuje splošno uporabniško izkušnjo na različnih napravah ali velikostih zaslona z zagotavljanjem berljivosti in čitljivosti.
• Povečuje dostopnost s prilagajanjem uporabnikom z okvarami vida ali drugimi invalidnostmi. Prilagodi se različnim uporabniškim nastavitvam, kot je nastavljiva velikost pisave.
  instagram viewer
• Dosledna tipografija v vseh napravah in ločljivostih pomaga ohranjati identiteto blagovne znamke in vizualno enotnost.

Tukaj je predloga kode, ki jo lahko kopirate v urejevalnik kode, preden začnete, tako da lahko sledite tehnikam, o katerih bomo razpravljali.

Datoteka s kodo HTML

index.html
html>
<htmljezik="en">
<glavo>
<metanabor znakov="UTF-8">
<metaime="viewport"vsebino="width=device-width, initial-scale=1.0">
<povezavarel="stylesheet"href="style.css">
<naslov> Odzivna tipografija naslov>
glavo>
<telo>
<divrazred="posoda">
<h1> Lorem ipsum h1>
<str> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ut, obcaecati. Corporis quam, blanditiis odit optio dignissimos facilis magni doloribus adipisci at quaerat oluptas molestiae eius dicta officia quod eaque perspiciatis! 
str>
div>
telo>
html>

Datoteka s kodo CSS

/*style.css*/
telo{
zaslon: flex;
justify-content: center;
align-items: center;
višina: 100vh;
}
.posoda{
premer: 400px;
Barva ozadja: antiquewhite;
oblazinjenje: 15px;
box-shadow:0 2px 5pxrgba(0,0,0, 0.1) ;
}
h1{
barva: hotpink;
}

Zdaj pa raziščimo nekaj učinkovitih metod in tehnik za implementacijo odzivne tipografije s pomočjo CSS

1. Vpenjanje

To je sodobna tehnika tipografije CSS, ki omogoča in zagotavlja, da velikost pisave elementa ostane znotraj določenega obsega. Funkcija vpenjanja »Clamp()« zajema tri parametre, najmanjšo vrednost, idealno vrednost in največjo vrednost. Funkcija vpenjanja ni omejena na tipografijo. Uporablja se lahko za slike, kartice, videoposnetke in druge medije. Tako to deluje.

Objemka (najmanjša vrednost, idealna vrednost, največja vrednost):

h1{
velikost pisave: objemka(2rem, 5vw, 3rem);
}
str{
velikost pisave: objemka(1rem, 3vw, 2rem);
}

V tem primeru so velikosti pisave za naslov in odstavek nastavljene s funkcijo »clamp()«. Za naslov »h1« je najmanjša vrednost nastavljena na »2rem«, kar zagotavlja, da velikost pisave ne bo manjša od dvakratne velikosti korenske pisave. Idealna ali prednostna vrednost je nastavljena na »5vw«, kar je 5 % širine vidnega polja, zaradi česar se odziva na različne velikosti zaslona. Največja vrednost je nastavljena na "3 rem", kar zagotavlja, da velikost pisave ne bo večja od trikratne velikosti korenske pisave. Nasprotno za slog odstavka.

Najboljša praksa je, da za idealno vrednost uporabite širino vidnega polja »vw« ali odstotek »%«, saj omogoča, da se lastnost proporcionalno spreminja glede na razpoložljivi prostor, zaradi česar je dizajn bolj odziven. Prepričajte se, da veste katero enoto CSS morate uporabiti za vaš scenarij.

To je najpogostejša tehnika tipografije, ki jo uporabljajo razvijalci. Vključuje ustvarjanje medijskih poizvedb za vsako prelomno točko. Omogoča uporabo posebnih slogov na podlagi različnih velikosti zaslona. Tukaj je ilustracija:

/* Privzeta velikost pisave */
h1{
velikost pisave: 38px;
}
str{
velikost pisave: 20px;
}
/* Velikost pisave za majhne zaslone */
@mediji (največja širina:800 slikovnih pik){
h1{
velikost pisave: 32px;
}
str{
velikost pisave: 18px;
}
}
/* Velikost pisave za manjše zaslone */
@mediji (največja širina:400 slikovnih pik){
h1{
velikost pisave: 28px;
}
str{
velikost pisave: 15px;
}
}

V tem primeru sta naslov in odstavek nastavljena na privzeto vrednost od »38px« do »20px«. Nato se določijo pogoji za manjše velikosti zaslona, ​​da se postavitev na mobilnih telefonih odziva. Ustvarite lahko poljubno število medijskih poizvedb glede na obliko in odzivnost, ki jo želite, med številnimi drugimi triki CSS za medijske poizvedbe, ki bi jih morali poznati.

3. Lastnosti po meri CSS

Znan tudi kot spremenljivke po meri CSS, shranjuje vrednosti, ki jih je mogoče znova uporabiti v celotnem slogu. Uporablja se lahko za tipografijo, ki omogoča enostavno upravljanje in prilagajanje. Tukaj je primer.

:root {
--heading-font-size: 3rem;
--velikost-pisave-odstavka: 1.5rem;
}
h1{
velikost pisave: var(--heading-font-size);
}
str{
velikost pisave: var(--velikost-pisave-odstavka);
}
@mediji (največja širina:800 slikovnih pik){
:root {
--heading-font-size: 2rem;
--velikost-pisave-odstavka: 0.9rem;
}
}
@mediji (največja širina:400 slikovnih pik){
:root {
--heading-font-size: 1.5rem;
--velikost-pisave-odstavka: 0.8rem;
}
}

V tem primeru je lastnost CSS nastavljena na korenski ravni, kar nam omogoča globalni dostop. --heading-font-size in --paragraph-font-size sta opisni imeni za naslov oziroma odstavek, s privzetimi vrednostmi, danimi obema. To tehniko je mogoče znova uporabiti za različne medijske poizvedbe, da zagotovite doslednost na vseh področjih.

Najboljše prakse odzivne tipografije

Med razvijalci je običajna praksa, da širino vidnega polja (vw) uporabljajo neposredno za izvedbo tipografije. Čeprav je preprost in se zdi, da deluje, postane majhen na majhnih zaslonih in izjemno velik na velikih zaslonih. To se zgodi tudi, ko povečate in pomanjšate svojo stran. Če lahko, se izogibajte neposredni uporabi vidnega polja;

h1{
velikost pisave: 2vh;
 }

Vedno preizkusite in se prepričajte, da je vaša tipografija berljiva na različnih velikostih zaslona, ​​in vedno preizkusite združljivost brskalnika. Upoštevajte berljivost in zagotovite, da velikosti pisave niso premajhne ali prevelike

Odzivna tipografija ključ do berljivega spletnega oblikovanja

Odzivna tipografija igra ključno vlogo pri spletnem oblikovanju in razvoju. Z izvajanjem metod in tehnik, kot so vpenjanje, medijske poizvedbe in lastnosti po meri CSS, lahko zagotovite, da se vaša tipografija prilagaja v različnih velikostih zaslona in napravah. Obstaja toliko tehnik, ki jih je treba raziskati, ko poskušate ustvariti odzivnost s CSS – uporabite te tehnike, da začnete razvijati strokovno znanje na tem področju.