Mayar da rem zuwa px Root em ↔ Pixels Kyauta A kan layi Amintacce
Ku rubuta ƙima a rem ku karanta ta a px nan take. Lissafin yana faruwa a cikin burauzarku, ba a aika komai ko'ina ba, kuma abin da mayarwar ta dogara da shi an rubuta shi a ƙasa maimakon a ɗauka.
Ba a ɗora komai ba
Girman da aka fi amfani da su — Mayar da rem zuwa 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 |
Daga ina waɗannan ma'aunai suka fito
Pixel a CSS ba shi ne pixel a allonku ba. Lokacin da yawan pixel na allo ya daina zama abin da za a iya hasashe, shafi da aka auna da pixel na gaske ya zama shafi da yake ƙanƙancewa yayin da allo ke ƙara kaifi, don haka aka sake bayyana CSS pixel a matsayin tsawon abin tunani: kusan 1/96 na inci da ake gani a nesa mai daɗin karatu. Duk sauran abubuwan da ke wannan shafin an gina su a kai. Em ya girmi yanar gizo — a rubutun ƙarfe ya kasance faɗin tubalin da aka yi, mai suna daga babban harafin M — kuma a CSS yana nufin girman rubutu da ke aiki, shi ya sa yake canzawa yayin da kuke saka abubuwa cikin juna. An ƙara rem don guje wa daidai wannan: shi ne em na tushen element kuma ba ya taruwa. Vw ya zo da zanen shafi mai daidaitawa (responsive design): kashi ɗaya cikin ɗari na faɗin viewport, komai ya zama.
Inda kuke haɗuwa da su
Waɗannan su ne ma'aunan kowane stylesheet. Pixels suna ba da girman iyaka, inuwa da duk abin da bai kamata ya canza girma ba; rem yana ba da girman rubutu, tazara da tsari, domin sauyi ɗaya a tushe ya sake girman duk mahaɗa; em yana ba da girman abubuwan da ya kamata su bi rubutunsu, kamar padding ɗin cikin maɓalli; vw yana ba da girman kanun labarai da sassan hero da dole su cika allo a kowace na'ura. Juyawa tsakaninsu shi ne lissafin yau da kullum na mayar da zane da aka ba da shi da pixel zuwa stylesheet da ke daidaita girma.
Tambayoyin da mutane ke yi
Me ya sa 16 px ne wurin farawa na kullum?
Domin shi ne girman rubutu na asali a kowane babban browser, kuma stylesheet da bai soke shi ba yana gadonsa. Rem ɗaya saboda haka daidai yake da 16 px a saitin asali, wanda shi ne asalin juyawar da aka saba da ita: 0.5 rem shi ne 8 px, 1.5 rem shi ne 24 px. Idan mai amfani ya ƙara girman asali a saitunan browser ɗinsa, waɗannan ƙimar rem ɗin suna girma tare da shi — wanda shi ne ainihin manufar amfani da su.
Rem zan yi amfani da shi ko em?
Rem ga duk abin da ya kamata ya bi shafi gaba ɗaya — ma'aunin rubutu, tazara, faɗin tsari — domin ana aunawa daga tushe kuma ba ya taruwa. Em ga duk abin da ya kamata ya bi rubutun da yake ciki: padding na maɓalli, tazara kusa da icon, shigar sakin layi na ambato. Kuskuren da aka fi yi shi ne saka abubuwa masu girman em cikin juna, inda 1.2 em a cikin 1.2 em ya zama 1.44, sannan 1.73, har rubutun ƙasan shafin ya ninka girman da aka nufa.
Shin amsar daidai ce?
Inda aka ayyana ma'aunai biyun ta hanyar juna da cikakkun lambobi, i — shafin yana faɗin haka a saman lambar, kuma zagaye kawai shi ne yawan lambobin da ake nunawa. Inda rabon ba shi da lambar goma mai ƙarewa, shafin yana nuna muhimman lambobi goma sha biyu kuma yana cewa alaƙar kintace ce maimakon ya yi kamar ba haka ba ne.
Shin wani abu da na rubuta yana barin na'urata?
A'a. Ana yin lissafin a cikin burauzarku; ba a ɗora komai ba, kuma babu uwar garke da za a ɗora zuwa gare ta. Ku buɗe shafin sau ɗaya zai ci gaba da aiki ko da an kashe hanyar sadarwa.
Dalilin da ya sa kake buƙatar Canza rem zuwa px
Ka buɗe takardar salo (stylesheet) ka ga padding: 2.25rem a kan kati da font-size: 0.8125rem a kan taken hoto. Kyawawan ƙima ne, an rubuta su yadda ya kamata a rubuta CSS na zamani, amma ba su gaya maka komai da kallo ɗaya ba. Yaya girman padding ɗin katin yake a kan allo? Shin taken hoton zai iya karantuwa? Shin ya yi daidai da 36 px da 13 px da ke cikin fayil ɗin ƙira da aka ba ka? Don amsawa, kana Canza rem zuwa px: kana ninka da girman rubutun tushe ka karanta amsar a ma'aunin da kayan aikin ƙira ke amfani da shi. Wannan akasin hanyar da aka saba ne, kuma shi ne abin da kake yi lokacin da kake karanta lambobin shirin, ko kake duba ƙira da abin da aka gina, ko kake bayyana shimfiɗa ga wanda ke tunani da pixel.
Canjin yana da sauƙi; abin da ya sa ya cancanci shafi shi ne tushen ma'aunin. Rem ba girma ba ne, ninki ne na girma, wato girman rubutun ɓangaren tushe. A burauza da babu wanda ya gaya mata akasin haka, wannan girman 16 px ne, don haka 1 rem shi ne 16 px, 2.25 rem shi ne 36 px kuma 0.8125 rem shi ne 13 px. Amma takardar salo za ta iya canza tushen, mai karatu ma zai iya canza shi a burauza, sannan kowace ƙimar rem a shafin tana motsawa tare da shi. Don haka shafin yana tambayar tushen ya yi amfani da shi, maimakon ya ɓoye shi.
Lissafin yana faruwa a burauzarka, kuma ba a ɗora komai ba. A ƙasa za ka sami dabarar lissafi, tebur na ƙima da aka fi amfani da su, abin da canjin yake riƙewa da wanda ba zai iya riƙewa ba, yanayin da masu shirye-shirye ke buƙatar Canza rem zuwa px, da wasu al'adu da ke sa takardar salo ta rem ta zama mai sauƙin karantawa.
Dabarar lissafi da tushen
px daidai yake da rem ninka tushe
Dabarar ninka ɗaya ce: px = rem × tushe. Da tushen da aka saba na 16 px, 1.5 rem ya zama 24 px, 0.75 rem ya zama 12 px kuma 4 rem ya zama 64 px. Shafin yana buga tushen kusa da sakamakon, don haka layi kamar 1.5 rem = 24 px (16 px) yana faɗin abin da ya ɗauka kuma za ka iya ganin nan da nan ko ya yi daidai da aikinka.
Gano tushenka
Ka duba takardar salo don neman doka a kan html ko :root da ke saita font-size. Idan babu ita, tushen shi ne tsohon ƙimar burauza na 16 px. Idan akwai, kamar 62.5%, ɗauki wannan kaso na 16: 62.5% yana ba da 10 px. A kayan aikin masu haɓakawa na burauza za ka iya zaɓar ɓangaren tushe ka karanta girman rubutunsa da aka lissafa, wanda shi ne lambar da za ka rubuta a filin tushe.
Lokacin da girman tushe ke canzawa
Wasu shafuka suna sa girman tushe ya yi girma tare da taga, ta amfani da furcin clamp. Sannan 1 rem ba shi da ƙimar pixel guda ɗaya kwata-kwata: yana 15 px a waya da 18 px a babban allo mai faɗi. A wannan yanayin kowane canji hoto ne na ɗan lokaci. Rubuta tushen da kake gani a faɗin da ke da muhimmanci a gare ka, ka fahimci cewa amsar tana aiki a wannan faɗin kaɗai.
Abin da canjin yake riƙewa da abin da ba zai iya ba
Yana riƙe da gwargwado
Rem ɗaya shi ne duk abin da girman rubutun tushe yake, don haka shimfiɗa da aka rubuta da rem tana riƙe da siffarta idan wannan girman ya canza. Lokacin da kake Canza rem zuwa px, ƙimar pixel ita ce wannan gwargwadon da aka bayyana a fili don tushe guda ɗaya. Rabon da ke tsakanin girma biyu, misali kai na 2 rem a kan rubutun jiki na 1 rem, ba ya canzawa ko yaya kake canza shi, kuma wannan rabon shi ne abin da shimfiɗa mai kyau ta dogara da shi.
Ba zai iya sanin saitunan mai karatunka ba
Lambar ta dogara gaba ɗaya a kan tushe. Idan mai karatu ya ɗaga tsohon girman rubutun burauzarsa, abin da mutane da yawa suke yi kuma suna da haƙƙin yi, to 1 rem ba 16 px ba ne a gare shi, kuma adadin da kake gani daidai ne kawai ga tushen da ke cikin filin. Ka ɗauki ƙimar pixel a matsayin hanyar fahimtar ƙira, ba a matsayin alƙawarin abin da kowane mai ziyara zai gani ba.
Zagaye
Saboda tushe yawanci cikakkiyar lamba ce, sakamakon ninka yawanci daidai yake. 0.8125 rem daidai yake 13 px a tushe na 16; 0.6875 rem daidai yake 11 px. Idan ka sami dogon ƙarami, alama ce cewa an lissafa ƙimar rem daga wani tushe daban da wanda ka rubuta.
Ƙima da aka fi amfani da su
Teburin da ke ƙasan shafin
Shafin yana ɗauke da tebur na ƙimar pixel da adadin rem da aka fi amfani da su suke dacewa da su a tushen da ka saita: 0.5 rem shi ne 8 px, 0.625 shi ne 10, 0.75 shi ne 12, 0.875 shi ne 14, 1 shi ne 16, 1.125 shi ne 18, 1.25 shi ne 20, 1.5 shi ne 24, 2 shi ne 32, 3 shi ne 48 kuma 4 shi ne 64. Waɗannan su ne ƙimar da suka fi bayyana a cikin tazara da ma'aunin rubutu, kuma sanin su a zuci yana sa takardar salo ta zama mai sauƙin karantawa da kallo ɗaya.
Karanta takardar salo da pixel
Motsa jiki mai amfani shi ne ka ɗauki takardar salo da ba kai ka rubuta ba ka fassara manyan ƙimarta zuwa pixel sau ɗaya, ka rubuta sakamakon a bayanin kula. Girman jiki na 1 rem, kanun labarai na 1.5 da 2.25 rem, tazarar akwati ta 2 rem: a pixel, 16, 24, 36 da 32. Idan aka kalle ta haka, dabarar ƙirar tana bayyana, kuma za ka iya kwatanta ta da fayil ɗin ƙira ba tare da na'urar lissafi ba.
Yadda ake Canza rem zuwa px a nan
Rubuta ƙimar rem
Shigar da girman a rem a filin farko. Ana karɓar ƙananan lambobi, don haka 0.8125 yana aiki kamar 1.
Saita tushe
Bar shi a 16 idan CSS ɗinka bai canza girman tushe ba. Canza shi idan ya canza. Sakamakon yana sabuntawa yayin da kake rubutawa.
Karanta ƙimar pixel
Amsar tana bayyana nan da nan, tare da tushen da aka nuna kusa da ita, don ka san abin da aka ɗauka. Kwafi ta cikin bayanin kulanka ko ka kwatanta ta da fayil ɗin ƙira.
Daga ina waɗannan ma'auni suka fito
Pixel na CSS
Lokacin da allo suka daina samun yawan digo da za a iya hasashe, shafin da aka auna da pixel na gaske ya zama shafi da ke ƙanƙancewa yayin da allo ke kara kaifi. Don haka aka sake bayyana pixel na CSS a matsayin tsayin tunani: kusan 1/96 na inci da ake gani daga nisan karatu mai daɗi. Pixel a cikin takardar salo don haka ba digo ba ne a allonka sai dai ma'aunin tsayi ne da burauza ke daidaitawa zuwa yawan digo da allon ke buƙata.
Rem
Em ya girmi yanar gizo: a nau'in ƙarfe shi ne faɗin toshe da aka zubar, wanda aka sa wa suna bayan babban harafin M, kuma a CSS yana nufin girman rubutun da ke aiki, shi ya sa yake canzawa yayin da kake saka ɓangarori a cikin juna. An ƙara rem don guje wa daidai wannan: shi ne em na ɓangaren tushe kuma ba ya taruwa. Don ganin bambancin a lambobi, Canza px zuwa em ka kwatanta da abin da kake samu lokacin da ka Canza rem zuwa px.
Lokacin da masu shirye-shirye ke Canza rem zuwa px
Duba abin da aka gina da fayil ɗin ƙira
Mai ƙira yana ba da fayil a pixel; mai shirye-shirye ya rubuta lambar a rem. Don tabbatar da cewa shafin ya yi daidai, suna Canza rem zuwa px su kwatanta lambobi. Rashin daidaito yana bayyana nan da nan: 1.375 rem shi ne 22 px, kuma idan ƙirar ta ce 24, ɗaya daga cikinsu ba daidai ba ne.
Karanta lambar da ba ka saba da ita ba
Lokacin da ka gaji takardar salo, ƙimar rem tana ɓoye ainihin girma. Canza kaɗan daga cikin manyan yana ba ka taswirar ƙirar: yaya girman rubutun yake, yaya faɗin tazarar gefe yake, ina ne wuraren karyawa suke.
Rubuta rahoton kurakurai da takardun bayani
Mutanen da ke gwada shafi suna bayyana abin da suke gani a pixel. Mai shirye-shirye da ya ce padding ɗin 2.5 rem ne yana nufin kaɗan ga mai gwaji; 40 px yana nufin wani abu. Canzawa yana sa bangarorin biyu su fahimci juna.
Saita ƙimar da dole ne su zama daidai a pixel
Wasu abubuwa dole ne su zama daidai adadin pixel na na'ura ko su yi laushi: iyakar pixel ɗaya, gunki da aka zana a kan tsarin 24 px. Idan girma dole ne ya sauka a kan tsarin pixel, Canza rem zuwa px yana gaya maka ko ya sauka a tushenka.
Tarko lokacin da kake Canza rem zuwa px
Mantawa da canjin girman tushe
Idan an saita tushe zuwa 62.5% ko zuwa furcin clamp, ma'auni na yau da kullum na 16 ba ya aiki. Sakamakon ba daidai ba ne da rabon tushen biyun. Koyaushe ka duba tushe tukuna.
Rikitar da rem da em
Em yana da alaƙa da girman rubutun ɓangaren kansa, ba da tushe ba. Ƙimar 1.5em a cikin kai na 24 px ita ce 36 px, amma a cikin sakin layi na 16 px ita ce 24 px. Wannan shafi yana Canza rem, wanda ba shi da irin wannan rashin tabbas. Don em, duba em zuwa px.
Zaton allon yana nuna pixel iri ɗaya
Pixel na CSS ba pixel na na'ura ba ne. A allo mai yawan digo, pixel ɗaya na CSS zai iya zama pixel biyu ko uku na na'ura. Canjin yana ba da pixel na CSS, wanda kayan aikin ƙira da takardar salo duka suke amfani da shi.
Zagaye da wuri
Idan ka zagaye 13.333 px zuwa 13 sannan ka koma, za ka sami 0.8125 rem, ba 0.8333 da ka fara da shi ba. Riƙe ƙimar rem ta asali lokacin da take da muhimmanci.
Tambayoyin da mutane ke yi kafin su Canza
Pixel nawa ne 1 rem?
Sha shida, a burauza da ba a canza tsohon saitinta ba.
Pixel nawa ne 2 rem?
Talatin da biyu a tushen da aka saba. A tushe na 10 zai zama 20.
Me ya sa burauzata ke nuna wani abu daban?
Saitin mai karatu ko wata doka a takardar salo ta canza girman tushe. Duba girman rubutun ɓangaren tushe da aka lissafa a kayan aikin masu haɓakawa.
Rem ɗaya ne da em?
A'a. Rem yana nufin ɓangaren tushe kuma em yana nufin ɓangaren kansa.
Ana ɗora lambata?
A'a. Lissafin yana gudana a burauzarka kuma ba a aika komai ko'ina ba.
Ta yaya zan koma baya?
Da px zuwa rem, wanda ke rabawa maimakon ninkawa.
Al'adu da ke sa takardar salo ta rem ta zama mai sauƙin karantawa
Rubuta ƙimar pixel a cikin bayani
Layi kamar gap: 1.5rem; /* 24px */ yana kashe ƴan haruffa kaɗan kuma yana adana wa mai karatu na gaba canji. Hakanan yana rubuta tushen da ka ɗauka.
Yi amfani da ƙaramin ma'auni
Aikin da ke amfani da ƴan ƙimar rem kaɗan kawai, kamar 0.5, 1, 1.5, 2 da 3, yana da sauƙin koyo: bayan kwana ɗaya za ka san su a pixel ba tare da tunani ba. Lokacin da kake Canza rem zuwa px don irin wannan takardar salo kana tabbatar da abin da kake tunawa kawai ne.
Sa wa ƙimarka suna
Da kaddarorin al'ada, kamar --space-md: 1.5rem, takardar salo tana bayyana niyya maimakon lambobi. Sunan yana ɗauke da ma'anar, kuma lambar tana zaune a wuri guda.
Gwada da wani tsohon girma daban
Ɗaga tsohon girman rubutu a burauzarka ka kalli shafin. Idan ya riƙe tare, shimfiɗar tana da gaske an gina ta da rem. Idan ya karye, an bar wani abu a pixel.
Yin amfani da ƙimar pixel da kyau bayan ka Canza rem zuwa px
Kwatanta rabo, ba lambobi kaɗai ba
Lokacin da kake Canza rem zuwa px don gaba ɗayan takardar salo, duba rabo tsakanin girma da kuma girman da kansu. Ma'aunin rubutu da kowane mataki yake kusan ninki 1.25 na na baya yana ba da pixel 16, 20, 25, 31 da 39; ma'auni na 1.5 yana ba da 16, 24, 36 da 54. Gano rabon yana gaya maka abin da mai ƙira ya yi niyya, kuma yana ba ka damar tsawaita ma'aunin daidai lokacin da kake buƙatar sabon girma.
Fassara wa mutanen da ke tunani da pixel
Ba kowa a ƙungiya ke karanta rem ba. Manajojin aiki, marubutan talla da abokan ciniki sau da yawa suna aiki daga hotunan allo kuma suna neman kai ya ɗan fi girma. Idan za ka iya cewa kan yana 36 px yanzu kuma zai zama 40 px a 2.5 rem, tattaunawar tana takaice. Shafin yana da amfani a matsayin gada mai sauri tsakanin kalmomin biyu.
Duba wuraren taɓawa da mafi ƙarancin girma
Jagororin allon taɓawa suna neman wurare na aƙalla kusan 44 px, jagororin rubutu kuma suna neman rubutun jiki na kusan 16 px ko fiye. Duka biyun an faɗe su a pixel. Don tabbatar da takardar salo da aka rubuta da rem da su, Canza rem zuwa px ka ga ko maɓallan da rubutun sun wuce layin.
Kula da yanayin da aka faɗaɗa
Ƙimar da kake samu ta tushen da ka rubuta ce. Idan masu karatunka za su iya faɗaɗa rubutun, sake gwada canjin da tushe na 20 ko 24 ka ga abin da shimfiɗar ke buƙata daga allon. Kati da ke da daɗi a 16 zai iya cika ya wuce gefe a 24, kuma lokaci mafi kyau na gano hakan shi ne kafin a buga shafin.
Masu canzawa masu alaƙa
Iyalin kayan aiki ɗaya yana rufe canje-canjen maƙwabta. Don komawa rem, yi amfani da px zuwa rem. Ga girma masu alaƙa da ɓangare, akwai px zuwa em da em zuwa px, kuma ga girma masu alaƙa da allo, px zuwa vw da vw zuwa px. Ga launuka a cikin takardar salo ɗaya, HEX zuwa RGB da HSL zuwa HEX suna nan, kuma ga sunayen aji, rubutu zuwa kebab-case yana mai da jumla suna da CSS ke karɓa.
Misali da aka yi aiki
Ka ɗauka kana duba pull request kuma takardar salo tana da sashen hero mai padding: 5rem 1.5rem, take na 3.5rem da sakin layi na gabatarwa na 1.25rem. Fayil ɗin ƙira ya ce 80 px da 24 px na padding, take na 56 px da gabatarwa na 20 px. Ka rubuta 5 ka karanta 80 px, ka rubuta 1.5 ka karanta 24, ka rubuta 3.5 ka karanta 56, ka rubuta 1.25 ka karanta 20. Duka huɗun sun yi daidai, don haka abin da aka gina amintacce ne. Da taken ya kasance 3.25 rem, da ka karanta 52 ka ga bambanci kafin ya isa wurin mai ƙira.
Ɗan jerin dubawa
Kafin Canzawa
Nemo tushe: dokar tushe a takardar salo, ko girman da aka lissafa a kayan aikin masu haɓakawa.
Yayin Canzawa
Rubuta ƙimar rem, duba tushen da aka nuna kusa da sakamakon ka lura da adadin pixel.
Bayan Canzawa
Kwatanta da fayil ɗin ƙira. Idan lambobin sun bambanta, duba tushe kafin ka yi zargin lambar.
Kura-kurai na gama gari
Amfani da 16 ba tare da dubawa ba
Shi ne tsoho, ba doka ba. Duba tushe.
Ɗaukar pixel a matsayin na ƙarshe
Amsar tana aiki ga tushe ɗaya. Mai karatu mai tsohon girma mafi girma yana ganin pixel mafi girma.
Rikitar da rem da em
Suna kama da juna kuma suna aiki daban. Yi amfani da shafin da ya dace da kowanne.
Lambobinka suna zama a na'urarka
Lissafin yana faruwa a cikin gida. Burauzarka ce ke amfani da ƙimarka kuma ba a aika komai ko'ina ba. Babu abin da za a goge daga baya kuma babu asusun da za a buɗe. Wannan ita ce hanya mai sauƙi don Canza rem zuwa px.
Taƙaitawa
Don Canza rem zuwa px a nan, rubuta girman a rem ka karanta shi a pixel nan da nan, ta amfani da dabarar px = rem × tushe. Tushen yana farawa a 16 px, tsohon ƙimar burauza, kuma za ka iya canza shi don ya dace da CSS ɗinka. Canjin yana riƙe da gwargwado, tun da rem ɗaya shi ne duk abin da girman rubutun tushe yake, kuma ba zai iya sanin saitunan mai karatunka ba, don haka adadin daidai ne kawai ga tushen da ke cikin filin. Teburin ƙima da aka fi amfani da su, daga 0.5 rem a 8 px zuwa 4 rem a 64 px, yana taimaka maka karanta takardar salo da kallo ɗaya. Ba a ɗora komai ba.