Badilisha px kuwa rem Pixels ↔ Root em Bure Mtandaoni Salama
Andika thamani katika px na uisome katika rem 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 rem
| px | rem |
|---|---|
| 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 wabunifu na wasanidi hubadilisha px kuwa rem
Zana za usanifu huzungumza kwa pikseli. Mchoro wa awali husema kichwa cha habari ni 32 px, pengo kati ya sehemu ni 48 px, na kitufe kina nafasi ya ndani ya 16 px. Mitindo ya CSS, ikiandikwa vizuri, huzungumza kwa rem. Pengo kati ya lugha hizo mbili ndipo ukurasa huu ulipo: unaandika ukubwa kwa pikseli na kuusoma kwa rem, ili namba unayoiweka kwenye CSS iwe na maana ileile aliyokusudia mbunifu. Kubadilisha px kuwa rem ni jambo dogo, lakini hufanywa mamia ya mara katika maisha ya tovuti, na msingi usio sahihi hugeuza mpangilio makini kuwa mpangilio uliokosewa kidogo kila mahali kwa wakati mmoja.
Sababu ya kujishughulisha na rem ni ufikivu na unyumbufu. Rem ni kigawe cha ukubwa wa herufi wa mzizi, ambao kivinjari huuweka kuwa 16 px isipoelekezwa vinginevyo, na ambao msomaji yuko huru kuubadilisha katika mipangilio yake. Kwa hiyo mpangilio ulioandikwa kwa rem hudumisha umbo lake mtu mwenye uoni hafifu anapoongeza ukubwa wa chaguomsingi wa maandishi: herufi, nafasi na visanduku hukua pamoja. Mpangilio ulioandikwa kwa pikseli haufuati, na msomaji aliyeomba maandishi makubwa hupata herufi kubwa katika visanduku vilivyobana, au hapati kitu kabisa. Ndiyo maana karibu kila mwongozo wa kisasa wa mitindo husema jambo hilohilo: tumia rem kwa herufi na nafasi.
Ukurasa huu hufanya hesabu ndani ya kivinjari chako. Hakuna kinachopakiwa, na kile ambacho ubadilishaji unategemea, yaani ukubwa wa msingi, kimeandikwa waziwazi hapa chini na kiko kwenye sehemu unayoweza kuibadilisha, badala ya kudhaniwa nyuma ya mgongo wako. Hapa chini utapata fomula, jedwali la ukubwa wa kawaida, sababu zinazofanya msingi uwe muhimu, mitego inayowakumba wanaobadilisha px kuwa rem kwa haraka, na mwongozo mfupi wa kutumia matokeo katika mitindo halisi ya CSS.
Fomula na msingi
rem ni px kugawanywa kwa msingi
Fomula ni mgawanyo mmoja: rem = px ÷ msingi. Kwa msingi wa kawaida wa 16 px, ukubwa wa 24 px huwa 1.5 rem, 32 px huwa 2 rem na 8 px huwa 0.5 rem. Ukurasa huonyesha matokeo unapoandika, na huonyesha msingi uliotumia, kwa hiyo mstari 24 px = 1.5 rem (16 px) hukueleza hasa kilichodhaniwa.
Namba 16 inatoka wapi
Msingi huanza kwa 16 px kwa sababu ndicho kivinjari hutumia pasipokuwa na maelekezo mengine. Hii si sheria ya wavuti; ni chaguomsingi la chaguomsingi, na imekuwa thabiti kwa miongo kadhaa. Kama CSS yako haigusi ukubwa wa herufi wa mzizi, 1 rem ni 16 px kwa wageni wengi. Ikiwa inaugusa, msingi ni chochote ulichoweka.
Mbinu ya 62.5% na kwa nini watu huitumia
Baadhi ya mitindo huweka ukubwa wa mzizi kuwa 62.5%, jambo linalofanya 1 rem iwe sawa na 10 px kwenye kivinjari cha chaguomsingi, hivyo 24 px ni 2.4 rem tu na hesabu ni rahisi kufanya kichwani. Inafanya kazi, lakini ina gharama: ukurasa mzima sasa unategemea asilimia hiyo, na kijenzi chochote kinachotarajia 16 kuwa msingi kitatoka kidogo mno. Kama mradi wako unafanya hivi, andika 10 kwenye sehemu ya msingi ya ukurasa huu, na kila namba italingana na CSS yako.
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. Huo ndio msingi mzima wa kuuandika hivyo. Unapobadilisha px kuwa rem, namba unayopata ni uwiano uleule ambao thamani ya pikseli ilikuwa nao kwenye msingi uliouchagua, sasa ikiwa imeelezwa kwa njia inayopanuka au kupungua.
Haiwezi kujua mipangilio ya msomaji wako
Namba hutegemea kabisa msingi. Kama CSS yako inaweka ukubwa tofauti kwenye kipengele cha mzizi, au msomaji amebadilisha 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. Namba iliyo kwenye ukurasa ni sahihi tu kwa msingi ulio kwenye sehemu hiyo. Hili si kasoro ya zana bali ni asili ya kitengo chenyewe: ni cha kulinganisha, na kitengo cha kulinganisha hakina thamani isiyobadilika ya kubadilishia.
Kuzungusha namba
Kugawanya kwa 16 hutoa matokeo safi kwa ukubwa mwingi wa kawaida (16, 24, 32, 48, 64) na desimali zinazojirudia kwa mingine (10 px ni 0.625 rem; 13 px ni 0.8125). Ukurasa hutoa tarakimu nyingi kadiri namba inavyohitaji, nawe unaamua ngapi uzibakize katika mitindo ya CSS. Vivinjari hushughulikia desimali ndefu bila shida, lakini thamani iliyozungushwa kama 0.8125rem ni rahisi kusoma na kutunza kuliko ile yenye tarakimu kumi.
Ukubwa wa kawaida
Jedwali lililo chini ya ukurasa
Chini ya kibadilishaji utapata jedwali la ukubwa wa kawaida: 8 px ni 0.5 rem, 10 px ni 0.625, 12 px ni 0.75, 14 px ni 0.875, 16 px ni 1, 18 px ni 1.125, 20 px ni 1.25, 24 px ni 1.5, 32 px ni 2, 48 px ni 3 na 64 px ni 4. Hivi ndivyo ukubwa unaojitokeza mara nyingi zaidi katika viwango vya herufi na mifumo ya nafasi, na kuwa navyo mbele yako kunakuokolea ubadilishaji.
Kiwango kilichojengwa juu ya rem
Mazoea mazuri ni kuchagua seti ndogo ya thamani za rem na kuzitumia tena: 0.5, 1, 1.5, 2, 3 na 4 kwa nafasi, na 0.875, 1, 1.25, 1.5, 2 kwa herufi. Wabunifu huita hiki kiwango, na hukifanya tovuti ionekane thabiti. Mchoro wa awali ukikupa thamani isiyo ya kawaida kama 22 px, tumia kibadilishaji kuona kwamba ni 1.375 rem, kisha uamue kama utaizungusha hadi thamani iliyo karibu zaidi kwenye kiwango chako.
Jinsi ya kubadilisha px kuwa rem hapa
Andika thamani ya pikseli
Weka ukubwa kwa pikseli kwenye sehemu ya kwanza. Desimali zinakubaliwa, kwa hiyo 13.5 px inafanya kazi kama 14.
Kagua msingi
Uache kwenye 16 kama CSS yako haibadilishi ukubwa wa mzizi. Ubadilishe kama inaubadilisha. Matokeo husasishwa unapoandika.
Nakili thamani ya rem
Soma namba na uitumie katika CSS yako, ukiandika kitengo baada yake: font-size: 1.5rem. Usisahau kitengo, kwa kuwa namba tupu ina maana tofauti katika sifa nyingi.
Vitengo hivi vinatoka wapi
Pikseli ya CSS si pikseli ya skrini yako
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. Kila kitu kingine katika ukurasa huu kimejengwa juu ya hilo. 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.
Kwa nini rem ipo
Kabla ya rem, wasanidi walipima kila kitu kwa em au asilimia, na vipengele vilivyoingiliana vilizidishana: orodha ndani ya orodha ndani ya orodha ilipungua au kukua kwa kila ngazi. Rem iliwapa rejeo moja lisilobadilika, mzizi, na kuondoa kuzidishana. Ukitaka kulinganisha hizo mbili, Badilisha px kuwa em na uone jinsi thamani ileile ya pikseli inavyotegemea kipengele kilichomo.
Unakutana na rem wapi kwa vitendo
Herufi
Maandishi ya kawaida mara nyingi ni 1 rem, vichwa vya habari 1.25 hadi 3 rem, maandishi madogo 0.75 hadi 0.875 rem. Kuyaandika kwa rem humruhusu msomaji kupanua ukurasa mzima kwa kubadilisha mpangilio mmoja wa kivinjari.
Nafasi na mpangilio
Pambizo, nafasi za ndani na mapengo kwa rem hudumisha nafasi tupu sawia na herufi. Maandishi yanapokua, nafasi inayoyazunguka hukua pia, na mpangilio hubaki sawia badala ya kubana herufi kubwa katika visanduku vya zamani.
Maswali ya vyombo vya habari (media queries)
Vizingiti vilivyoandikwa kwa em au rem hujibu ukubwa wa maandishi wa msomaji, hivyo mpangilio hubadilika kuwa umbo jembamba mapema kwa mtu aliyepanua maandishi yake. Ni uboreshaji unaostahili kujulikana, ingawa pikseli bado ni za kawaida katika vizingiti.
Cha kuacha kwa pikseli
Mipaka myembamba sana, vivuli vya visanduku na aikoni nyembamba mara nyingi huonekana vizuri zaidi kwa ukubwa wa pikseli usiobadilika, kwa kuwa mpaka wa 0.0625rem unaokua hadi 0.1rem kwa maandishi makubwa haumsaidii yeyote. Tumia rem kwa kile kinachopaswa kupanuka na pikseli kwa kisichopaswa.
Mitego unapobadilisha px kuwa rem
Kusahau kwamba msingi si 16 kila mara
Kama mradi unaweka html { font-size: 62.5% }, au unatumia ukubwa wa mzizi unaonyumbulika, kigezo ni tofauti. Kagua mitindo ya CSS kabla ya kuamini namba kutoka kwa kibadilishaji chochote, ikiwemo hiki.
Kubadilisha ukubwa wa mzizi wenyewe
Ukiweka ukubwa wa mzizi kwa pikseli, mpangilio wa kivinjari cha msomaji unapuuzwa na faida ya rem inapotea. Weka mzizi kama asilimia, au uuache kama ulivyo, ili upendeleo wa mtumiaji uheshimiwe.
Kutumia rem ndani ya kijenzi kinachoweka ukubwa wake wa herufi
Rem daima inarejea kwenye mzizi, si kijenzi. Kitufe chenye ukubwa wa herufi wa 14 px na nafasi ya ndani ya 1rem kina nafasi ambayo haifuati maandishi ya kitufe chenyewe. Ukitaka nafasi inayofuata maandishi ya kipengele, hiyo ni kazi ya em.
Kuchanganya vitengo bila mpango
Mitindo inayotumia px kwa pambizo moja, rem kwa inayofuata na em kwa ya tatu ni vigumu kuielewa. Chagua kanuni: rem kwa herufi na nafasi, pikseli kwa mipaka na vivuli, na uishikilie.
Maswali ambayo watu huuliza kabla ya kubadilisha
16 px ni rem ngapi?
Moja, kwenye kivinjari cha chaguomsingi. Kumi na sita ikigawanywa kwa msingi wa kumi na sita.
Je, rem ni bora kuliko px?
Kwa herufi na nafasi, ni chaguo bora katika miradi mingi, kwa sababu inaheshimu mipangilio ya msomaji. Pikseli bado ni sahihi kwa vitu visivyopaswa kupanuka.
Kwa nini matokeo yangu yanatofautiana na tovuti nyingine?
Huenda ni msingi tofauti. Kagua sehemu hiyo: baadhi ya zana hudhani 10, baadhi 16, baadhi 14. Ukurasa huu unaonyesha msingi kando ya matokeo.
Je, lazima nizungushe?
Hapana. Vivinjari vinakubali desimali ndefu. Zungusha tu kwa ajili ya kusomeka.
Je, namba yangu inapakiwa?
Hapana. Hesabu hufanyika ndani ya kivinjari chako na hakuna kinachotumwa popote.
Narudije nyuma?
Kwa rem hadi px, ambayo huzidisha badala ya kugawanya.
Kuchagua kwa busara unapobadilisha px kuwa rem
Amua msingi wa mradi na uushikilie
Chochote unachochagua, kifanye kiwe uamuzi na kiandike katika nyaraka za mradi. Timu isiyokubaliana kuhusu msingi hutoa vijenzi visivyolingana.
Badilisha wakati wa usanifu, si dakika ya mwisho
Ukibadilisha px kuwa rem unaposoma mchoro wa awali, unajenga kiwango ndani ya usanifu na kugundua thamani zisizo za kawaida mapema. Ukifanya hivyo mwishoni, utazigundua kama rundo la namba zisizolingana.
Fikiria pia vitengo vya eneo la kutazama
Kwa vichwa vya habari vinavyopaswa kujaza skrini, px hadi vw huonyesha ukubwa kama sehemu ya eneo la kutazama. Hupanuka kwa njia tofauti na rem, na hizo mbili mara nyingi huunganishwa.
Mazoea yanayorahisisha kubadilisha px kuwa rem
Weka jedwali la ubadilishaji kichwani
Kwa msingi wa 16, nanga chache hufunika sehemu kubwa ya kazi: 4 px ni 0.25 rem, 8 px ni 0.5, 12 px ni 0.75, 16 px ni 1, 24 px ni 1.5 na 32 px ni 2. Mchoro wa awali ukikupa thamani iliyo kati yake, unaweza kukadiria kabla ya kubadilisha px kuwa rem kwenye ukurasa, na kutumia kibadilishaji kuthibitisha tu. Baada ya wiki chache utajua jedwali bila kuangalia.
Acha mfumo wa usanifu ufanye kazi
Kama timu yako inatunza vitambulisho vya usanifu, kama spacing-2 au font-lg, viweke kwa rem mara moja, na uwaache wote wavirejee kwa majina. Hapo hakuna anayehitaji kubadilisha px kuwa rem tena, na mabadiliko ya kiwango hufanywa mahali pamoja. Kibadilishaji ni zana unayotumia unapoandika vitambulisho, si unapovitumia.
Andika thamani ya pikseli katika maoni
Mstari kama padding: 1.25rem; /* 20px */ unagharimu herufi chache na unamwokoa msanidi anayefuata kutafuta kikokotoo. Pia hurekodi msingi uliodhania, jambo linalosaidia ukubwa wa mzizi ukibadilishwa baadaye.
Jaribu kwa mpangilio uliobadilishwa wa kivinjari
Ushahidi kwamba ukurasa umejengwa kwa rem ni kwamba unastahimili ukubwa mkubwa wa chaguomsingi wa maandishi. Badilisha mpangilio kwenye kivinjari chako, pakia upya na utazame. Vijenzi vinavyovunjika ni vile ambavyo kitu fulani kiliachwa kwa pikseli au ambavyo urefu usiobadilika ulikata maandishi.
Vibadilishaji vinavyohusiana
Familia hiyohiyo ya zana inashughulikia ubadilishaji wa jirani. Kurudi kwenye pikseli, tumia rem hadi px. 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. Kama kazi yako inajumuisha rangi pamoja na ukubwa, HEX hadi RGB, RGB hadi HEX na HEX hadi HSL hushughulikia viwakilishi vya mitindo ya CSS.
Mfano wa kazi
Tuseme mchoro wa awali unatoa kichwa cha kadi cha 28 px, nafasi ya ndani ya kadi ya 20 px na pengo la 12 px kati ya kadi, na mradi wako unatumia msingi wa chaguomsingi wa 16 px. Unaandika 28 na kusoma 1.75 rem, unaandika 20 na kusoma 1.25 rem, unaandika 12 na kusoma 0.75 rem. Katika mitindo ya CSS unaandika font-size: 1.75rem, padding: 1.25rem na gap: 0.75rem. Mgeni anayepandisha ukubwa wa maandishi ya kivinjari hadi 20 px huona kadi ileile, iliyopanuliwa kwa robo: kichwa ni 35 px, nafasi ya ndani 25 px na pengo 15 px, vyote kwa uwiano. Kama ungeandika pikseli, kichwa kingebaki 28 na kadi ingeonekana vibaya.
Orodha fupi ya ukaguzi
Kabla ya kubadilisha
Jua msingi ambao CSS yako inatumia. Amua ni ukubwa gani unapaswa kupanuka na upi usipaswe.
Unapobadilisha
Andika thamani ya pikseli, kagua msingi unaoonyeshwa kando ya matokeo na unakili namba ya rem pamoja na kitengo chake.
Baada ya kubadilisha
Jaribu ukurasa kwa ukubwa mkubwa wa chaguomsingi wa maandishi katika kivinjari, na utafute visanduku ambavyo havishiki tena maandishi yake.
Makosa ya kawaida
Kudhani 1 rem ni 16 px kila mara
Ni hivyo tu pale ambapo hakuna aliyebadilisha ukubwa wa mzizi, na baadhi ya wasomaji wamebadilisha. Andika mpangilio ili ufanye kazi kwa ukubwa mwingine pia.
Kuweka ukubwa wa mzizi kwa pikseli
Unabatilisha chaguo la msomaji. Tumia asilimia, au usiuweke.
Kubadilisha kila kitu
Si kila ukubwa unapaswa kupanuka. Acha mipaka na vivuli kwa pikseli.
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 px kuwa rem.
Muhtasari
Ili kubadilisha px kuwa rem hapa, andika ukubwa kwa pikseli na uusome mara moja kwa rem, ukitumia fomula rem = px ÷ msingi. Msingi huanza kwa 16 px, chaguomsingi la kivinjari, nawe unaweza kuubadilisha ulingane na CSS yako. Ubadilishaji huhifadhi uwiano: mpangilio ulioandikwa kwa rem hudumisha umbo lake ukubwa wa herufi wa mzizi unapobadilika. Hauwezi kujua mipangilio ya msomaji wako, kwa hiyo namba ni sahihi tu kwa msingi ulio kwenye sehemu hiyo. Ukubwa wa kawaida katika jedwali lililo chini ya kibadilishaji, kutoka 8 px kwa 0.5 rem hadi 64 px kwa 4 rem, hukuokoa kurudia hesabu. Hakuna kinachopakiwa.