Ano ang ginagawa ng px sa rem at em Converter
Ang converter na ito ay nag-i-convert ng pixel (px) papuntang root em (rem) at em, at pabalik din. Maglagay ka lang ng halaga sa alinman sa tatlong unit — px, rem, o em — at awtomatikong kinakalkula at ipinapakita ng tool ang katumbas na halaga sa dalawang natitirang unit. Mayroon ka ring kontrol sa root font size at sa em context font size, para tumugma ang mga resulta sa aktwal na setup ng iyong disenyo. Ganito rin inilalarawan mismo ng interface ang layunin nito: "Mag-convert sa pagitan ng px, rem, at em gamit ang sarili mong root at context font size — i-edit ang kahit anong field at ang dalawa pa ay mag-a-update habang nagta-type ka."
Ang tatlong input field
May tatlong bagay kang maaaring itakda sa converter. Una, ang "Laki ng root font (px)" — isang numero na kumakatawan sa base font size ng buong pahina sa pixel. Pangalawa, ang "Laki ng em context font (px)" — isang numero na kumakatawan sa font size ng elementong gagamitin para sa mga conversion patungong em. Pangatlo, ang "Mga Value" — ang aktwal na halaga na gusto mong i-convert, maaaring nasa px, rem, o em. Ang default na root font size ay 16px, at ang default na em context font size ay 16px din. Dahil doon, sa simula pa lang, ang 16px ay katumbas na ng 1rem at 1em nang sabay.
Paano nag-a-update ang mga resulta habang nagta-type ka
Kapag nag-edit ka sa alinman sa px, rem, o em field, agad na nagbabago ang dalawang iba pang field habang sinusulat mo ang bagong halaga — walang kailangang i-click na "convert" button. Sa katunayan, ito rin mismo ang paalala na makikita mo sa ibaba ng mga field: "Maglagay ng px, rem o em na value — ang dalawa pa ay mag-a-update habang nagta-type ka." Kapag kumpleto na ang conversion, ipinapakita ang mensaheng "Na-convert na sa lahat ng tatlong unit." Isa pang mahalagang bagay: pinapayagan ng converter ang negative na pixel value, kaya kung kailangan mo, halimbawa, ng negative letter-spacing na -8px, at ang root font size mo ay nasa default na 16px, ipapakita ng tool na ang -8px ay katumbas ng -0.5rem.
Root font size laban sa em context font size
Madaling malito ang dalawang field na ito kaya mahalagang malaman kung ano ang pinagkaiba. Ang root font size ang ginagamit para sa bawat conversion papuntang rem — ito ang base ng buong pahina. Ang em context font size naman ang ginagamit lang para sa mga conversion papuntang em, dahil ang em ay laging nakasalalay sa font size ng partikular na elemento kung saan ito nilalagay, hindi sa root ng pahina. Halimbawa, kung ang isang partikular na text element sa iyong disenyo ay may font size na 20px, at itatakda mo ang em context font size sa 20px, makikita mong ang 5px na spacing ay katumbas ng 0.25em sa loob ng elementong iyon.
Dapat mas malaki sa 0 ang parehong field na ito para gumana ang conversion. Kung maglalagay ka ng hindi wastong halaga sa root font size, lalabas ang mensaheng "Ang root font size ay dapat na numero na mas malaki sa 0." Kung ang problema naman ay nasa em context font size, lalabas ang mensaheng "Ang em context font size ay dapat na numero na mas malaki sa 0." At kung ang hindi wastong halaga ay nasa "Mga Value" mismo, lalabas ang mensaheng "Maglagay ng numero para mai-convert."
Mga resulta at ang talahanayan ng karaniwang px sa rem
Bukod sa tatlong na-convert na halaga, may kasama ring talahanayan sa page na may label na "Karaniwang px → rem (16px base)". Ipinapakita nito ang ilang karaniwang halaga sa pixel kasama ang katumbas nitong rem, ipinapalagay na 16px ang root font size — kapaki-pakinabang na sanggunian kung gusto mo lang tingnan agad ang tipikal na conversion nang hindi na-i-type pa ang bawat halaga isa-isa.
Sino ang makikinabang sa converter na ito
Angkop ang tool na ito para sa sinumang kailangang i-convert ang fixed na pixel value papuntang relative na rem o em unit para sa responsive na disenyo. Angkop din ito para sa sinumang gustong maunawaan kung paano nakakaapekto ang iba't ibang root font size sa mga rem value, o kailangang kalkulahin ang em value batay sa font size ng isang partikular na elemento. At angkop din ito kung gusto mong tiyakin na maayos ang pag-scale ng laki ng mga elemento sa iyong disenyo kapag binago ng isang mambabasa ang kanilang default na font size.
Privacy ng iyong mga inilalagay
Tumatakbo ang bawat conversion sa loob ng iyong sariling browser. Ganito ito eksaktong sinasabi sa page: "Ang bawat conversion ay tumatakbo sa iyong browser. Walang anuman sa mga inilalagay mo ang ina-upload sa BroBroGo."
Mga madalas itanong
Ano ang pagkakaiba sa pagitan ng px, rem, at em? Ang px ay isang fixed length. Ang rem ay sinusukat laban sa root font size ng pahina, kaya sa 16px root, ang 1rem ay katumbas ng 16px. Ang em naman ay sinusukat laban sa laki ng font ng elementong kinalalagyan nito. Ang pagtatakda ng sukat ng uri at spacing sa rem ay nagbibigay-daan sa lahat na mag-scale kapag binago ng mambabasa ang kanilang default na laki ng font.
Bakit may hiwalay na em context size? Ang em ay nakabatay sa laki ng font ng sarili nitong elemento, na hindi palaging ang root. I-set ang em context sa laki ng font ng elementong iyon para mabasa nang tama ang em, at panatilihin itong katumbas ng root kapag magkatugma ang dalawa.
Paano kung ang root font size ko ay hindi 16px? Baguhin ang root font size field para tumugma sa iyong CSS at ang bawat rem value ay mag-a-update agad. Ang mabilis na talahanayan sa ibaba ay isang madaling gabay para sa karaniwang 16px root na pinagsisimulan ng karamihan sa mga site.