Пк вс. Ем вс. Рем: Коју ЦСС јединицу треба да користите?

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

Пре него што наставите, имајте на уму да постоје две врсте јединичних дужина: апсолутна и релативан.

Апсолутне дужине

Јединице апсолутне дужине су фиксне, а дужина изражена у било којој од ових ће се појавити као тачно та величина.

Јединице апсолутне дужине се не препоручују за употребу на екрану, јер се величине екрана толико разликују. Међутим, могу се користити ако је излазни медиј познат, на пример за штампани изглед.

Релативне дужине

Јединице релативне дужине одређују дужину у односу на друго својство дужине. Јединице релативне дужине боље се скалирају између различитих медија за приказивање.

1. Пк (пиксел)

Пиксел је вероватно најчешће коришћена јединица у ЦСС-у и веома је популаран када је у питању подешавање величине фонта текста на веб страницама. Један пиксел (1пк) је дефинисан као 1/96 инча у медијима за штампање.

Међутим, на екранима рачунара, они обично нису повезани са стварним мерењима као што су центиметри и инчи као што можда мислите; они су само дефинисани као мали али видљиви. Оно што се сматра видљивим зависи од уређаја.

Различити уређаји имају различит број пиксела по инчу на својим екранима, што је познато као густина пиксела. Ако бисте користили број физичких пиксела на екрану уређаја да одредите величину садржаја на том уређају, имали бисте проблем да ствари изгледају исто на екранима свих величина.

Ту долази до односа пиксела уређаја. То је у суштини само начин да се израчуна колико ће простора ЦСС пиксел (1пк) заузети на екрану уређаја што ће омогућити да изгледа исте величине у поређењу са другим уређајем.

Испод је пример: -

<див цласс="контејнер">
<див>
<х1>Ово је параграф</h1>
<стр>
 Лорем ипсум, долор сит амет цонсецтетур адиписицинг елит.
 Репрехендерит инцидунт перферендис иуре веритатис цупидитате делецтус
 омнис ат! Оффициис праесентиум оффициа, немо вениам цонсекуатур
 нострум сунт аликуид ипсам, цорпорис куас куаерат. Лорем ипсум долор
 сит амет цонсецтетур адиписицинг елит. Хиц куам беатае волуптатибус
 амет поссимус иуре импедит аццептнда дифферентио аликуид дебитис, аутем
 вел уллам аут, куод цорпорис ратионе аткуе дуцимус долорум.
</п>
</div>
</div>

.контејнер {
 ширина: 100%;
 висина: 100вх;
 дисплеј: флек;
 јустифи-цонтент: центар;
 алигн-итемс: центар;
}
.контејнердив {
 мак-видтх: 500пк;
 паддинг: 5пк 20пк;
 ивица: 1пк сива чврста;
 бордер-радиус: 10пк;
}
п {
 фонт-сизе: 16пк;
}

излаз

Горњи оквир је како изгледа када се приказује на већем екрану попут лаптопа, а доњи оквир је како изгледа када се приказује на мањем екрану, попут телефона.

Обратите пажњу на то како је текст у оба поља исте величине. То је у основи начин на који пиксел функционише. Помаже да веб садржај (не само текст) изгледа исте величине на свим уређајима.

2. Ем (М)

Јединица ем је добила име по великом слову 'М' (ем) пошто већина ЦСС јединица потиче од типографије. Користи тренутну величину фонта родитељског елемента као своју основу. Може се користити за повећање или смањење величине фонта елемента на основу величине фонта наслеђене од родитеља.

Рецимо да имате родитељски див који има величину фонта од 16 пиксела. Ако направите елемент пасуса у том див и дате му величину фонта од 1ем, величина фонта пасуса ће бити 16пк.

Међутим, ако другом пасусу дате величину фонта од 2ем, то ће бити преведено на 32пк. Размотрите пример у наставку:

<див цласс="див-оне">
<п цласс="оне-ем">1 ем на основу 10пк</п>
<п цласс="два-ем">2 ем на основу 10пк</п>
</div>
<див цласс="див-два">
<п цласс="оне-ем">1 ем на основу 10пк</п>
<п цласс="два-ем">2 ем на основу 10пк</п>
</div>
</div>

.див-оне {
 фонт-сизе: 15пк;
}
.див-два {
 фонт-сизе: 20пк;
}
.оне-ем {
 величина фонта: 1ем;
}
.два-ем {
 величина фонта: 2ем;
}

излаз

Можете видети како ем може да повећа величину текста и како на то утиче тренутна величина фонта наслеђена из родитељског контејнера. Није препоручљиво користити их, посебно у оквиру сложено структурираних страница.

Ако се не користи правилно, можете наићи на проблеме са скалирањем где елементи можда неће бити правилно величине на основу сложеног наслеђивања величина у ДОМ стаблу.

3. Рем (Роот Ем)

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

Подразумевана величина фонта веб претраживача је обично 16пк, стога ће 1рем бити 16пк, а 2рем ће бити 32пк. Међутим, у случају када је основна величина фонта промењена на 10пк, на пример; 1рем ће бити 10пк, а 2рем ће бити 20пк.

Ево примера да ствари буду јасније:

<див цласс="див-оне">
<!-- ЕМ -->
<п цласс="оне-ем">1 ем на основу контејнера (40 пиксела)</п>
<п цласс="два-ем">2 ем на основу контејнера (40пк)</п>
<!-- РЕМ -->
<п цласс="оне-рем">1 рем на основу корена (16пк)</п>
<п цласс="дворем">2 рем на основу корена (16пк)</п>
</div>

.див-оне {
 фонт-сизе: 40пк;
}
.оне-ем {
 величина фонта: 1ем;
}
.два-ем {
 величина фонта: 2ем;
}
.оне-рем {
 фонт-сизе: 1рем;
}
.два-рем {
 фонт-сизе: 2рем;
}

излаз

Као што видите, параграфи дефинисани са РЕМ јединицама су потпуно неометани величином фонта декларисане у нашем контејнеру и стриктно су приказани у односу на величина основног фонта дефинисана у селектору ХТМЛ елемента.

Пк вс. Ем вс. Рем: Која јединица је најбоља?

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