Badilisha px kuwa em Pixels ↔ Em Bure Mtandaoni Salama
Andika thamani katika px na uisome katika em 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 px kuwa em
| px | em |
|---|---|
| 8 | 0.5 |
| 10 | 0.625 |
| 12 | 0.75 |
| 14 | 0.875 |
| 16 | 1 |
| 18 | 1.125 |
| 20 | 1.25 |
| 24 | 1.5 |
| 32 | 2 |
| 48 | 3 |
| 64 | 4 |
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 px kuwa em
Em ndicho kitengo kongwe zaidi cha kiasi-linganishi katika CSS na kile kinachosababisha mabishano mengi zaidi. Una ukubwa kwa pikseli kutoka kwenye faili la usanifu, px 20 za nafasi ya ndani kwenye kitufe, px 14 za nafasi kando ya ikoni, px 36 kwa kichwa cha habari, na unataka kuupata kwa em, ili ufuate maandishi unayoyahusu. Unapobadilisha px kuwa em unauliza swali maalum: huu ni mara ngapi ya ukubwa wa sasa wa fonti? Jibu linategemea nambari ambayo ukurasa hauwezi kubashiri, ukubwa wa fonti unaotumika mahali thamani inapotumiwa, kwa hiyo kibadilishaji huiweka nambari hiyo kwenye sehemu ya kuingiza na kuitumia waziwazi.
Sababu ya kuandika ukubwa kwa em ni kwamba vitu vinavyohusu maandishi vinapaswa kukua pamoja na maandishi. Nafasi ya ndani ya kitufe inapaswa kuwa kubwa zaidi lebo ya kitufe inapokuwa kubwa zaidi. Pengo kati ya ikoni na maelezo yake linapaswa kupanuka maelezo yanapopanuka. Pambizo ya chini ya kichwa cha habari inapaswa kubaki sawia na kichwa. Katika hali hizi zote thamani ya pikseli huwa mbaya mara tu ukubwa wa fonti unapobadilika, na thamani ya em ni sahihi kwa ukubwa wowote. Hiyo ndiyo hoja nzima ya em, na ni hoja yenye nguvu.
Hesabu hufanyika kwenye kivinjari chako, na hakuna kinachopakiwa. Hapa chini utapata fomula, sababu ya em kuhitaji uangalifu zaidi kuliko rem, mtego wa kuweka ndani ambao hutoa ukubwa wa kushangaza, mahali ambapo em ni kitengo sahihi, na njia ya kuchagua kati ya em na rem katika mtindo halisi wa ukurasa.
Fomula na msingi
em ni sawa na px ikigawanywa kwa ukubwa wa fonti
Fomula ni mgawanyo mmoja: em = px ÷ msingi. Kwa msingi wa px 16, thamani ya px 24 huwa em 1.5, px 8 huwa em 0.5 na px 20 huwa em 1.25. Ukurasa unaonyesha msingi kando ya matokeo, kama katika 24 px = 1.5 em (16 px), ili uone kilichodhaniwa. Hesabu ni ile ile kama ya rem. Maana ni tofauti.
Msingi ni nini
Kwa rem, msingi ni ukubwa wa fonti wa kipengele cha mzizi. Kwa em, ni ukubwa wa fonti wa kipengele ambacho thamani inatumika kwacho, au, kwa sifa ya font-size yenyewe, wa mzazi. Ndiyo maana em haina jibu moja: thamani ile ile ya mtindo wa ukurasa humaanisha ukubwa tofauti wa pikseli mahali tofauti. Ikiwa unabadilisha nafasi ya ndani kwa kitufe chenye maandishi ya px 14, andika 14 kama msingi. Ikiwa unabadilisha pambizo kwa kichwa cha habari cha px 32, andika 32.
Chaguo-msingi usipojua
Ukitaka tu nambari ya makadirio, acha msingi kuwa 16, ukubwa wa maandishi ya kawaida kwenye kivinjari ambacho hakuna aliyekibadilisha. Matokeo ni sahihi kwa kizuizi cha maandishi ya kawaida ya mwili, na yanakupa hisia ya uwiano hata kama kipengele kitakuwa na ukubwa tofauti.
Kile ubadilishaji unachohifadhi na kisichoweza
Unahifadhi uwiano na maandishi
Matokeo ni uwiano kulinganisha na ukubwa wa fonti unaotumika mahali thamani inapotumiwa. Ikiandikwa kwa em, nafasi hukua na kupungua pamoja na maandishi yaliyo kando yake, na hivyo ndivyo nafasi kuzunguka maneno inavyopaswa kuwa.
Hauwezi kukupa nambari moja kwa ukurasa
Hili ndilo la kuwa mwangalifu nalo. Em inalinganishwa na ukubwa wa fonti wa kipengele chenyewe, au, kwa font-size, wa mzazi wake, si wa mzizi. Kwa hiyo hakuna jibu moja kwa ukurasa: em 1.5 ile ile ni px 24 ndani ya kipengele cha px 16 na px 36 ndani ya cha px 24, na em ndani ya em huzidishana. Nambari iliyo kwenye ukurasa ni sahihi kwa msingi ulio kwenye sehemu ya kuingiza na si kwa kingine chochote. Ukitaka nambari moja inayofaa kila mahali, ndiyo kazi ya rem. Ili kulinganisha, badilisha px kuwa rem na uone jinsi thamani ile ile ya pikseli inavyofanya kazi.
Kukadiria
Kugawanya kwa 16 kunatoa thamani safi kwa ukubwa mwingi na desimali zinazojirudia kwa mingine. Thamani kama em 0.8125 ni nzuri katika mtindo wa ukurasa, lakini unaweza kupendelea kukadiria hadi 0.8 au 0.85 ikiwa ukubwa kamili hauna umuhimu. Weka nambari kamili pale usahihi unapohesabika.
Mtego wa kuweka ndani
Jinsi em inavyokusanyika
Tuseme orodha ina font-size: 0.875em na vipengee vyake pia vina font-size: 0.875em. Orodha ni asilimia 87.5 ya mzazi wake. Kila kipengee ni asilimia 87.5 ya orodha, ambayo ni takriban asilimia 76.6 ya mzazi. Orodha iliyowekwa ndani ya kipengee hupungua tena, hadi takriban asilimia 67. Baada ya viwango vitatu maandishi ni madogo sana, na hakuna aliyeandika hivyo kwa makusudi. Hiki ndicho kinachomaanishwa kwa kusema kwamba em hukusanyika.
Kwa nini ni muhimu unapobadilisha px kuwa em
Ukibadilisha thamani ya pikseli kuwa em kwa font-size, msingi unaopaswa kutumia ni ukubwa wa fonti wa mzazi, si wa kipengele chenyewe. Makosa mengi hutokana na kutumia usio sahihi. Kwa sifa nyingine, kama nafasi ya ndani na pambizo, msingi ni ukubwa wa fonti wa kipengele chenyewe. Kanuni ni rahisi kusema na rahisi kusahau: font-size hutazama juu, kila kitu kingine hujitazama chenyewe.
Jinsi ya kuepuka mshangao
Tumia em kwa nafasi inayofuata maandishi, na rem kwa ukubwa wa fonti. Kwa njia hiyo ukubwa wa fonti haukusanyiki kamwe, kwa sababu unarejelea mzizi, na nafasi bado inafuata maandishi yake. Ni mchanganyiko ambao mitindo mingi ya kisasa ya kurasa huishia nao.
Ukubwa wa kawaida
Jedwali chini ya ukurasa
Chini ya kibadilishaji kuna jedwali la ukubwa wa kawaida kwa msingi uliouweka: px 8 ni em 0.5, px 10 ni 0.625, px 12 ni 0.75, px 14 ni 0.875, px 16 ni 1, px 18 ni 1.125, px 20 ni 1.25, px 24 ni 1.5, px 32 ni 2, px 48 ni 3 na px 64 ni 4. Kwa msingi wa 16, hizi ni nambari zile zile kama za rem, ndiyo maana watu huchanganya hivi viwili. Tofauti ni katika kile 16 inachowakilisha.
Kubadilisha msingi ulingane na kipengele
Ukiweka msingi kuwa 14 kwa kitufe kidogo, jedwali hubadilika: px 14 sasa ni em 1, px 7 ni em 0.5 na px 21 ni em 1.5. Jaribu, nawe utaona jinsi nafasi ya ndani ya em 1.5 ina ukubwa tofauti wa pikseli kwenye kitufe cha px 14 kuliko kwenye cha px 18, na kwa nini hilo lina manufaa.
Jinsi ya kubadilisha px kuwa em hapa
Andika thamani ya pikseli
Ingiza ukubwa kwa pikseli kwenye sehemu ya kwanza ya kuingiza. Desimali zinakubaliwa.
Weka ukubwa wa fonti ambao em inarejelea
Andika ukubwa wa fonti wa kipengele, au wa mzazi wake ukibadilisha font-size. Ikiwa huna uhakika, acha 16 na uchukulie matokeo kama makadirio.
Nakili thamani ya em
Tumia nambari kwenye CSS yako pamoja na kitengo chake, kama katika padding: 1.25em. Nambari isiyo na kitengo si halali kwa sifa nyingi.
Vitengo hivi vinatoka wapi
Em katika herufi za chuma
Em ni kongwe kuliko wavuti. Katika herufi za chuma ilikuwa upana wa kizuizi kilichoyeyushwa, ulioitwa kwa herufi kubwa M, na ilikuwa kitengo cha asili cha nafasi ya mlalo kwenye mstari uliochapishwa. Wachapaji bado huzungumzia mistari ya em na nafasi za em. Katika CSS wazo hilo linaendelea kwa umbo lililolegea zaidi: em moja ni ukubwa wa fonti ya sasa.
Pikseli na rem
Pikseli ya CSS ni urefu wa marejeo wa takriban 1/96 ya inchi unaoonekana kwa umbali mzuri wa kusoma, si nukta kwenye skrini yako. Rem iliongezwa ili kuwapa wasanidi kitengo kilicho linganishi lakini hakikusanyiki kamwe: ni em ya kipengele cha mzizi. Kwa pamoja, pikseli, em na rem hushughulikia mahitaji matatu: ukubwa usiobadilika, ukubwa unaolingana na maandishi, na ukubwa unaolingana na ukurasa.
Mahali em ni chaguo sahihi
Nafasi ya ndani ya vitufe na sehemu za fomu
Kitufe chenye padding: 0.5em 1em kinaonekana sawa kwa uwiano kwa ukubwa wowote wa maandishi. Kifanye lebo kuwa kubwa zaidi na kitufe kizima hukua pamoja nayo, ambacho ndicho unachotaka kutoka kwa kijenzi kinachoweza kutumika kwenye upau wa zana na kwenye bango kuu.
Nafasi kando ya ikoni
Ikoni inayofuatwa na maelezo inahitaji pengo linalopanuka pamoja na maelezo. Pambizo ya 0.4em hufanya hivyo; pambizo ya 6px haifanyi.
Pambizo kuzunguka vichwa vya habari na aya
Mdundo wa wima katika hati ni rahisi kuudumisha nafasi ya aya inapokuwa kwa em, kwa kuwa inafuata ukubwa wa aya. Pambizo ya kichwa cha habari kwa em hubaki sawia kichwa kinapobadilisha ukubwa katika vizingiti tofauti.
Media queries
Vizingiti vilivyoandikwa kwa em hujibu ukubwa wa maandishi wa msomaji, kwa hiyo mpangilio hubadilika kuwa umbo lake jembamba mapema kwa mtu aliyekuza maandishi yake. Katika media queries, em hurejelea chaguo-msingi la kivinjari na si kipengele chochote, kwa hiyo haikusanyiki.
Mitego unapobadilisha px kuwa em
Kutumia msingi usio sahihi
Kosa la kawaida zaidi. Kwa font-size, tumia ukubwa wa mzazi; kwa kila kitu kingine, wa kipengele chenyewe. Kagua unabadilisha sifa gani kabla ya kuandika msingi.
Kusahau kwamba mzazi pia anaweza kuwa kwa em
Ikiwa ukubwa wa fonti wa mzazi wenyewe uko kwa em, lazima ufuate mnyororo kuelekea juu ili kujua ukubwa halisi. Mtindo wa ukurasa unapokuwa mgumu, hamishia ukubwa wa fonti kwa rem na uweke em kwa nafasi.
Kutarajia nambari moja kwa kijenzi kizima
Kijenzi chenye maandishi ya ukubwa tofauti hakina thamani moja ya em kwa sehemu zake. Badilisha kila sehemu dhidi ya msingi wake yenyewe.
Kuchanganya em na rem kwa sifa ile ile
Nafasi ya ndani ya 1rem kando ya pambizo ya 1em ni halali na mara nyingi huleta mkanganyiko. Chagua kanuni, kama rem kwa ukubwa wa fonti na em kwa nafasi, na uifuate.
Maswali ambayo watu huuliza kabla ya kubadilisha
px 16 ni em ngapi?
Moja, ikiwa ukubwa wa fonti unaotumika ni px 16. Ikiwa ukubwa wa fonti wa kipengele ni px 20, basi px 16 ni em 0.8.
Je, em ni bora kuliko rem?
Hakuna iliyo bora. Rem ni bora kwa ukubwa wa fonti na mpangilio wa jumla. Em ni bora kwa nafasi inayopaswa kufuata maandishi yake yenyewe.
Kwa nini nafasi yangu ya ndani ni kubwa kuliko ilivyotarajiwa?
Kwa sababu inalinganishwa na ukubwa wa fonti wa kipengele, ambao unaweza kuwa mkubwa kuliko ulivyodhani. Kagua ukubwa wa fonti uliokokotolewa kwenye zana za wasanidi za kivinjari.
Naweza kutumia desimali?
Ndiyo. Thamani kama 0.625em na 1.333em ni za kawaida.
Je, nambari yangu inapakiwa?
Hapana. Hesabu hufanyika kwenye kivinjari chako na hakuna kinachotumwa popote.
Nitarudije nyuma?
Kwa em kuwa px, ambayo huzidisha badala ya kugawanya.
Kuchagua kwa busara unapobadilisha px kuwa em
Amua thamani inahusu nini
Ikiwa inahusu maandishi, em ni sahihi. Ikiwa inahusu ukurasa, kama upana wa safu wima au pengo kati ya sehemu, rem au kitengo cha kidirisha ni chaguo bora zaidi. Px kuwa vw inaeleza ukubwa kama sehemu ya upana wa skrini.
Andika nia kwenye maoni
Mstari kama padding: 0.75em 1.25em; /* 12px 20px at 16px */ hufanya hoja ionekane. Ukubwa wa fonti utakapobadilika baadaye, utajua nambari zilipaswa kuwa nini.
Weka ukubwa wa fonti wa kijenzi mahali pamoja
Weka ukubwa wa fonti kwenye kipengele cha mzizi cha kijenzi na uruhusu kila kitu ndani kirejelee. Kisha thamani za em ndani humaanisha kitu kile kile kila mahali katika kijenzi, na unaweza kubadilisha px kuwa em dhidi ya msingi mmoja.
Tabia nzuri unapobadilisha px kuwa em
Badilisha px kuwa em kijenzi kimoja kwa wakati
Usijaribu kubadilisha px kuwa em kwa mtindo mzima wa ukurasa kwa mkupuo mmoja. Chukua kijenzi kimoja, kama kadi au kitufe, amua ukubwa wake wa fonti, na ubadilishe kila thamani yake ya nafasi dhidi ya ukubwa huo. Kijenzi kinapokamilika, kijaribu kwa ukubwa wa maandishi miwili au mitatu. Kisha endelea na kinachofuata.
Tumia kikokotoo kwa thamani zisizo za kawaida, si za duara
Thamani kama pikseli 8, 16 na 24 hubadilika kuwa nambari safi za em kwa msingi wa 16. Thamani zisizo za kawaida kama 22 au 13 hutoa desimali ndefu. Unapobadilisha px kuwa em kwa hizi, amua kama usanifu unahitaji nambari kamili kweli au kama thamani ya em ya duara iliyo karibu zaidi ingefaa vilevile. Wabunifu mara nyingi hufurahia kukadiria, na mtindo nadhifu wa ukurasa ni rahisi kuudumisha.
Weka kumbukumbu ya msingi
Maoni mafupi kando ya kila thamani ya em, yakisema msingi ulikuwa nini, humsaidia mtu anayefuata. Mtu akibadilisha ukubwa wa fonti wa kijenzi baadaye, atajua kwamba nafasi inaufuata kwa muundo na si kwa bahati. Kuandika hilo mara moja kunastahili muda unaochukua.
Linganisha na sawa yake ya rem
Ikiwa huna uhakika kama em au rem inafaa thamani, badilisha px kuwa em na kuwa rem kisha jiulize kitatokea nini ukubwa wa maandishi unapobadilika. Ikiwa thamani inapaswa kufuata maandishi ya kipengele chenyewe, chukua em. Ikiwa inapaswa kufuata ukurasa, chukua rem.
Vibadilishaji vinavyohusiana
Familia ile ile ya zana inashughulikia ubadilishaji wa jirani. Ili kurudi kwenye pikseli, tumia em kuwa px. Kwa ukubwa linganishi na mzizi, kuna px kuwa rem na rem kuwa px, na kwa ukubwa linganishi na skrini, px kuwa vw na vw kuwa px. Kwa rangi za mtindo ule ule wa ukurasa, HEX kuwa RGB na HEX kuwa HSL hushughulikia nukuu.
Mfano uliohesabiwa
Tuseme lebo ya kitufe ni px 14 na usanifu unakipa kitufe px 10 za nafasi ya ndani wima na px 20 za nafasi ya ndani mlalo. Unaandika 14 kama msingi, 10 na kusoma em 0.714, unaandika 20 na kusoma em 1.429. Kwenye mtindo wa ukurasa unaandika padding: 0.714em 1.429em. Kitufe hicho hicho kinapotumika kwenye bango kuu lenye lebo ya px 18, nafasi ya ndani huwa px 12.9 na px 25.7, kwa uwiano. Ungeandika 10px na 20px, kitufe kingeonekana chembamba kuzunguka maandishi makubwa zaidi.
Orodha fupi ya ukaguzi
Kabla ya kubadilisha
Amua thamani inahusu sifa gani, na utafute ukubwa wa fonti inaopaswa kulinganishwa nao.
Wakati wa kubadilisha
Andika thamani ya pikseli na msingi sahihi, kisha unakili nambari ya em pamoja na kitengo chake.
Baada ya kubadilisha
Badilisha ukubwa wa fonti wa kijenzi kwenye kivinjari na ukague kwamba nafasi inafuata. Tafuta thamani za em zilizowekwa ndani zinazokusanyika.
Makosa ya kawaida
Kutumia ukubwa wa mzizi kama msingi wa nafasi ya ndani
Hiyo ni kazi ya rem. Em inarejelea ukubwa wa fonti wa kipengele chenyewe.
Kutumia em kwa kila ukubwa wa fonti
Ukubwa wa fonti wa em ulioweka ndani hukusanyika na kukushangaza. Tumia rem kwa ukubwa wa fonti.
Kukadiria hadi nambari nadhifu kwa macho lakini isiyo sahihi
1.43 si sawa na 1.5 inapozidishwa na fonti kubwa. Weka tarakimu za kutosha.
Nambari zako hubaki kwenye kifaa chako
Hesabu hufanyika ndani ya kifaa. 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 px kuwa em.
Muhtasari
Ili kubadilisha px kuwa em hapa, andika ukubwa kwa pikseli na ukubwa wa fonti unaolinganishwa nao, kisha usome matokeo mara moja, ukitumia fomula em = px ÷ msingi. Ubadilishaji huhifadhi uwiano kulinganisha na ukubwa wa fonti unaotumika mahali thamani inapotumiwa. Hauwezi kutoa jibu moja kwa ukurasa: em inalinganishwa na ukubwa wa fonti wa kipengele chenyewe, au wa mzazi kwa font-size, kwa hiyo em 1.5 ile ile ni px 24 ndani ya kipengele cha px 16 na px 36 ndani ya cha px 24, na em ndani ya em huzidishana. Kwa nambari moja inayofaa kila mahali, tumia rem. Hakuna kinachopakiwa.