Желите да обезбедите да ваша веб локација или апликација изгледа добро на свим типовима екрана? Ту долази ЦСС респонзивна типографија.

Развијање веб странице са толико тачака прекида може бити исцрпљујуће. Постоји много нових техника које треба научити у ЦСС-у, било да сте искусан програмер или програмер средњег нивоа.

Али како да почнете са респонзивном типографијом? Ево како да предузмете кораке да прилагодите веб странице било којој величини екрана.

Важност прилагодљиве типографије

Типографија игра виталну улогу у развоју и дизајну веба тако што обезбеђује читљивост, употребљивост и општу естетику веб странице. Сви желе респонзивну веб локацију. Зар не би било сјајно да се текст или фонтови аутоматски прилагођавају различитим величинама екрана? Остале предности респонзивне типографије у веб развоју укључују следеће;

  • Побољшава целокупно корисничко искуство на различитим уређајима или величинама екрана тако што обезбеђује читљивост и читљивост.
  • Повећава приступачност тако што омогућава корисницима са оштећењем вида или другим инвалидитетом. Прилагођава се различитим корисничким преференцијама, као што су подесиве величине фонта.
  • Доследна типографија на свим уређајима и резолуцијама помаже у очувању идентитета бренда и визуелног јединства.

Ево шаблона кода који можете копирати у уређивач кода пре него што почнете, тако да можете да пратите технике о којима ће се расправљати.

Датотека ХТМЛ кода

индек.хтмл
хтмл>
<хтмлланг="ен">
<глава>
<метацхарсет="УТФ-8">
<метаиме="виевпорт"садржаја="видтх=девице-видтх, инитиал-сцале=1.0">
<линкрел="стилесхеет"хреф="стиле.цсс">
<наслов> Респонсиве Типограпхи наслов>
глава>
<тело>
<дивкласа="контејнер">
<х1> Лорем ипсум х1>
<стр> Лорем ипсум долор сит, амет цонсецтетур адиписицинг елит. Ут, обцаецати. Цорпорис куам, бландитиис одит оптио дигниссимос фацилис магни долорибус адиписци ат куаерат олуптас молестиае еиус дицта оффициа куод еакуе перспициатис! 
стр>
див>
тело>
хтмл>

Датотека ЦСС кода

/*style.css*/
тело{
приказ: флек;
оправдати-садржај: центар;
алигн-итемс: центар;
висина: 100вх;
}
.контејнер{
ширина: 400пк;
боја позадине: антикуевхите;
паддинг: 15пк;
кутија-сенка:0 2пк 5пкргба(0,0,0, 0.1) ;
}
х1{
боја: хотпинк;
}

Сада, хајде да истражимо неке ефикасне методе и технике за имплементацију респонзивне типографије користећи ЦСС

1. Стезање

Ово је модерна техника ЦСС типографије која омогућава и осигурава да величина фонта елемента остане у одређеном опсегу. Функција стезања “Цламп()” узима три параметра, минималну вредност, идеалну вредност и максималну вредност. Функција стезања није ограничена на типографију. Може се користити за слике, картице, видео записе и друге медије. Овако се ради.

Стезаљка (минимална вредност, идеална вредност, максимална вредност): 

х1{
фонт-сизе: стезаљка(2рем, 5вв, 3рем);
}
стр{
фонт-сизе: стезаљка(1рем, 3вв, 2рем);
}

У овом примеру, величине фонта за наслов и пасус су постављене помоћу функције „цламп()“. За наслов „х1“ минимална вредност је постављена на „2рем“ како би се осигурало да величина фонта неће бити испод двоструке величине основног фонта. Идеална или пожељна вредност је постављена на „5вв“, што је 5% ширине прозора за приказ, што га чини осетљивим на различите величине екрана. Максимална вредност је постављена на „3 рем“ како би се осигурало да величина фонта неће бити већа од три пута веће величине основног фонта. Обрнуто за стилизовање пасуса.

Најбоља пракса је да користите ширину оквира приказа „вв“ или проценат „%“ за идеалну вредност, јер омогућава пропорционално скалирање својства на основу доступног простора, чинећи дизајн прилагодљивијим. Уверите се да знате коју ЦСС јединицу треба да користите за ваш сценарио.

Ово је најчешћа техника типографије коју користе програмери. То укључује креирање медијских упита за сваку тачку прекида. Омогућава вам да примените одређене стилове на основу различитих величина екрана. Ево илустрације: 

/* Подразумевана величина фонта */
х1{
фонт-сизе: 38пк;
}
стр{
фонт-сизе: 20пк;
}
/* Величина фонта за мале екране */
@медиа (максимална ширина:800пк){
х1{
фонт-сизе: 32пк;
}
стр{
фонт-сизе: 18пк;
}
}
/* Величина фонта за мање екране */
@медиа (максимална ширина:400пк){
х1{
фонт-сизе: 28пк;
}
стр{
фонт-сизе: 15пк;
}
}

У овом примеру, наслов и пасус су постављени на подразумевану вредност од „38пк“ до „20пк“ респективно. Затим се постављају услови за мање величине екрана да би изглед био прилагодљив на мобилним телефонима. Можете креирати онолико медијских упита колико желите на основу дизајна и одзива који желите, између многих других ЦСС трикови медијског упита које треба да знате.

3. ЦСС прилагођена својства

Такође познат као ЦСС прилагођене променљиве, он чува вредности које се могу поново користити током вашег стила. Може се користити за типографију како би се омогућило лако управљање и прилагођавање. Ево примера. 

:корен {
--хеадинг-фонт-сизе: 3рем;
--параграпх-фонт-сизе: 1.5рем;
}
х1{
фонт-сизе: вар(--хеадинг-фонт-сизе);
}
стр{
фонт-сизе: вар(--параграпх-фонт-сизе);
}
@медиа (максимална ширина:800пк){
:корен {
--хеадинг-фонт-сизе: 2рем;
--параграпх-фонт-сизе: 0.9рем;
}
}
@медиа (максимална ширина:400пк){
:корен {
--хеадинг-фонт-сизе: 1.5рем;
--параграпх-фонт-сизе: 0.8рем;
}
}

У овом примеру, ЦСС својство је постављено на основни ниво, што нам омогућава да му приступимо глобално. --хеадинг-фонт-сизе и --параграпх-фонт-сизе су дескриптивна имена за наслов и пасус, респективно, са подразумеваним вредностима датим за оба. Ова техника се може поново користити за различите медијске упите како би се обезбедила доследност у целости.

Најбоље праксе за прилагодљиву типографију

Уобичајена је пракса међу програмерима да користе ширину прозора за приказ (вв) директно за вршење типографије. Иако је једноставан и изгледа да функционише, постаје мали на малим екранима и изузетно велики на великим екранима. Ово се такође дешава када зумирате и умањујете своју страницу. Ако можете, избегавајте коришћење оквира за приказ директно на овај начин;

х1{
фонт-сизе: 2вх;
 }

Увек тестирајте и уверите се да је ваша типографија читљива на различитим величинама екрана и увек тестирајте компатибилност прегледача. Узмите у обзир читљивост и уверите се да величине фонта нису премале или превелике

Респонзивна типографија је кључ читљивог веб дизајна

Респонзивна типографија игра кључну улогу у веб дизајну и развоју. Применом метода и техника као што су стезање, медијски упити и прилагођена својства ЦСС-а, можете обезбедити размере типографије на различитим величинама екрана и уређајима. Постоји толико много техника које треба истражити када покушавате да створите одзив помоћу ЦСС-а - користите ове технике да бисте почели да развијате стручност у овој области.