Kā izveidot atsaucīgu tipogrāfiju, izmantojot CSS

Tīmekļa vietnes izveide ar tik daudziem pārtraukuma punktiem var būt nogurdinoša. CSS ir jāapgūst daudzas jaunas metodes neatkarīgi no tā, vai esat pieredzējis izstrādātājs vai vidēja līmeņa izstrādātājs.

Bet kā sākt ar atsaucīgu tipogrāfiju? Tālāk ir norādīts, kā veikt darbības, lai tīmekļa lapas pielāgotu jebkura izmēra ekrānam.

Atsaucīgas tipogrāfijas nozīme

Tipogrāfijai ir būtiska nozīme tīmekļa izstrādē un dizainā, nodrošinot vietnes lasāmību, lietojamību un vispārējo estētiku. Ikviens vēlas responsīvu vietni. Vai nebūtu lieliski, ja teksts vai fonti automātiski pielāgotos dažādiem ekrāna izmēriem? Citas adaptīvās tipogrāfijas priekšrocības tīmekļa izstrādē ir šādas:

• Tas uzlabo vispārējo lietotāja pieredzi dažādās ierīcēs vai ekrānos, nodrošinot lasāmību un salasāmību.
• Tas palielina pieejamību, izmitinot lietotājus ar redzes vai citiem traucējumiem. Tas atbilst dažādām lietotāju vēlmēm, piemēram, regulējamiem fontu izmēriem.
instagram viewer
• Konsekventa tipogrāfija dažādās ierīcēs un izšķirtspējās palīdz saglabāt zīmola identitāti un vizuālo vienotību.

Šeit ir koda veidne, kuru varat kopēt savā koda redaktorā pirms darba sākšanas, lai jūs varētu sekot apspriežamajiem paņēmieniem.

HTML koda fails

index.html
html>
<htmllang="lv">
<galvu>
<metarakstzīmju kopa="UTF-8">
<metanosaukums="skata logs"saturu="platums = ierīces platums, sākotnējais mērogs = 1,0">
<saiterel="stila lapa"href="stils.css">
<virsraksts> Atsaucīga tipogrāfija virsraksts>
galvu>
<ķermeni>
<divklasē="konteiners">
<h1> Lorem ipsum h1>
<lpp> 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! 
lpp>
div>
ķermeni>
html>

CSS koda fails

/*style.css*/
ķermeni{
displejs: flex;
attaisnot-saturs: centrs;
izlīdzināt vienumus: centrs;
augstums: 100vh;
}
.konteiners{
platums: 400px;
fona krāsa: antīks balts;
polsterējums: 15px;
kaste-ēna:0 2px 5pxrgba(0,0,0, 0.1) ;
}
h1{
krāsa: Koši rozā;
}

Tagad izpētīsim dažas efektīvas metodes un paņēmienus reaģējošas tipogrāfijas ieviešanai, izmantojot CSS

1. Saspīlēšana

Šī ir moderna CSS tipogrāfijas tehnika, kas ļauj un nodrošina elementa fonta lieluma saglabāšanos noteiktā diapazonā. Skavas funkcija “Clamp()” uzņem trīs parametrus: minimālo vērtību, ideālo vērtību un maksimālo vērtību. Skavas funkcija neaprobežojas tikai ar tipogrāfiju. To var izmantot attēliem, kartēm, videoklipiem un citiem multivides materiāliem. Tas darbojas šādi.

Skava (minimālā vērtība, ideālā vērtība, maksimālā vērtība):

h1{
fonta izmērs: skava(2rem, 5vw, 3rem);
}
lpp{
fonta izmērs: skava(1rem, 3vw, 2rem);
}

Šajā piemērā virsraksta un rindkopas fontu lielumi tiek iestatīti, izmantojot funkciju “clamp()”. Virsrakstam “h1” minimālā vērtība ir iestatīta uz “2rem”, kas nodrošina, ka fonta lielums nav divreiz mazāks par saknes fonta lielumu. Ideālā vai vēlamā vērtība ir iestatīta uz “5vw”, kas ir 5% no skata loga platuma, tādējādi reaģējot uz dažādiem ekrāna izmēriem. Maksimālā vērtība ir iestatīta uz “3 rem”, nodrošinot, ka fonta lielums nepārsniegs trīs reizes lielāku fonta lielumu. Pretēji rindkopas stilam.

Ideālajai vērtībai vislabāk ir izmantot skatvietas platumu “vw” vai procentuālo daļu “%”, jo tas ļauj īpašumam proporcionāli mērogot, pamatojoties uz pieejamo vietu, padarot dizainu atsaucīgāku. Pārliecinieties, ka zināt kuru CSS vienību vajadzētu izmantot jūsu scenārijam.

Šī ir visizplatītākā tipogrāfijas tehnika, ko izmanto izstrādātāji. Tas ietver multivides vaicājumu izveidi katram pārtraukuma punktam. Tas ļauj izmantot noteiktus stilus, pamatojoties uz dažādiem ekrāna izmēriem. Šeit ir ilustrācija:

/* Noklusējuma fonta lielums */
h1{
fonta izmērs: 38px;
}
lpp{
fonta izmērs: 20px;
}
/* Fonta lielums maziem ekrāniem */
@media (maksimālais platums:800 pikseļi){
h1{
fonta izmērs: 32px;
}
lpp{
fonta izmērs: 18px;
}
}
/* Fonta lielums mazākiem ekrāniem */
@media (maksimālais platums:400 pikseļi){
h1{
fonta izmērs: 28px;
}
lpp{
fonta izmērs: 15px;
}
}

Šajā piemērā virsrakstam un rindkopai ir iestatīta attiecīgi noklusējuma vērtība no “38 pikseļi” līdz “20 pikseļi”. Pēc tam tiek iestatīti nosacījumi mazākiem ekrāna izmēriem, lai mobilajos tālruņos būtu pielāgojams izkārtojums. Varat izveidot tik daudz multivides vaicājumu, cik vēlaties, pamatojoties uz vēlamo dizainu un atsaucību, kā arī daudz citu multivides vaicājuma CSS triki, kas jums jāzina.

3. CSS pielāgotie rekvizīti

Pazīstams arī kā CSS pielāgotie mainīgie, tas saglabā vērtības, kuras var atkārtoti izmantot visā jūsu stilā. To var izmantot tipogrāfijā, lai nodrošinātu vieglu pārvaldību un pielāgošanu. Šeit ir piemērs.

:root {
-- virsraksta-fonta lielums: 3rem;
--rindkopas fonta lielums: 1.5rem;
}
h1{
fonta izmērs: var(-- virsraksta-fonta lielums);
}
lpp{
fonta izmērs: var(--rindkopas fonta lielums);
}
@media (maksimālais platums:800 pikseļi){
:root {
-- virsraksta-fonta lielums: 2rem;
--rindkopas fonta lielums: 0.9rem;
}
}
@media (maksimālais platums:400 pikseļi){
:root {
-- virsraksta-fonta lielums: 1.5rem;
--rindkopas fonta lielums: 0.8rem;
}
}

Šajā piemērā CSS rekvizīts ir iestatīts saknes līmenī, kas ļauj tam piekļūt globāli. --heading-font-size un --paragraph-font-size ir attiecīgi virsraksta un rindkopas aprakstoši nosaukumi, un abiem ir piešķirtas noklusējuma vērtības. Šo paņēmienu var atkārtoti izmantot dažādiem multivides vaicājumiem, lai nodrošinātu konsekvenci visās jomās.

Adaptīvās tipogrāfijas paraugprakse

Izstrādātāju vidū ir ierasta tipogrāfijas veikšanai tieši izmantot skata loga platumu (vw). Lai gan tas ir vienkāršs un, šķiet, darbojas, tas kļūst niecīgs mazos ekrānos un ārkārtīgi liels, ja ekrāns ir liels. Tas notiek arī tad, kad tuvināt un attālināt savu lapu. Ja varat, izvairieties no skatvietas tieši šādi;

h1{
fonta izmērs: 2vh;
 }

Vienmēr pārbaudiet un pārliecinieties, vai jūsu tipogrāfija ir lasāma dažādos ekrānos, kā arī vienmēr pārbaudiet pārlūkprogrammas saderību. Apsveriet lasāmību un pārliecinieties, ka fontu izmēri nav pārāk mazi vai pārāk lieli

Adaptīva tipogrāfija ir lasāma tīmekļa dizaina atslēga

Atsaucīgai tipogrāfijai ir galvenā loma tīmekļa dizainā un izstrādē. Ieviešot tādas metodes un paņēmienus kā iespīlēšana, multivides vaicājumi un CSS pielāgotie rekvizīti, varat nodrošināt tipogrāfijas mērogus dažādos ekrāna izmēros un ierīcēs. Mēģinot izveidot atsaucību, izmantojot CSS, ir jāizpēta tik daudz paņēmienu — izmantojiet šīs metodes, lai sāktu attīstīt zināšanas šajā jomā.