Badilisha em kuwa px Em ↔ Pixels Bure Mtandaoni Salama
Andika thamani katika em na uisome katika px papo hapo. Hesabu hufanyika kwenye kivinjari chako, hakuna kinachotumwa popote, na kile ambacho ubadilishaji unategemea kimeandikwa hapa chini badala ya kudhaniwa.
Hakuna kinachopakiwa
Ukubwa wa kawaida — Badilisha em kuwa px
| em | px |
|---|---|
| 0.5 | 8 |
| 0.75 | 12 |
| 1 | 16 |
| 1.25 | 20 |
| 1.5 | 24 |
| 2 | 32 |
| 2.5 | 40 |
| 3 | 48 |
| 4 | 64 |
Vipimo hivi vinatoka wapi
Pikseli katika CSS si pikseli iliyo kwenye skrini yako. Skrini zilipoacha kuwa na msongamano unaotabirika, ukurasa uliopimwa kwa pikseli halisi ukawa ukurasa uliopungua ukubwa skrini zilipozidi kuwa kali, kwa hivyo pikseli ya CSS ilifafanuliwa upya kuwa urefu wa marejeleo: takriban 1/96 ya inchi inapotazamwa kwa umbali mzuri wa kusoma. Kila kitu kingine kwenye ukurasa huu kimejengwa juu ya hilo. Em ni ya zamani kuliko wavuti — katika herufi za chuma ilikuwa upana wa kipande kilichotupwa, ikipewa jina kutokana na herufi kubwa M — na katika CSS inamaanisha ukubwa wa fonti unaotumika, ndiyo maana hubadilika unapoweka vipengele ndani ya vingine. Rem iliongezwa ili kuepuka hasa hilo: ni em ya kipengele cha mzizi na haijikusanyi kamwe. Vw ilikuja na usanifu sikivu: sehemu ya mia moja ya upana wa kiona-mwanga, chochote kitakachokuwa.
Unavikuta wapi
Hivi ni vipimo vya kila stylesheet. Pikseli hupima mipaka, vivuli na kila kitu kisichopaswa kubadilika ukubwa; rem hupima maandishi, nafasi na mpangilio, ili badiliko moja kwenye mzizi libadilishe kiolesura kizima; em hupima vitu vinavyopaswa kufuata maandishi yake yenyewe, kama nafasi ya ndani ya kitufe; vw hupima vichwa vya habari na sehemu kuu zinazopaswa kujaza skrini kwenye kifaa chochote. Kubadilisha kati yake ni hesabu ya kila siku ya kugeuza usanifu uliokabidhiwa kwa pikseli kuwa stylesheet inayoweza kubadilika ukubwa.
Maswali ambayo watu huuliza
Kwa nini px 16 ndiyo mahali pa kawaida pa kuanzia?
Kwa sababu huo ndio ukubwa chaguomsingi wa maandishi katika kila kivinjari kikuu, na stylesheet isiyoubadilisha huurithi. Kwa hivyo rem moja ni sawa na px 16 kwenye mpangilio chaguomsingi, ndiko zinakotoka ubadilishaji unaojulikana: rem 0.5 ni px 8, rem 1.5 ni px 24. Mtumiaji akiwa ameongeza ukubwa chaguomsingi katika mipangilio ya kivinjari chake, thamani hizohizo za rem hukua pamoja nao — ambalo ndilo lengo hasa la kuzitumia.
Nitumie rem au em?
Rem kwa chochote kinachopaswa kufuata ukurasa mzima — mizani ya maandishi, nafasi, upana wa mpangilio — kwa sababu inapimwa kutoka mzizi na haijikusanyi kamwe. Em kwa chochote kinachopaswa kufuata maandishi ambamo kimekaa: nafasi ya ndani ya kitufe, pengo kando ya ikoni, uingizaji wa nukuu. Kosa la kawaida ni kuweka vipengele vyenye ukubwa wa em ndani ya vingine, ambapo em 1.2 ndani ya em 1.2 huwa 1.44, kisha 1.73, hadi maandishi ya chini ya ukurasa yanakuwa mara mbili ya ukubwa uliokusudiwa.
Je, jibu ni sahihi kabisa?
Pale ambapo vipimo vyote viwili vimefafanuliwa kwa kutumia kimoja kingine kwa nambari kamili, ndiyo — ukurasa unasema hivyo juu ya nambari, na ukadiriaji pekee ni katika idadi ya tarakimu zinazoonyeshwa. Pale ambapo uwiano hauna desimali yenye mwisho, ukurasa unaonyesha tarakimu kumi na mbili muhimu na kusema kwamba uhusiano ni wa kukadiria, badala ya kujifanya vinginevyo.
Je, kitu ninachoandika kinatoka kwenye kifaa changu?
Hapana. Hesabu hufanyika kwenye kivinjari chako; hakuna kinachopakiwa na hakuna seva ya kukipokea. Pakia ukurasa mara moja na utaendelea kufanya kazi hata mtandao ukizimwa.
Kwa nini ubadilishe em kuwa px
Stylesheet inasema margin-bottom: 0.75em kwenye kichwa cha habari, na padding: 0.4em 0.9em kwenye kitufe, na line-height ya 1.3em kwenye kizuizi cha maandishi. Hizi ni thamani nzuri na zinazobadilika, lakini karibu haiwezekani kuzifikiria kwa picha. Pambizo hilo ni pikseli ngapi? Je, padding ya kitufe inalingana na 6 px na 14 px zilizo kwenye faili ya usanifu? Ili kujua unabadilisha em kuwa px: unazidisha kwa ukubwa wa fonti ambao em inarejelea, kisha unasoma jibu katika kitengo kinachotumiwa na zana za usanifu. Ni swali wanalouliza wasanidi programu wanapokagua msimbo, wanapolinganisha toleo la kazi na mchoro wa awali, wanapotatua tatizo la nafasi, au wanapomkabidhi mtu anayefikiria kwa pikseli kijenzi kilichokamilika.
Em ndicho kitengo kigumu zaidi katika CSS kubadilisha, kwa sababu hakina thamani isiyobadilika. Em ni ukubwa wa fonti unaotumika mahali thamani inapotumiwa, au, kwa sifa ya font-size yenyewe, ule wa mzazi. Kwa hiyo 1.5 em inaweza kuwa 24 px mahali pamoja na 36 px mahali pengine, katika stylesheet ileile, kutoka kwa kanuni ileile. Kwa hiyo kigeuzi hakikisii. Kinaomba ukubwa wa fonti ambao em inarejelea, kinauonyesha kando ya jibu na kukokotoa kwa kuutumia. Ikiwa huujui ukubwa huo, sehemu zilizo hapa chini zinaeleza jinsi ya kuupata kwenye kivinjari chako.
Hesabu hufanyika ndani ya kivinjari chako na hakuna kinachopakiwa. Hapa chini utapata fomula, jinsi ya kupata msingi sahihi, kile ubadilishaji unachokibakiza na kisichoweza kukibakiza, jinsi thamani za em zilizoko ndani ya nyingine zinavyozidishana, wakati wasanidi programu wanapohitaji kubadilisha em kuwa px, na tabia chache zinazofanya stylesheet inayotumia em ieleweke.
Fomula na msingi
px ni sawa na em mara ukubwa wa fonti
Fomula ni kuzidisha mara moja: px = em × base. Kwa msingi wa 16 px, 1.5 em inakuwa 24 px, 0.75 em inakuwa 12 px na 2 em inakuwa 32 px. Ukurasa huchapisha msingi kando ya matokeo, kwa hiyo mstari kama 1.5 em = 24 px (16 px) unasema hasa ni nini kilichodhaniwa. Ikiwa ukubwa wa fonti wa kipengele ni 20 px, andika 20, na 1.5 em inakuwa 30 px.
Kupata msingi kwenye kivinjari chako
Fungua zana za msanidi programu, chagua kipengele na uangalie ukubwa wake wa fonti uliokokotolewa. Hiyo ndiyo namba ya kuandika kwenye sehemu ya msingi kwa sifa yoyote isipokuwa font-size. Kwa font-size yenyewe, chagua mzazi na usome ukubwa wake uliokokotolewa badala yake. Inachukua sekunde chache na huondoa kubahatisha kabisa.
Usipoweza kuuona ukurasa
Ikiwa unasoma msimbo bila ukurasa, fuata mnyororo wa ukubwa wa fonti kuelekea juu kutoka kwenye kipengele: font-size yake yenyewe ikiwa ipo, vinginevyo ya mzazi wake, na kadhalika hadi mzizi, ambao ni 16 px isipokuwa stylesheet au msomaji ameubadilisha. Pale ukubwa unapotolewa kwa em, zidisha kando ya mnyororo. Hii inachosha, ndiyo maana timu nyingi huchagua rem kwa ukubwa wa fonti.
Kile ubadilishaji unachokibakiza na kisichoweza
Unabakiza uwiano na maandishi
Matokeo ni ukubwa wa pikseli ambao em inawakilisha kwa msingi uliouandika. Ikiandikwa kwa em, nafasi au ukubwa hufuata maandishi inayoyahusu, na ubadilishaji unaonyesha kinachotokana na hilo kwa ukubwa mmoja maalum wa maandishi.
Hauwezi kukupa jibu moja kwa ukurasa mzima
Hili ndilo la kuwa mwangalifu nalo: em inahusiana na ukubwa wa fonti wa kipengele chenyewe, au, kwa font-size, wa mzazi wake, si wa mzizi. Kwa hiyo 1.5 em ileile ni 24 px ndani ya kipengele cha 16 px na 36 px ndani ya cha 24 px, na em ndani ya em huzidishana. Namba iliyo kwenye ukurasa ni sahihi kwa msingi ulio kwenye sehemu ya kuingiza na si kwa kingine chochote. Ikiwa unataka namba moja inayodumu kila mahali, rem ipo kwa ajili hiyo. Ili kulinganisha hizo mbili, badilisha rem kuwa px uone jinsi kitengo kinachohusiana na mzizi kinavyobaki thabiti.
Kukadiria
Kuzidisha kwa msingi wa namba kamili hutoa matokeo sahihi kwa thamani nyingi. Msingi ukiwa desimali, kwa mfano 13.5 px, thamani kama 1.2 em hutoa 16.2 px. Vivinjari hushughulikia pikseli za sehemu, lakini unapohitaji pikseli kamili, kwa mpaka mwembamba sana au ikoni kwenye gridi, kadiria kwa makusudi na uangalie inavyoonekana.
Jinsi thamani za em zilizo ndani ya nyingine zinavyozidishana
Orodha ndani ya orodha
Chukua ukurasa ambao maandishi yake ya mwili ni 16 px. Orodha ina font-size: 0.875em, ambayo ni 14 px. Vipengee vilivyo ndani yake pia vina font-size: 0.875em, ambayo ni 14 × 0.875 = 12.25 px. Orodha ndani ya kipengee hurudia tena: 10.7 px. Ngazi tatu chini na maandishi ni madogo mno, na hakuna aliyeamua yawe hivyo. Unapobadilisha em kuwa px kwa kijenzi na jibu linaonekana dogo mno, kuweka vitu ndani ya vingine ndiko kwanza kukaguliwa.
Kupanda juu ya mnyororo
Ili kujua ukubwa halisi wa pikseli wa em zilizo ndani ya nyingine, zidisha msingi kwa kila thamani njiani kuelekea chini: 16 × 0.875 × 0.875 = 12.25. Kigeuzi hufanya hatua moja kwa wakati. Kwa mnyororo, badilisha thamani ya kwanza, tumia jibu kama msingi wa ya pili na uendelee. Ni hesabu ileile inayofanywa na kivinjari.
Jinsi ya kuzuia kuongezeka kwa mfululizo
Tumia rem kwa ukubwa wa fonti, ili kila ukubwa urejelee mzizi, na uweke em kwa nafasi, ili padding na pambizo zifuate maandishi ya kipengele chake chenyewe. Katika mchanganyiko huo, hakuna kinachoongezeka kwa mfululizo, na thamani za em unazobadilisha huwa zinahusiana na ukubwa wa fonti unaoweza kuusoma mara moja.
Thamani za kawaida
Jedwali chini ya ukurasa
Ukurasa una jedwali la thamani za pikseli zinazolingana na namba za kawaida za em kwa msingi uliouweka: 0.5 em ni 8 px, 0.625 ni 10, 0.75 ni 12, 0.875 ni 14, 1 ni 16, 1.125 ni 18, 1.25 ni 20, 1.5 ni 24, 2 ni 32, 3 ni 48 na 4 ni 64. Kwa msingi chaguomsingi hizi ni namba zilezile kama za rem. Badilisha msingi na jedwali hubadilika pamoja nao, njia nzuri ya kuona em hufanya nini hasa.
Jaribu misingi miwili kando kwa kando
Andika 1.5 kwa msingi wa 14, kisha kwa msingi wa 20. Unapata pikseli 21 na 30. Hiyo ndiyo tofauti nzima kati ya em na rem katika jaribio moja: namba ileile, vipengele viwili, ukubwa mbili.
Jinsi ya kubadilisha em kuwa px hapa
Andika thamani ya em
Ingiza ukubwa kwa em kwenye sehemu ya kwanza. Desimali zinakubaliwa, kwa hiyo 0.714 hufanya kazi kama 1.
Weka ukubwa wa fonti ambao em inarejelea
Andika ukubwa wa fonti wa kipengele, au wa mzazi wake ikiwa sifa ni font-size. Ikiwa huna uhakika, acha 16 na uchukulie matokeo kama makadirio.
Soma thamani ya pikseli
Jibu linaonekana mara moja, na msingi ukionyeshwa kando yake. Linakili kwenye maelezo yako au lilinganishe na faili ya usanifu.
Vitengo hivi vinatoka wapi
Em
Em ni ya zamani kuliko wavuti. Katika herufi za chuma ilikuwa upana wa kizuizi kilichotengenezwa kwa ukungu, ikipewa jina la herufi kubwa M, na wapiga chapa bado huzungumzia dashi za em na nafasi za em. Katika CSS inamaanisha ukubwa wa fonti unaotumika, ndiyo maana hubadilika unapoweka vipengele ndani ya vingine.
Pikseli na rem
Skrini zilipoacha kuwa na msongamano unaotabirika, ukurasa uliopimwa kwa pikseli halisi ukawa ukurasa uliopungua ukubwa skrini zilipozidi kuwa kali. Kwa hiyo pikseli ya CSS ilifafanuliwa upya kama urefu wa rejeleo: takriban 1/96 ya inchi inayoonekana kwa umbali mzuri wa kusoma. Rem iliongezwa ili kuepuka kuongezeka kwa mfululizo kwa em: ni em ya kipengele cha mzizi na haizidishani kamwe. Ikiwa unafanya kazi na vyote viwili, badilisha px kuwa em ili kwenda upande mwingine.
Wakati wasanidi programu wanapobadilisha em kuwa px
Kulinganisha toleo la kazi na faili ya usanifu
Mbunifu anakabidhi faili kwa pikseli, na msimbo uko kwa em. Ili kukagua kama ukurasa unalingana, unabadilisha em kuwa px ukitumia ukubwa wa fonti wa kila kijenzi. Kitufe chenye lebo ya 14 px na padding ya 0.714em 1.429em kinapaswa kutoka kwa 10 px na 20 px, na kama usanifu unasema 12 na 24, mojawapo ina makosa.
Kutatua matatizo ya nafasi
Pengo linapoonekana kubwa mno au dogo mno, sababu mara nyingi ni thamani ya em inayorejelea fonti kubwa au ndogo kuliko ulivyotarajia. Kuibadilisha kwa ukubwa wa fonti uliokokotolewa wa kipengele kunakuambia mara moja kama hesabu ndiyo tatizo.
Kusoma msimbo usiofahamika
Stylesheet zilizorithiwa zimejaa thamani za em ambazo lazima ujenge upya ukubwa wake wa pikseli. Kubadilisha chache kati ya kuu, kwa misingi sahihi, kunakupa ramani ya usanifu.
Kuandika nyaraka na majaribio
Watu wanaojaribu ukurasa hueleza wanachokiona kwa pikseli. Msanidi programu anayesema padding ni 0.9em hamaanishi mengi kwa mjaribu; 12.6 px inamaanisha kitu. Kubadilisha huwafanya pande zote mbili zielewane.
Mitego unapobadilisha em kuwa px
Kutumia msingi usio sahihi
Kosa la kawaida zaidi. Kwa font-size, tumia ukubwa wa mzazi; kwa sifa zingine zote, ule wa kipengele chenyewe. Angalia sifa kabla ya kuandika msingi.
Kusahau mzazi aliye kwenye em
Ikiwa ukubwa wa mzazi wenyewe uko kwa em, lazima ufuate mnyororo. Tumia thamani iliyokokotolewa kutoka kwenye zana za msanidi programu kufupisha.
Kudhani skrini inaonyesha pikseli zilezile
Pikseli ya CSS si pikseli ya kifaa. Kwenye skrini yenye msongamano mkubwa pikseli moja ya CSS inaweza kuwa pikseli mbili au tatu za kifaa. Ubadilishaji hutoa pikseli za CSS, kitengo kinachoshirikiwa na zana za usanifu na stylesheet.
Kuchukulia jibu kama ahadi
Msomaji akikuza maandishi au kijenzi kikitumiwa tena kwa ukubwa mwingine wa fonti, pikseli hubadilika, kama inavyokusudiwa. Namba iliyobadilishwa inaeleza hali moja, si zote.
Maswali ambayo watu huuliza kabla ya kubadilisha
1 em ni pikseli ngapi?
Kadiri ya ukubwa wa fonti unaotumika: 16 px kwa maandishi ya kawaida ya mwili kwa chaguomsingi, 24 px ndani ya kipengele cha 24 px.
2 em ni pikseli ngapi?
Mara mbili ya ukubwa wa fonti unaotumika. Kwa 16 px hiyo ni 32 px.
Kwa nini kivinjari changu kinaonyesha kitu tofauti?
Ukubwa halisi wa fonti wa kipengele ni tofauti na msingi uliouandika. Soma ukubwa wa fonti uliokokotolewa kwenye zana za msanidi programu.
Je, em ni sawa na rem?
Hapana. Em inahusiana na kipengele, rem na mzizi.
Je, namba yangu inapakiwa?
Hapana. Hesabu hufanyika ndani ya kivinjari chako na hakuna kinachotumwa popote.
Ninarudije nyuma?
Kwa px kuwa em, ambayo hugawanya badala ya kuzidisha.
Tabia zinazofanya stylesheet ya em ieleweke
Andika maoni kuhusu msingi
Mstari kama padding: 0.75em 1.25em; /* 12px 20px at 16px */ unagharimu herufi chache na kumwokoa msomaji anayefuata ubadilishaji. Unarekodi msingi uliodhania.
Weka ukubwa wa fonti mara moja kwa kila kijenzi
Fafanua ukubwa wa fonti wa kijenzi kwenye kipengele chake cha mzizi, na uurejelee kwa em ndani. Msingi basi ni uleule kwa kila thamani ndani ya kijenzi, na unaweza kubadilisha em kuwa px dhidi yake kwa uhakika.
Weka em kwa nafasi, rem kwa maandishi
Ni mgawanyo ambao stylesheet nyingi huchagua, na huweka hesabu rahisi. Kwa ukubwa unaohusiana na skrini, px kuwa vw na vw kuwa px ni zana za kutumia.
Jaribu kwa ukubwa tofauti wa maandishi
Ongeza ukubwa chaguomsingi wa maandishi kwenye kivinjari chako na uangalie ukurasa. Nafasi ikifuata maandishi, thamani za em zinafanya kazi. Isipofuata, kuna kitu kilichobaki kwenye pikseli.
Njia ya hali ngumu
Fanya kazi kutoka nje kwenda ndani
Kijenzi kikiwa ndani kabisa ya vingine na thamani zake za em zinaonekana kuchanganya, anza na kipengele cha nje kabisa ambacho unajua ukubwa wake na ufanye kazi kuelekea ndani, ukibadilisha ngazi moja kwa wakati. Andika kila ukubwa wa pikseli kwenye maelezo unapoendelea. Baada ya ngazi mbili au tatu mnyororo mzima uko kwenye karatasi, na unaweza kuona hasa namba ya kushangaza inatoka wapi. Inachukua dakika moja na inachukua nafasi ya saa moja ya kubahatisha.
Amua kama utarahisisha
Ikiwa unapaswa kubadilisha em kuwa px kupitia ngazi nne ili kuelewa mpangilio, stylesheet inakuambia kitu. Fikiria kuhamisha ukubwa wa fonti hadi rem, ili kila mmoja urejelee mzizi, na kuacha nafasi tu kwenye em. Ukurasa utaonekana vilevile na utakuwa rahisi zaidi kusoma mwaka ujao.
Vigeuzi vinavyohusiana
Familia ileile ya zana inashughulikia ubadilishaji wa jirani. Ili kurudi kwenye em, tumia px kuwa em. Kwa ukubwa unaohusiana na mzizi, kuna px kuwa rem na rem kuwa px, na kwa ukubwa unaohusiana na skrini, px kuwa vw na vw kuwa px. Kwa rangi za stylesheet ileile, HEX kuwa RGB na RGB kuwa HEX hushughulikia nukuu hizo.
Mfano uliofanyiwa kazi
Tuseme unakagua kijenzi cha kitufe. Lebo ni 14 px, CSS inasema padding: 0.714em 1.429em na pengo la 0.5em kati ya ikoni na lebo. Unaandika 14 kama msingi, kisha 0.714 na kusoma 10 px, 1.429 na kusoma 20 px, 0.5 na kusoma 7 px. Faili ya usanifu inasema 10, 20 na 8. Mbili kati ya tatu zinalingana, kwa hiyo unaangalia pengo: 8 px kwa msingi wa 14 ingekuwa 0.571 em, na mtu alilikadiria kuwa 0.5. Unalitaja kwenye ukaguzi, na marekebisho ni namba moja.
Orodha fupi ya ukaguzi
Kabla ya kubadilisha
Tafuta ukubwa wa fonti ambao em inarejelea, kutoka kwenye zana za msanidi programu au kutoka kwenye mnyororo wa ukubwa wa fonti katika msimbo.
Wakati wa kubadilisha
Andika thamani ya em, weka msingi na usome pikseli, ukizingatia msingi ulioonyeshwa kando ya matokeo.
Baada ya kubadilisha
Linganisha na faili ya usanifu. Namba zikitofautiana, kagua msingi kabla ya kushuku msimbo.
Makosa ya kawaida
Kutumia 16 bila kukagua
Ni sahihi tu pale ukubwa wa fonti wa kipengele ni 16 px.
Kuchanganya em na rem
Zinafanana kwa sura na zinatenda tofauti. Tumia ukurasa sahihi kwa kila moja.
Kusahau kwamba em huongezeka kwa mfululizo
Thamani iliyo ndani ya kipengele kilichowekwa ndani ya kingine inahusiana na ukubwa ambao huenda hukuuona. Fuata mnyororo.
Namba zako hubaki kwenye kifaa chako
Hesabu hufanyika kwenye kifaa chako. Thamani zako hutumiwa na kivinjari chako mwenyewe na hakuna kinachotumwa popote. Hakuna cha kufuta baadaye na hakuna akaunti ya kuunda. Hiyo ndiyo njia rahisi ya kubadilisha em kuwa px.
Muhtasari
Ili kubadilisha em kuwa px hapa, andika ukubwa kwa em na ukubwa wa fonti inaorejelea, kisha usome matokeo kwa pikseli mara moja, ukitumia fomula px = em × base. Ubadilishaji unabakiza uwiano unaohusiana na ukubwa wa fonti unaotumika mahali thamani inapotumiwa. Hauwezi kutoa jibu moja kwa ukurasa: em inahusiana na kipengele chenyewe, au na mzazi kwa font-size, kwa hiyo 1.5 em ileile ni 24 px ndani ya kipengele cha 16 px na 36 px ndani ya cha 24 px, na em ndani ya em huzidishana. Kwa namba moja inayodumu kila mahali, tumia rem. Hakuna kinachopakiwa.