Шта овај алат ради
Овај конвертор претвара вредности пиксела (px) у rem и em јединице, и обрнуто. Довољно је да вредност унесете у било које од три поља — px, rem или em — и преостала два ће се одмах ажурирати. Поред тога, можете подесити и сопствену основну величину фонта и em контекстну величину фонта, како би конверзије биле тачне за ваш конкретан дизајн.
Сама страница то објашњава овако: „Унесите вредност у px, rem или em — остале две ће се ажурирати како куцате.“ Резултат се приказује као вредност „Конвертовано у све три јединице.“
Овакав алат је користан за свакога ко треба да претвори фиксне пиксел вредности у релативне rem или em јединице ради респонзивног дизајна, ко жели да разуме како различите основне величине фонта утичу на rem вредности, ко треба да израчуна em вредности на основу величине фонта одређеног елемента, или ко жели да провери да ли се величине исправно скалирају када читалац промени подразумевану величину фонта у свом прегледачу.
px, rem и em – у чему је разлика
Ове три јединице мере дужину на различите начине. Јединица px представља фиксну дужину. Јединица rem се мери у односу на основну (root) величину фонта странице, па је при основи од 16px вредност 1rem једнака 16px. Јединица em се, за разлику од rem, мери у односу на величину фонта елемента у којем се сам налази, а не у односу на корен странице.
Коришћење rem јединица за текст и размаке значи да се све пропорционално скалира када корисник промени подразумевану величину фонта у свом прегледачу.
Основна величина фонта и подразумеване вредности
Поље „Основна величина фонта (px)“ представља основу коју алат користи за rem конверзије. Подразумевана вредност је 16px, а на почетку важи да је 16px једнако 1rem и једнако 1em. Основна величина фонта мора бити број већи од 0.
Пошто је однос између px и rem пропорционалан основној вредности, на почетним поставкама важи, на пример, да вредност од 32px одговара тачно 2rem — двоструко више од основе од 16px.
Ако основна величина фонта у вашем пројекту није 16px, довољно је да измените ово поље и свака rem вредност ће се тренутно ажурирати. Табела на страници (о којој више у наставку) служи као водич за уобичајену основу од 16px коју користи већина сајтова.
em контекст: величина фонта родитељског елемента
Поље „em контекстна величина фонта (px)“ представља величину фонта елемента за који рачунате em вредности. И ова величина мора бити број већи од 0, а подразумевана вредност је такође 16px.
Јединица em је релативна у односу на величину фонта сопственог родитељског елемента, који није увек исти као корен странице. Зато em контекст подесите на величину фонта тог конкретног елемента да бисте добили тачан резултат, или га оставите једнаким основној величини кад су оне исте.
Уношење вредности, негативни бројеви и табела конверзија
У поље „Вредности“ уносите број у px, rem или em, а алат га одмах конвертује у преостале две јединице док куцате. Дозвољене су и негативне пиксел вредности.
На страници се такође налази табела „Уобичајене вредности px → rem (основа 16px)“, која приказује уобичајене пиксел вредности претворене у rem, уз претпоставку основне величине фонта од 16px. Она служи као брз преглед за оне који желе да виде више вредности одједном, без ручног уношења сваке појединачно.
Поруке о грешци и приватност обраде
Ако у поље за вредности унесете нешто што није важећи број, приказаће се порука „Унесите број за конверзију.“ Ако основна величина фонта није важећи број већи од 0, алат приказује поруку „Основна величина фонта мора бити број већи од 0.“ Слично, ако em контекстна величина фонта није важећи број већи од 0, приказује се порука „Контекстна величина за em мора бити број већи од 0.“
Свака конверзија се извршава локално у вашем прегледачу. Ништа што унесете не шаље се на BroBroGo.
Најчешћа питања
Која је разлика између px, rem и em јединица?
Јединица px представља фиксну дужину. Јединица rem се мери у односу на основну (root) величину фонта странице, па је при основи од 16px вредност 1rem једнака 16px. Јединица em се мери у односу на величину фонта елемента у којем се налази. Коришћење rem јединица за текст и размаке омогућава да се све пропорционално скалира када корисник промени подразумевану величину фонта у свом прегледачу.
Зашто постоји посебна контекстна величина за em?
Јединица em је релативна у односу на величину фонта сопственог родитељског елемента, који није увек корен (root) странице. Подесите em контекст на величину фонта тог елемента да бисте исправно израчунали вредност, или је држите једнаком основној величини када су оне исте.
Шта ако моја основна величина фонта није 16px?
Промените поље за основну (root) величину фонта како би одговарало вашем CSS-у и свака rem вредност ће се тренутно ажурирати. Брза табела испод служи као згодан водич за уобичајену основу од 16px коју користи већина сајтова.