Kigeuzi hiki kinafanya nini
Kigeuzi cha px hadi rem & em hubadilisha thamani za pikseli (px) kuwa rem na em, na kinyume chake. Unaweza kuingiza thamani katika kipimo chochote kati ya hivyo vitatu, na kifaa kinahesabu papo hapo na kuonyesha thamani zinazolingana katika vipimo vingine viwili. Pia unaweza kuweka saizi yako mwenyewe ya fonti ya msingi (root) na saizi ya fonti ya muktadha wa em, ili ubadilishaji uendane na muundo halisi wa mradi wako.
Sehemu za kuingiza thamani
Kifaa kina sehemu tatu za kuingiza:
- Saizi ya fonti ya msingi (px) — nambari inayowakilisha saizi ya fonti ya msingi ya ukurasa, kwa pikseli. Chaguo-msingi ni 16px, na lazima iwe nambari kubwa kuliko 0.
- saizi ya fonti ya muktadha wa em (px) — nambari inayowakilisha saizi ya fonti ya elementi husika, inayotumika kwa ubadilishaji wa em. Chaguo-msingi ni 16px, na lazima nayo iwe nambari kubwa kuliko 0.
- Thamani — nambari inayowakilisha urefu katika px, rem au em.
Unapofungua kifaa kwa mara ya kwanza, msingi na muktadha wote viko kwenye 16px, hivyo 16px ni sawa na 1rem na sawa na 1em.
Ubadilishaji wa moja kwa moja unapoandika
Ukihariri sehemu yoyote kati ya px, rem au em, sehemu nyingine mbili husasishwa unapoandika — hii ndiyo maana ya ujumbe unaoonekana kwenye kifaa: "Ingiza thamani ya px, rem au em — nyingine mbili zitasasishwa unapoandika." Baada ya kuingiza thamani sahihi, kifaa kinaonyesha "Imebadilishwa kwenye vipimo vyote vitatu."
Kifaa kinaruhusu thamani hasi za pikseli, kwa hivyo unaweza kuhesabu ubadilishaji wa margin hasi au nafasi hasi bila kizuizi. Ikiwa utaandika kitu ambacho si nambari kwenye sehemu ya Thamani, kifaa kinaonyesha "Ingiza nambari ili kubadilisha."
Saizi ya fonti ya msingi (root) na thamani za rem
Thamani ya rem inategemea moja kwa moja saizi ya fonti ya msingi uliyoweka. Kwa mfano, kwa msingi wa chaguo-msingi wa 16px, thamani ya 24px inakuwa 1.5rem (24 ÷ 16 = 1.5). Ukibadilisha sehemu ya "Saizi ya fonti ya msingi (px)" kuwa 20px, thamani hiyo hiyo ya 24px inakuwa 1.2rem (24 ÷ 20 = 1.2) — kwa sababu rem daima inapimwa dhidi ya msingi uliopo wakati huo.
Ukiingiza thamani isiyo sahihi kwenye sehemu hii — kwa mfano 0 au nambari hasi — kifaa kinaonyesha "Saizi ya fonti ya msingi (root) lazima iwe nambari kubwa kuliko 0."
Muktadha wa em na thamani za em
Tofauti na rem, thamani ya em hutegemea saizi ya fonti ya elementi yenyewe, si ile ya ukurasa mzima. Ndiyo maana kifaa kina sehemu tofauti ya "saizi ya fonti ya muktadha wa em (px)". Kwa mfano, ikiwa kipengele fulani kina saizi ya fonti ya 20px na umeweka hiyo kama muktadha, thamani ya 30px inayolingana nayo inakuwa 1.5em (30 ÷ 20 = 1.5).
Kama ilivyo kwa sehemu ya msingi, sehemu hii nayo lazima iwe nambari kubwa kuliko 0; vinginevyo kifaa kinaonyesha "Saizi ya fonti ya muktadha wa em lazima iwe nambari kubwa kuliko 0."
Jedwali la "Kawaida px → rem" na faragha ya data yako
Chini ya sehemu za kuingiza, kifaa kinaonyesha jedwali lenye kichwa "Kawaida px → rem (msingi wa 16px)", linaloonyesha thamani za kawaida za pikseli zikiwa zimebadilishwa kuwa rem, kwa kudhania msingi wa 16px. Kwa mfano, kwa msingi huo, 12px ni sawa na 0.75rem, 20px ni sawa na 1.25rem, na 32px ni sawa na 2rem — hesabu hizi zinabaki kama mwongozo wa haraka kwa msingi wa kawaida wa 16px, hata kama umebadilisha sehemu ya msingi kwa ubadilishaji wako binafsi hapo juu.
Kuhusu faragha: "Kila ubadilishaji unafanyika kwenye kivinjari chako. Hakuna unachoandika kinachopakiwa kwenye BroBroGo."
Kwa nani kifaa hiki ni muhimu
Kigeuzi hiki ni muhimu kwa yeyote anayehitaji kubadilisha thamani thabiti za pikseli kuwa vipimo vya rem au em vinavyobadilika kwa muundo unaojirekebisha (responsive design), kwa yeyote anayetaka kuelewa jinsi saizi tofauti za fonti ya msingi zinavyoathiri thamani za rem, kwa yeyote anayehitaji kuhesabu thamani za em kulingana na saizi ya fonti ya elementi mahususi, na kwa yeyote anayetaka kuhakikisha vipimo vyake vinabadilika ipasavyo msomaji anapobadilisha saizi chaguomsingi ya fonti yake.
Maswali Yanayoulizwa Mara kwa Mara
Kuna tofauti gani kati ya px, rem na em? px ni urefu thabiti. rem inapimwa kulingana na saizi ya fonti ya msingi (root) ya ukurasa, kwa hivyo kwenye msingi wa 16px, 1rem ni sawa na 16px. em inapimwa kulingana na saizi ya fonti ya elementi iliyopo. Kuweka saizi ya maandishi na nafasi katika rem kuruhusu kila kitu kubadilika msomaji anapobadilisha saizi chaguomsingi ya fonti yake.
Kwa nini kuna saizi tofauti ya muktadha wa em? em inategemea saizi ya fonti ya elementi yake yenyewe, ambayo si mara zote msingi (root). Weka muktadha wa em kwenye saizi ya fonti ya elementi hiyo ili kusoma em kwa usahihi, na uiweke sawa na msingi wakati zote mbili zinapolingana.
Je, ikiwa saizi yangu ya fonti ya msingi si 16px? Badilisha sehemu ya saizi ya fonti ya msingi (root) ili ilingane na CSS yako na kila thamani ya rem itasasishwa papo hapo. Jedwali la haraka hapa chini ni mwongozo rahisi kwa msingi wa kawaida wa 16px ambao tovuti nyingi huanzia.