Kaip sukurti reaguojančią tipografiją naudojant CSS

Svetainės su tiek daug lūžio taškų kūrimas gali būti varginantis. Yra daug naujų CSS metodų, kuriuos reikia išmokti, nesvarbu, ar esate patyręs kūrėjas, ar vidutinio lygio kūrėjas.

Bet kaip pradėti naudoti reaguojančią tipografiją? Štai kaip imtis veiksmų, kad tinklalapiai būtų pritaikyti prie bet kokio ekrano dydžio.

Atsakingos tipografijos svarba

Tipografija vaidina labai svarbų vaidmenį kuriant ir kuriant žiniatinklio svetainę, nes užtikrina svetainės skaitomumą, patogumą naudoti ir bendrą estetiką. Visi nori interaktyvios svetainės. Ar nebūtų puiku, jei tekstas arba šriftai automatiškai prisitaikytų prie skirtingų ekrano dydžių? Kiti reaguojančios tipografijos pranašumai kuriant žiniatinklio svetainę yra šie:

• Tai pagerina bendrą naudotojo patirtį įvairiuose įrenginiuose ar ekrano dydžiuose, nes užtikrina skaitomumą ir įskaitomumą.
• Jis padidina prieinamumą, nes apgyvendina vartotojus, turinčius regėjimo ar kitų negalių. Jis pritaikytas įvairioms vartotojo nuostatoms, pvz., reguliuojamas šrifto dydis.
  instagram viewer
• Nuosekli įrenginių ir skiriamųjų gebų tipografija padeda išsaugoti prekės ženklo tapatybę ir vizualinę vienovę.

Štai kodo šablonas, kurį prieš pradėdami galite nukopijuoti į kodo rengyklę, kad galėtumėte vadovautis aptartais metodais.

HTML kodo failas

index.html
html>
<htmllang="en">
<galva>
<metasimbolių rinkinys="UTF-8">
<metavardas="žiūros sritis"turinys="plotis = įrenginio plotis, pradinė skalė = 1,0">
<nuorodarel="stiliaus lapas"href="stilius.css">
<titulą> Atsakinga tipografija titulą>
galva>
<kūnas>
<divklasė="konteineris">
<h1> Lorem ipsum h1>
<p> 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! 
p>
div>
kūnas>
html>

CSS kodo failas

/*style.css*/
kūnas{
ekranas: lankstus;
pateisinti-turinys: centras;
išlyginti elementus: centras;
aukščio: 100vh;
}
.konteineris{
plotis: 400px;
fono spalva: antikvarinis baltas;
kamšalas: 15px;
dėžutė-šešėlis:0 2px 5pxrgba(0,0,0, 0.1) ;
}
h1{
spalva: ryški rausva spalva;
}

Dabar panagrinėkime keletą veiksmingų metodų ir metodų, kaip įdiegti reaguojančią tipografiją naudojant CSS

1. Suspaudimas

Tai moderni CSS tipografijos technika, leidžianti ir užtikrinanti, kad elemento šrifto dydis neviršytų tam tikro diapazono. Apkabos funkcija „Clamp()“ turi tris parametrus: mažiausią vertę, idealią vertę ir didžiausią vertę. Gnybtų funkcija neapsiriboja tipografija. Jis gali būti naudojamas vaizdams, kortelėms, vaizdo įrašams ir kitai laikmenai. Tai veikia taip.

Spaustuvas (min. vertė, ideali vertė, maksimali vertė):

h1{
šrifto dydis: spaustukas(2rem, 5vw, 3rem);
}
p{
šrifto dydis: spaustukas(1rem, 3vw, 2rem);
}

Šiame pavyzdyje antraštės ir pastraipos šrifto dydžiai nustatomi naudojant funkciją „clamp()“. Antraštės „h1“ minimali reikšmė nustatyta į „2rem“, užtikrinant, kad šrifto dydis nebūtų mažesnis nei dvigubai mažesnis už pagrindinio šrifto dydį. Ideali arba pageidaujama reikšmė nustatyta kaip „5vw“, kuri yra 5 % peržiūros srities pločio, todėl ji reaguoja į skirtingus ekrano dydžius. Didžiausia vertė nustatyta į „3 rem“, užtikrinant, kad šrifto dydis nebus didesnis nei tris kartus didesnis už pagrindinio šrifto dydį. Pastraipos stiliui atvirkščiai.

Geriausia naudoti peržiūros srities plotį „vw“ arba procentą „%“, kad būtų ideali vertė, nes tai leidžia nuosavybės mastelį proporcingai keisti pagal turimą erdvę, todėl dizainas tampa labiau jautrus. Įsitikinkite, kad žinote kurį CSS vienetą turėtumėte naudoti jūsų scenarijui.

Tai dažniausiai kūrėjų naudojama tipografijos technika. Tai apima žiniasklaidos užklausų kūrimą kiekvienam lūžio taškui. Tai leidžia pritaikyti konkrečius stilius pagal skirtingus ekrano dydžius. Štai iliustracija:

/* Numatytasis šrifto dydis */
h1{
šrifto dydis: 38px;
}
p{
šrifto dydis: 20px;
}
/* Šrifto dydis mažiems ekranams */
@media (maksimalus plotis:800 piks){
h1{
šrifto dydis: 32px;
}
p{
šrifto dydis: 18px;
}
}
/* Šrifto dydis mažesniems ekranams */
@media (maksimalus plotis:400 piks){
h1{
šrifto dydis: 28px;
}
p{
šrifto dydis: 15px;
}
}

Šiame pavyzdyje antraštės ir pastraipos numatytoji reikšmė yra atitinkamai nuo „38 pikselių“ iki „20 pikselių“. Tada nustatomos sąlygos mažesniems ekrano dydžiams, kad išdėstymas būtų tinkamas mobiliuosiuose telefonuose. Galite sukurti tiek medijos užklausų, kiek norite, atsižvelgdami į norimą dizainą ir reagavimą bei daugybę kitų medijos užklausos CSS gudrybės, kurias turėtumėte žinoti.

3. CSS tinkintos ypatybės

Taip pat žinomas kaip pasirinktiniai CSS kintamieji, jame saugomos reikšmės, kurias galima pakartotinai naudoti kuriant stilių. Jis gali būti naudojamas tipografijai, kad būtų galima lengvai valdyti ir pritaikyti. Štai pavyzdys.

:root {
--antraštės-šrifto dydis: 3rem;
-- pastraipos šrifto dydis: 1.5rem;
}
h1{
šrifto dydis: var(--antraštės-šrifto dydis);
}
p{
šrifto dydis: var(-- pastraipos šrifto dydis);
}
@media (maksimalus plotis:800 piks){
:root {
--antraštės-šrifto dydis: 2rem;
-- pastraipos šrifto dydis: 0.9rem;
}
}
@media (maksimalus plotis:400 piks){
:root {
--antraštės-šrifto dydis: 1.5rem;
-- pastraipos šrifto dydis: 0.8rem;
}
}

Šiame pavyzdyje CSS ypatybė nustatyta šakniniu lygiu, todėl galime ją pasiekti visame pasaulyje. --heading-font-size ir --paragraph-font-size yra aprašomieji antraštės ir pastraipos pavadinimai, kurių abiem suteikiamos numatytosios reikšmės. Šis metodas gali būti pakartotinai naudojamas įvairioms žiniasklaidos užklausoms, kad būtų užtikrintas nuoseklumas.

Atsakingos tipografijos geriausia praktika

Įprasta kūrėjų praktika naudoti peržiūros srities plotį (vw) tiesiogiai spausdinimui atlikti. Nors jis yra paprastas ir atrodo veikiantis, jis tampa mažytis ant mažo dydžio ekrano ir itin didelis ant didelio ekrano dydžio. Tai taip pat nutinka, kai priartinate ir tolinate puslapį. Jei galite, venkite tiesiogiai naudoti peržiūros sritį;

h1{
šrifto dydis: 2vh;
 }

Visada patikrinkite ir įsitikinkite, kad jūsų tipografija yra skaitoma įvairiuose ekrano dydžiuose, ir visada patikrinkite naršyklės suderinamumą. Atsižvelkite į skaitomumą ir įsitikinkite, kad šrifto dydžiai nėra per maži ar per dideli

Interaktyvi tipografija – raktas į skaitomą interneto dizainą

Reaguojanti tipografija vaidina pagrindinį vaidmenį kuriant ir kuriant interneto svetainę. Įdiegę metodus ir metodus, pvz., suspaudimą, medijos užklausas ir tinkintas CSS ypatybes, galite užtikrinti savo tipografijos mastelį įvairiuose ekrano dydžiuose ir įrenginiuose. Yra tiek daug metodų, kuriuos reikia ištirti bandant sukurti reagavimą naudojant CSS – naudokite šiuos metodus, kad pradėtumėte tobulinti šios srities žinias.