Badilisha rem kuwa px Root em ↔ Pixels Bure Mtandaoni Salama
Andika thamani katika rem 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 rem kuwa px
| rem | 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 unahitaji kubadilisha rem kuwa px
Unafungua mitindo ya CSS na kuona padding: 2.25rem kwenye kadi na font-size: 0.8125rem kwenye maelezo ya picha. Ni thamani nzuri, zilizoandikwa jinsi CSS ya kisasa inavyopaswa kuandikwa, lakini hazikuambii chochote kwa mtazamo wa haraka. Nafasi hiyo ya ndani ya kadi ni kubwa kiasi gani kwenye skrini? Je, maelezo ya picha yatasomeka? Je, inalingana na 36 px na 13 px kwenye faili ya usanifu uliyokabidhiwa? Kujibu, unabadilisha rem kuwa px: unazidisha kwa ukubwa wa herufi wa mzizi na kusoma jibu katika kitengo ambacho zana za usanifu hutumia. Ni kinyume cha mwelekeo wa kawaida, na ndicho unachofanya unaposoma msimbo, unapolinganisha mchoro wa awali na ukurasa uliojengwa, au unapomweleza mtu anayefikiri kwa pikseli mpangilio fulani.
Ubadilishaji ni rahisi; kinachofanya ustahili ukurasa mzima ni msingi. Rem si ukubwa, ni kigawe cha ukubwa, yaani ukubwa wa herufi wa kipengele cha mzizi. Katika kivinjari ambacho hakuna aliyekielekeza vinginevyo ukubwa huo ni 16 px, kwa hiyo 1 rem ni 16 px, 2.25 rem ni 36 px na 0.8125 rem ni 13 px. Lakini mzizi unaweza kubadilishwa na mitindo ya CSS, na msomaji anaweza kuubadilisha katika kivinjari, na kisha kila thamani ya rem katika ukurasa husogea nao. Ukurasa kwa hiyo huomba msingi na kuutumia, badala ya kuuficha.
Hesabu hufanyika ndani ya kivinjari chako, na hakuna kinachopakiwa. Hapa chini utapata fomula, jedwali la thamani za kawaida, kile ubadilishaji unachohifadhi na kisichoweza kuhifadhi, hali ambazo wasanidi huhitaji kubadilisha rem kuwa px, na mazoea machache yanayofanya mitindo ya CSS inayotumia rem iwe rahisi kusoma.
Fomula na msingi
px ni rem mara msingi
Fomula ni kuzidisha mara moja: px = rem × msingi. Kwa msingi wa kawaida wa 16 px, 1.5 rem huwa 24 px, 0.75 rem huwa 12 px na 4 rem huwa 64 px. Ukurasa huchapisha msingi kando ya matokeo, kwa hiyo mstari kama 1.5 rem = 24 px (16 px) husema kile kilichodhaniwa nawe unaweza kuona mara moja kama kinalingana na mradi wako.
Kujua msingi wako
Tafuta katika mitindo ya CSS kanuni kwenye html au :root inayoweka font-size. Kama hakuna, msingi ni chaguomsingi la kivinjari la 16 px. Kama ipo, kama 62.5%, chukua asilimia hiyo ya 16: 62.5% hutoa 10 px. Katika zana za msanidi za kivinjari unaweza pia kuchagua kipengele cha mzizi na kusoma ukubwa wake wa herufi uliokokotolewa, ambayo ndiyo namba ya kuandika kwenye sehemu ya msingi.
Wakati ukubwa wa mzizi unanyumbulika
Baadhi ya tovuti hufanya ukubwa wa mzizi ukue na dirisha, kwa kutumia usemi wa clamp. Hapo 1 rem haina thamani moja ya pikseli hata kidogo: ni 15 px kwenye simu na 18 px kwenye kifuatiliaji kipana. Katika hali hiyo kila ubadilishaji ni picha ya wakati mmoja. Andika msingi unaouona kwa upana unaokuhusu, na uelewe kwamba jibu ni halali kwa upana huo tu.
Kile ubadilishaji unachohifadhi na kile usichoweza
Huhifadhi uwiano
Rem moja ni chochote ukubwa wa herufi wa mzizi ulivyo, kwa hiyo mpangilio ulioandikwa kwa rem hudumisha umbo lake ukubwa huo unapobadilika. Unapobadilisha rem kuwa px, thamani ya pikseli ni uwiano huohuo uliofanywa halisi kwa msingi mmoja maalumu. Uwiano kati ya ukubwa mbili, kwa mfano kichwa cha 2 rem juu ya maandishi ya kawaida ya 1 rem, haubadiliki kwa namna yoyote unavyobadilisha, na uwiano huo ndio kitu ambacho mpangilio mzuri hukitegemea.
Haiwezi kujua mipangilio ya msomaji wako
Namba hutegemea kabisa msingi. Kama msomaji ameongeza ukubwa wa chaguomsingi wa maandishi katika kivinjari chake, jambo ambalo watu wengi hufanya na wana haki ya kufanya, basi 1 rem si 16 px kwao, na namba unayoiona ni sahihi tu kwa msingi ulio kwenye sehemu hiyo. Chukulia thamani ya pikseli kama njia ya kuelewa usanifu, si ahadi ya kile kila mgeni ataona.
Kuzungusha namba
Kwa kuwa msingi kwa kawaida ni namba nzima, matokeo ya kuzidisha kwa kawaida ni kamili. 0.8125 rem ni hasa 13 px kwa msingi wa 16; 0.6875 rem ni hasa 11 px. Ukipata desimali ndefu, ni dalili kwamba thamani ya rem ilikokotolewa kutoka msingi tofauti na ule uliouandika.
Thamani za kawaida
Jedwali lililo chini ya ukurasa
Ukurasa una jedwali la thamani za pikseli zinazolingana na namba za kawaida za rem kwa msingi uliouweka: 0.5 rem 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. Hizi ndizo thamani zinazojitokeza mara nyingi zaidi katika viwango vya nafasi na herufi, na kuzijua kwa moyo hufanya mitindo ya CSS isomeke kwa mtazamo wa haraka.
Kusoma mitindo ya CSS kwa pikseli
Zoezi muhimu ni kuchukua mitindo ya CSS ambayo hukuiandika na kutafsiri thamani zake kuu kuwa pikseli mara moja, ukiandika matokeo kwenye dokezo. Ukubwa wa maandishi ya kawaida wa 1 rem, vichwa vya 1.5 na 2.25 rem, pengo la kontena la 2 rem: kwa pikseli, 16, 24, 36 na 32. Ukiviona hivi, mantiki ya usanifu hujitokeza, na unaweza kuvilinganisha na faili ya usanifu bila kikokotoo.
Jinsi ya kubadilisha rem kuwa px hapa
Andika thamani ya rem
Weka ukubwa kwa rem kwenye sehemu ya kwanza. Desimali zinakubaliwa, kwa hiyo 0.8125 inafanya kazi kama 1.
Weka msingi
Uache kwenye 16 kama CSS yako haibadilishi ukubwa wa mzizi. Ubadilishe kama inaubadilisha. Matokeo husasishwa unapoandika.
Soma thamani ya pikseli
Jibu huonekana mara moja, likiwa na msingi ulioonyeshwa kando yake, ili ujue kilichodhaniwa. Linakili kwenye madokezo yako au ulilinganishe na faili ya usanifu.
Vitengo hivi vinatoka wapi
Pikseli ya CSS
Maonyesho yalipoacha kuwa na msongamano unaotabirika, ukurasa uliopimwa kwa pikseli halisi ukawa ukurasa unaopungua skrini zilipozidi kuwa kali. Kwa hiyo pikseli ya CSS ilifafanuliwa upya kuwa urefu wa marejeo: takriban 1/96 ya inchi inapotazamwa kwa umbali mzuri wa kusoma. Pikseli katika mitindo ya CSS kwa hiyo si nukta kwenye skrini yako bali ni kitengo cha urefu ambacho kivinjari huoanisha na nukta nyingi kadiri skrini inavyohitaji.
Rem
Em ni ya zamani kuliko wavuti: katika chapa ya chuma ilikuwa upana wa kipande kilichoyeyushwa, kilichopewa jina la herufi kubwa M, na katika CSS inamaanisha ukubwa wa herufi unaotumika, ndiyo maana hubadilika vipengele vinapoingiliana ndani ya vingine. Rem iliongezwa kuepuka hasa hilo: ni em ya kipengele cha mzizi na haizidishani kamwe. Ili kuona tofauti kwa namba, badilisha px kuwa em na ulinganishe na unachopata unapobadilisha rem kuwa px.
Wakati wasanidi hubadilisha rem kuwa px
Kukagua ukurasa uliojengwa dhidi ya faili ya usanifu
Mbunifu hukabidhi faili kwa pikseli; msanidi aliandika msimbo kwa rem. Ili kukagua kama ukurasa unalingana, hubadilisha rem kuwa px na kulinganisha namba. Tofauti hujitokeza mara moja: 1.375 rem ni 22 px, na kama usanifu unasema 24, mojawapo si sahihi.
Kusoma msimbo usioufahamu
Unaporithi mitindo ya CSS, thamani za rem huficha ukubwa halisi. Kubadilisha wachache wa muhimu kunakupa ramani ya usanifu: herufi ni kubwa kiasi gani, nafasi kati ya safu ni pana kiasi gani, vizingiti viko wapi.
Kuandika ripoti za hitilafu na nyaraka
Watu wanaojaribu ukurasa hueleza wanachokiona kwa pikseli. Msanidi anayesema nafasi ya ndani ni 2.5 rem anamaanisha kidogo kwa mjaribu; 40 px inamaanisha kitu. Kubadilisha huwafanya pande mbili waelewane.
Kuweka thamani zinazopaswa kuwa kamili kwa pikseli
Vitu fulani lazima viwe idadi kamili ya pikseli za kifaa la sivyo vionekane hafifu: mpaka wa pikseli moja, aikoni iliyochorwa kwenye gridi ya 24 px. Ikiwa ukubwa lazima utue kwenye gridi ya pikseli, kubadilisha rem kuwa px kunakuambia kama unatua kwa msingi wako.
Mitego unapobadilisha rem kuwa px
Kusahau ukubwa wa mzizi uliobadilishwa
Kama mzizi umewekwa kuwa 62.5% au kuwa usemi wa clamp, kigezo cha kawaida cha 16 hakitumiki. Matokeo yana kosa la uwiano wa misingi hiyo miwili. Kagua msingi kwanza kila mara.
Kuchanganya rem na em
Em inalinganishwa na ukubwa wa herufi wa kipengele chenyewe, si wa mzizi. Thamani ya 1.5em ndani ya kichwa cha 24 px ni 36 px, lakini ndani ya aya ya 16 px ni 24 px. Ukurasa huu hubadilisha rem, ambayo haina utata kama huo. Kwa em, tazama em hadi px.
Kudhani skrini inaonyesha pikseli zilezile
Pikseli ya CSS si pikseli ya kifaa. Kwenye onyesho lenye msongamano mkubwa pikseli moja ya CSS inaweza kuwa pikseli mbili au tatu za kifaa. Ubadilishaji hutoa pikseli za CSS, ambazo ndizo zana za usanifu na mitindo ya CSS hutumia zote mbili.
Kuzungusha mapema mno
Ukizungusha 13.333 px hadi 13 kisha ukabadilisha kurudi, unapata 0.8125 rem, si 0.8333 uliyoanza nayo. Hifadhi thamani ya awali ya rem pale inapohusika.
Maswali ambayo watu huuliza kabla ya kubadilisha
Rem 1 ni pikseli ngapi?
Kumi na sita, kwenye kivinjari ambacho chaguomsingi lake halijabadilishwa.
Rem 2 ni pikseli ngapi?
Thelathini na mbili kwa msingi wa chaguomsingi. Kwa msingi wa 10 ingekuwa 20.
Kwa nini kivinjari changu kinaonyesha kitu tofauti?
Mpangilio wa msomaji au kanuni katika mitindo ya CSS imebadilisha ukubwa wa mzizi. Tazama ukubwa wa herufi uliokokotolewa wa kipengele cha mzizi kwenye zana za msanidi.
Je, rem ni sawa na em?
Hapana. Rem inarejea kipengele cha mzizi na em inarejea kipengele chenyewe.
Je, namba yangu inapakiwa?
Hapana. Hesabu hufanyika ndani ya kivinjari chako na hakuna kinachotumwa popote.
Narudije nyuma?
Kwa px hadi rem, ambayo hugawanya badala ya kuzidisha.
Mazoea yanayofanya mitindo ya rem iwe rahisi kusoma
Andika thamani ya pikseli katika maoni
Mstari kama gap: 1.5rem; /* 24px */ unagharimu herufi chache na unamwokoa msomaji anayefuata ubadilishaji. Pia hurekodi msingi uliodhania.
Tumia kiwango kidogo
Mradi unaotumia thamani chache tu za rem, kama 0.5, 1, 1.5, 2 na 3, ni rahisi kujifunza: baada ya siku moja unazijua kwa pikseli bila kufikiri. Unapobadilisha rem kuwa px kwa mitindo ya CSS ya aina hiyo unathibitisha tu unachokumbuka.
Zipe thamani zako majina
Kwa sifa maalum, kama --space-md: 1.5rem, mitindo ya CSS huelezea nia badala ya namba. Jina hubeba maana, na namba iko mahali pamoja.
Jaribu kwa ukubwa tofauti wa chaguomsingi
Ongeza ukubwa wa chaguomsingi wa maandishi katika kivinjari chako na uutazame ukurasa. Ukidumu pamoja, mpangilio umejengwa kweli kwa rem. Ukivunjika, kitu kiliachwa kwa pikseli.
Kutumia thamani ya pikseli vizuri baada ya kubadilisha rem kuwa px
Linganisha uwiano, si namba tu
Unapobadilisha rem kuwa px kwa mitindo yote ya CSS, tazama uwiano kati ya ukubwa pamoja na ukubwa wenyewe. Kiwango cha herufi ambamo kila hatua ni takriban mara 1.25 ya iliyotangulia hutoa pikseli 16, 20, 25, 31 na 39; kiwango cha 1.5 hutoa 16, 24, 36 na 54. Kuuona uwiano kunakuambia mbunifu alikusudia nini, na kunakuwezesha kupanua kiwango kwa uthabiti unapohitaji ukubwa mpya.
Tafsiri kwa watu wanaofikiri kwa pikseli
Si kila mtu kwenye timu husoma rem. Mameneja wa miradi, waandishi wa maandishi na wateja mara nyingi hufanya kazi kutoka picha za skrini na kuomba kichwa kiwe kikubwa kidogo. Ukiweza kusema kwamba kichwa sasa ni 36 px na kingekuwa 40 px kwa 2.5 rem, mazungumzo ni mafupi. Ukurasa ni muhimu kama daraja la haraka kati ya msamiati huo mbili.
Kagua maeneo ya kugusa na ukubwa wa chini
Miongozo ya skrini za kugusa inataka maeneo ya angalau takriban 44 px, na miongozo ya maandishi inataka maandishi ya kawaida ya takriban 16 px au zaidi. Vyote viwili vimeelezwa kwa pikseli. Ili kuthibitisha mitindo iliyoandikwa kwa rem dhidi yake, badilisha rem kuwa px na uone kama vitufe na maandishi vinavuka mstari.
Zingatia hali ya kukuzwa
Thamani unayopata ni ya msingi uliouandika. Kama wasomaji wako wanaweza kupanua maandishi, jaribu ubadilishaji tena kwa msingi wa 20 au 24 na uone mpangilio unadai nini kwenye skrini. Kadi inayotoshea vizuri kwa 16 inaweza kufurika kwa 24, na wakati bora wa kugundua ni kabla ukurasa haujachapishwa.
Vibadilishaji vinavyohusiana
Familia hiyohiyo ya zana inashughulikia ubadilishaji wa jirani. Kurudi kwenye rem, tumia px hadi rem. Kwa ukubwa unaolinganishwa na kipengele, kuna px hadi em na em hadi px, na kwa ukubwa unaolinganishwa na skrini, px hadi vw na vw hadi px. Kwa rangi katika mitindo hiyohiyo ya CSS, HEX hadi RGB na HSL hadi HEX ziko karibu, na kwa majina ya madarasa, maandishi hadi kebab-case hugeuza kifungu cha maneno kuwa jina ambalo CSS inakubali.
Mfano wa kazi
Tuseme unakagua ombi la kuunganisha msimbo na mitindo ya CSS ina sehemu kuu yenye padding: 5rem 1.5rem, kichwa cha 3.5rem na aya ya utangulizi ya 1.25rem. Faili ya usanifu inasema 80 px na 24 px za nafasi ya ndani, kichwa cha 56 px na utangulizi wa 20 px. Unaandika 5 na kusoma 80 px, unaandika 1.5 na kusoma 24, unaandika 3.5 na kusoma 56, unaandika 1.25 na kusoma 20. Zote nne zinalingana, kwa hiyo ukurasa uliojengwa ni mwaminifu. Kama kichwa kingekuwa 3.25 rem, ungesoma 52 na kuona tofauti kabla haijamfikia mbunifu.
Orodha fupi ya ukaguzi
Kabla ya kubadilisha
Tafuta msingi: kanuni ya mzizi katika mitindo ya CSS, au ukubwa uliokokotolewa kwenye zana za msanidi.
Unapobadilisha
Andika thamani ya rem, kagua msingi unaoonyeshwa kando ya matokeo na uandike namba ya pikseli.
Baada ya kubadilisha
Linganisha na faili ya usanifu. Kama namba zinatofautiana, kagua msingi kabla ya kushuku msimbo.
Makosa ya kawaida
Kutumia 16 bila kukagua
Ni chaguomsingi, si kanuni. Kagua mzizi.
Kuchukulia pikseli kuwa za mwisho
Jibu ni halali kwa msingi mmoja. Msomaji mwenye chaguomsingi kubwa zaidi huona pikseli kubwa zaidi.
Kuchanganya rem na em
Zinafanana kwa sura na hufanya kazi tofauti. Tumia ukurasa sahihi kwa kila moja.
Namba zako hubaki kwenye kifaa chako
Hesabu hufanyika ndani ya kifaa chako. Thamani zako hutumiwa na kivinjari chako mwenyewe na hakuna kinachotumwa popote. Hakuna cha kufuta baadaye na hakuna akaunti ya kufungua. Hiyo ndiyo njia rahisi ya kubadilisha rem kuwa px.
Muhtasari
Ili kubadilisha rem kuwa px hapa, andika ukubwa kwa rem na uusome mara moja kwa pikseli, ukitumia fomula px = rem × msingi. Msingi huanza kwa 16 px, chaguomsingi la kivinjari, nawe unaweza kuubadilisha ulingane na CSS yako. Ubadilishaji huhifadhi uwiano, kwa kuwa rem moja ni chochote ukubwa wa herufi wa mzizi ulivyo, na hauwezi kujua mipangilio ya msomaji wako, kwa hiyo namba ni sahihi tu kwa msingi ulio kwenye sehemu hiyo. Jedwali la thamani za kawaida, kutoka 0.5 rem kwa 8 px hadi 4 rem kwa 64 px, hukusaidia kusoma mitindo ya CSS kwa mtazamo wa haraka. Hakuna kinachopakiwa.