Mayar da px zuwa rem Pixels ↔ Root em Kyauta A kan layi Amintacce
Ku rubuta ƙima a px ku karanta ta a rem 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 px zuwa 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 |
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 masu zane da masu ƙirƙirar shirye-shirye ke canza px zuwa rem
Kayan aikin ƙira suna magana da pixel. Samfurin ƙira ya ce taken labari 32 px ne, tazarar da ke tsakanin sassa 48 px ne, maɓalli yana da padding na 16 px. Takardun salo, idan an rubuta su da kyau, suna magana da rem. Gibin da ke tsakanin waɗannan harsuna biyu shi ne inda wannan shafi yake: ka rubuta girma da pixel ka karanta shi da rem, don lambar da ka sanya a cikin CSS ta nuna abin da mai zane yake nufi. Canza px zuwa rem ƙaramin aiki ne, amma ana yin sa ɗaruruwan lokuta a rayuwar gidan yanar gizo, kuma tushe mara kyau yana mayar da tsari mai kyau zuwa wanda bai dace ba kaɗan a ko'ina a lokaci guda.
Dalilin damuwa da rem shi ne samun dama da sassauci. Rem ninki ne na girman rubutu na tushe, wanda burauza ke saitawa zuwa 16 px sai dai idan an faɗa mata wani abu daban, kuma mai karatu yana da 'yancin canza shi a cikin saitunansa. Tsarin shafi da aka rubuta da rem don haka yana riƙe siffarsa idan wanda idanunsa ba su da kyau ya ƙara girman rubutu na asali: rubutu, tazara da akwatuna suna girma tare. Tsarin da aka rubuta da pixel ba ya bi, kuma mai karatun da ya nemi rubutu mafi girma yana samun manyan haruffa a cikin akwatuna masu matsi, ko ma babu komai. Shi ya sa kusan kowane jagorar salo na zamani yana faɗin abu ɗaya: yi amfani da rem don rubutu da tazara.
Wannan shafi yana yin lissafin a cikin burauzarka. Ba a loda komai ba, kuma abin da canzawar ta dogara a kai, wato girman tushe, an rubuta shi a ƙasa kuma yana cikin fili da za ka iya canzawa, maimakon a ɗauka a bayan bayanka. A ƙasa za ka sami dabarar lissafi, teburin girma da aka fi amfani da su, dalilan da ya sa tushe yake da muhimmanci, tarkon da ke kama mutanen da ke canza px zuwa rem cikin gaggawa da gajeren jagora kan amfani da sakamakon a cikin takardun salo na gaske.
Dabarar lissafi da tushe
rem daidai yake da px a raba da tushe
Dabarar ita ce rabawa guda ɗaya: rem = px ÷ base. Da tushen da aka saba na 16 px, girma na 24 px ya zama 1.5 rem, 32 px ya zama 2 rem kuma 8 px ya zama 0.5 rem. Shafin yana nuna sakamakon yayin da kake rubutawa, kuma yana nuna tushen da ya yi amfani da shi, don haka layin 24 px = 1.5 rem (16 px) yana gaya maka daidai abin da aka ɗauka.
Daga ina 16 yake fitowa
Tushe yana farawa daga 16 px domin wannan ne burauza ke amfani da shi idan babu wanda ya faɗi wani abu daban. Ba doka ba ce ta yanar gizo; shi ne abin da aka saba na abin da aka saba, kuma ya tsaya tsayayye tsawon shekaru da yawa. Idan CSS ɗinka bai taɓa girman rubutu na tushe ba, 1 rem shi ne 16 px ga yawancin baƙi. Idan ya taɓa shi, tushe shi ne duk abin da ka saita.
Dabarar 62.5% da dalilin da mutane ke amfani da ita
Wasu takardun salo suna saita girman tushe zuwa 62.5%, wanda ke sa 1 rem ya yi daidai da 10 px a burauza ta asali, don 24 px ya zama 2.4 rem kawai kuma a yi lissafin cikin sauƙi a zuciya. Tana aiki, amma tana da tsada: shafin duka yanzu ya dogara da wannan kashi, kuma duk wani sashe da ke tsammanin 16 a matsayin tushe zai fito ƙarami sosai. Idan aikinka yana yin haka, rubuta 10 a filin tushe na wannan shafi, kuma kowace lamba za ta dace da CSS ɗinka.
Abin da canzawar ke riƙewa da abin da ba ta iya
Tana riƙe da gwargwado
Rem ɗaya shi ne duk abin da girman rubutu na tushe yake, don haka tsarin da aka rubuta da rem yana riƙe siffarsa idan wannan girman ya canza. Wannan shi ne cikakken dalilin rubuta shi haka. Lokacin da ka canza px zuwa rem, lambar da kake samu ita ce gwargwadon da ƙimar pixel ɗin ke da shi a tushen da ka zaɓa, yanzu an bayyana ta ta hanyar da ke girma da ƙanƙancewa.
Ba ta iya sanin saitunan mai karatunka ba
Lambar tana dogara gaba ɗaya a kan tushe. Idan CSS ɗinka ya saita girma daban a kan ɓangaren tushe, ko mai karatu ya canza girman rubutu na asali a burauzarsa, abin da mutane da yawa ke yi kuma suna da ikon yi, to 1 rem ba 16 px ba ne a gare su. Lambar da ke kan shafin daidai ce kawai ga tushen da ke cikin filin. Wannan ba aibi ba ne na kayan aikin sai dai yanayin naúrar: tana dangantaka, kuma naúrar da ke dangantaka ba ta da ƙima tsayayye da za a canza zuwa gare ta.
Zagayawa
Rabawa da 16 yana ba da sakamako mai tsabta ga girma na yau da kullum da yawa (16, 24, 32, 48, 64) da ƙananan adadi masu maimaituwa ga wasu (10 px shi ne 0.625 rem; 13 px shi ne 0.8125). Shafin yana ba da lambobi gwargwadon abin da lambar ke buƙata, kai kuma ka yanke shawarar nawa za ka riƙe a cikin takardar salo. Burauzoci suna sarrafa dogayen ƙananan adadi ba tare da matsala ba, amma ƙimar da aka zagaya kamar 0.8125rem ta fi sauƙin karantawa da kulawa fiye da wadda ke da lambobi goma.
Girma da aka fi amfani da su
Tebur a ƙasan shafin
A ƙarƙashin mai canzawa za ka sami tebur na girma da aka fi amfani da su: 8 px shi ne 0.5 rem, 10 px shi ne 0.625, 12 px shi ne 0.75, 14 px shi ne 0.875, 16 px shi ne 1, 18 px shi ne 1.125, 20 px shi ne 1.25, 24 px shi ne 1.5, 32 px shi ne 2, 48 px shi ne 3 kuma 64 px shi ne 4. Waɗannan su ne girman da suka fi fitowa a cikin ma'aunin rubutu da tsarin tazara, kuma samun su a gabanka yana ceton canzawa.
Ma'auni da aka gina a kan rem
Kyakkyawar al'ada ita ce zaɓar ƙaramin tarin ƙimar rem ka sake amfani da su: 0.5, 1, 1.5, 2, 3 da 4 don tazara, da 0.875, 1, 1.25, 1.5, 2 don rubutu. Masu zane suna kiran wannan ma'auni, kuma yana sa gidan yanar gizo ya kasance mai daidaito a gani. Idan samfurin ƙira ya ba ka ƙima mara daidaito kamar 22 px, yi amfani da mai canzawa don ganin cewa 1.375 rem ne, sannan ka yanke shawara ko za ka zagaya zuwa ƙima mafi kusa a ma'aunin naka.
Yadda ake canza px zuwa rem a nan
Rubuta ƙimar pixel
Shigar da girman da pixel a cikin filin farko. Ana karɓar ƙananan adadi, don haka 13.5 px yana aiki kamar 14.
Duba 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.
Kwafe ƙimar rem
Karanta lambar ka yi amfani da ita a cikin CSS ɗinka, tare da naúrar a rubuce bayanta: font-size: 1.5rem. Kada ka manta naúrar, domin lamba kaɗai tana nufin wani abu daban a yawancin kadarori.
Daga ina waɗannan naúrori suka fito
Pixel na CSS ba pixel na allonka ba ne
Lokacin da allon nuni suka daina samun yawa mai iya hasashe, shafin da aka auna da ainihin pixel ya zama shafin da ke ƙanƙancewa yayin da allo ke daɗa 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. Duk sauran abubuwa a wannan shafi an gina su a kan wannan. Em ta girmi yanar gizo: a cikin harufan ƙarfe ita ce faɗin toshen da aka jefa, mai suna bayan babban harafin M, kuma a CSS tana nufin girman rubutu da ke aiki, shi ya sa take canzawa yayin da kake ɗaiɗaice ɓangarori. An ƙara rem don guje wa daidai wannan: ita ce em ta ɓangaren tushe kuma ba ta ninkawa.
Dalilin da ya sa rem ta wanzu
Kafin rem, masu ƙirƙirar shirye-shirye sun auna komai da em ko kashi, kuma ɓangarorin da ke ɗaiɗaice suna ninka juna: jeri a cikin jeri a cikin jeri yana ƙanƙancewa ko girma da kowane mataki. Rem ta ba su tushen tunani guda ɗaya tsayayye, wato tushe, ta kuma kawar da ninkawa. Idan kana son kwatanta biyun, canza px zuwa em ka ga yadda ƙimar pixel ɗaya ke dogara da ɓangaren da take ciki.
Inda za ka haɗu da rem a aikace
Rubutu
Rubutun jiki yawanci 1 rem ne, taken labari 1.25 zuwa 3 rem, ƙananan rubutu 0.75 zuwa 0.875 rem. Rubuta su da rem yana ba mai karatu damar ƙara girman shafin gaba ɗaya ta hanyar canza saiti ɗaya a burauza.
Tazara da tsarin shafi
Margin, padding da giɓi a cikin rem suna kiyaye farin sarari daidai da rubutu. Idan rubutu ya yi girma, sararin da ke kewaye da shi ma yana girma, kuma tsarin yana kasancewa daidai maimakon cusa manyan haruffa cikin tsofaffin akwatuna.
Media queries
Wuraren karyewa da aka rubuta da em ko rem suna amsa girman rubutun mai karatu, don haka tsarin shafi yana komawa siffarsa ta kunkuntar da wuri ga wanda ya faɗaɗa rubutunsa. Gyara ne da ya cancanci sani, ko da yake pixel suna nan a wuraren karyewa da yawa.
Abin da za a bar shi da pixel
Iyaka siriri, inuwar akwati da ƙananan alamomi sau da yawa suna fi kyau da girman pixel tsayayye, domin iyaka na 0.0625rem da ke girma zuwa 0.1rem da babban rubutu ba ya taimaka wa kowa. Yi amfani da rem don abin da ya kamata ya yi girma da ƙanƙancewa, da pixel don abin da bai kamata ba.
Tarko lokacin da kake canza px zuwa rem
Mantawa cewa tushe ba koyaushe 16 ba ne
Idan aiki ya saita html { font-size: 62.5% }, ko ya yi amfani da girman tushe mai sassauci, mai ninkawa daban ne. Duba takardar salo kafin ka amince da lamba daga kowane mai canzawa, har da wannan.
Canza girman tushe kansa
Idan ka saita girman tushe da pixel, saitin burauzar mai karatu yana shan gaba kuma amfanin rem ya ɓace. Saita tushe da kashi, ko ka bar shi, don a mutunta zaɓin mai amfani.
Amfani da rem a cikin sashe da ya saita girman rubutunsa
Rem koyaushe tana nuni zuwa tushe, ba sashen ba. Maɓalli mai girman rubutu na 14 px da padding na 1rem yana da padding da ba ya bin rubutun maɓallin kansa. Idan kana son tazara da ke bin rubutun ɓangaren, wannan aikin em ne.
Haɗa naúrori ba tare da shiri ba
Takardar salo da ke amfani da px don margin ɗaya, rem don na gaba da em don na uku tana da wahalar fahimta. Zaɓi ƙa'ida: rem don rubutu da tazara, pixel don iyaka da inuwa, ka riƙe ta.
Tambayoyin da mutane ke yi kafin su canza
Rem nawa ne 16 px?
Ɗaya, a burauza ta asali. Goma sha shida a raba da tushe na goma sha shida.
Shin rem ta fi px?
Ga rubutu da tazara, ita ce zaɓi mafi kyau a yawancin ayyuka, domin tana mutunta saitunan mai karatu. Pixel suna nan daidai ga abubuwan da bai kamata su yi girma da ƙanƙancewa ba.
Me ya sa sakamakona ya bambanta da wani shafi?
Wataƙila tushe daban. Duba filin: wasu kayan aiki suna ɗaukar 10, wasu 16, wasu 14. Wannan shafi yana nuna tushe kusa da sakamakon.
Dole ne in zagaya?
A'a. Burauzoci suna karɓar dogayen ƙananan adadi. Zagaya ne kawai don sauƙin karantawa.
Ana loda lambata?
A'a. Lissafin yana gudana a cikin burauzarka kuma ba a aika komai ko'ina ba.
Ta yaya zan koma baya?
Da rem zuwa px, wanda ke ninkawa maimakon rabawa.
Zaɓi cikin hikima lokacin da kake canza px zuwa rem
Yanke shawara kan tushe ga aikin ka riƙe shi
Duk abin da ka zaɓa, ka mayar da shi shawara ka rubuta shi a cikin takardun aikin. Ƙungiyar da ba ta yarda kan tushe tana samar da sassan da ba su dace da juna ba.
Canza a lokacin ƙira, ba a minti na ƙarshe ba
Idan ka canza px zuwa rem yayin karanta samfurin ƙira, kana gina ma'aunin cikin ƙirar kuma kana lura da ƙimar da ba ta daidaita da wuri. Idan ka yi shi a ƙarshe, kana gano su a matsayin tarin lambobi marasa daidaito.
Yi la'akari da naúrorin viewport ma
Ga taken labari da dole ne su cika allo, px zuwa vw yana bayyana girma a matsayin rabon viewport. Yana girma da ƙanƙancewa daban da rem, kuma ana haɗa biyun sau da yawa.
Al'adun da ke sa canza px zuwa rem ya fi sauƙi
Ajiye tebur na canzawa a zuciyarka
Da tushe na 16, 'yan alamomi suna rufe yawancin aikin: 4 px shi ne 0.25 rem, 8 px shi ne 0.5, 12 px shi ne 0.75, 16 px shi ne 1, 24 px shi ne 1.5 kuma 32 px shi ne 2. Idan samfurin ƙira ya ba ka ƙima tsakaninsu, za ka iya kimantawa kafin ka canza px zuwa rem a shafin, ka yi amfani da mai canzawa kawai don tabbatarwa. Bayan 'yan makonni za ka san teburin ba tare da dubawa ba.
Bari tsarin ƙira ya yi aikin
Idan ƙungiyarka tana ajiye alamomin ƙira, kamar spacing-2 ko font-lg, ajiye su da rem sau ɗaya, ka bar kowa ya yi nuni zuwa sunayen. Sannan babu wanda zai sake buƙatar canza px zuwa rem, kuma ana canza ma'auni a wuri guda. Mai canzawa kayan aiki ne da kake amfani da shi lokacin da kake rubuta alamomin, ba lokacin da kake amfani da su ba.
Rubuta ƙimar pixel a cikin sharhi
Layi kamar padding: 1.25rem; /* 20px */ yana kashe haruffa kaɗan kuma yana ceton mai ƙirƙirar shirye-shirye na gaba daga neman kalkuleta. Yana kuma rubuta tushen da ka ɗauka, wanda ke taimakawa idan aka canza girman tushe daga baya.
Gwada da canjin saitin burauza
Shaidar cewa an gina shafi da rem ita ce yana tsira daga girman rubutu na asali mafi girma. Canza saitin a burauzarka, sake loda ka duba. Sassan da suka karye su ne waɗanda aka bar wani abu da pixel ko inda tsayi tsayayye ya yanke rubutu.
Masu canzawa masu alaƙa
Iyali ɗaya na kayan aiki yana rufe canzawa maƙwabta. Don komawa zuwa pixel, yi amfani da rem zuwa px. Ga girma masu dangantaka da ɓangaren, akwai px zuwa em da em zuwa px, kuma ga girma masu dangantaka da allo, px zuwa vw da vw zuwa px. Idan aikinka ya haɗa da launuka da girma, HEX zuwa RGB, RGB zuwa HEX da HEX zuwa HSL suna sarrafa rubuce-rubucen takardar salo.
Misali da aka yi aiki da shi
Ka ɗauka samfurin ƙira ya ba da taken kati a 28 px, padding na kati 20 px da giɓi na 12 px tsakanin kati, kuma aikinka yana amfani da tushe na asali na 16 px. Ka rubuta 28 ka karanta 1.75 rem, ka rubuta 20 ka karanta 1.25 rem, ka rubuta 12 ka karanta 0.75 rem. A cikin takardar salo ka rubuta font-size: 1.75rem, padding: 1.25rem da gap: 0.75rem. Baƙo da ya ƙara girman rubutun burauza zuwa 20 px yana ganin kati ɗaya, an ƙara shi da kwata: taken 35 px, padding 25 px da giɓi 15 px, duka daidai gwargwado. Da ka rubuta pixel, taken zai tsaya a 28 kuma katin zai yi kama da bai dace ba.
Ɗan jerin dubawa
Kafin canzawa
Gano tushen da CSS ɗinka ke amfani da shi. Yanke shawarar girman da ya kamata su yi girma da ƙanƙancewa da waɗanda bai kamata ba.
Yayin canzawa
Rubuta ƙimar pixel, duba tushen da aka nuna kusa da sakamakon ka kwafi lambar rem tare da naúrarta.
Bayan canzawa
Gwada shafin da girman rubutu na asali mafi girma a burauza, ka nemi akwatunan da ba sa ɗaukar rubutunsu.
Kura-kurai na gama gari
Zaton 1 rem koyaushe 16 px ne
Haka yake ne kawai lokacin da babu wanda ya canza girman tushe, kuma wasu masu karatu sun canza. Rubuta tsarin shafi ta yadda zai yi aiki a wasu girma ma.
Saita girman tushe da pixel
Yana shan gaban zaɓin mai karatu. Yi amfani da kashi, ko kada ka saita shi.
Canza komai
Ba kowane girma ne ya kamata ya yi girma da ƙanƙancewa ba. Bar iyaka da inuwa da pixel.
Lambobinka suna nan a na'urarka
Lissafin yana faruwa a cikin na'urarka. Burauzarka ce ke amfani da ƙimarka kuma ba a aika komai ko'ina ba. Babu abin da za a share daga baya kuma babu asusu da za a ƙirƙira. Wannan ita ce hanya mai sauƙi ta canza px zuwa rem.
Taƙaitawa
Don canza px zuwa rem a nan, rubuta girman da pixel ka karanta shi da rem nan take, ta amfani da dabarar rem = px ÷ base. Tushe yana farawa daga 16 px, abin da burauza ke amfani da shi a asali, kuma za ka iya canza shi don ya dace da CSS ɗinka. Canzawar tana riƙe da gwargwado: tsarin da aka rubuta da rem yana riƙe siffarsa idan girman rubutu na tushe ya canza. Ba ta iya sanin saitunan mai karatunka ba, don haka lambar daidai ce kawai ga tushen da ke cikin filin. Girman da aka fi amfani da su a cikin teburin da ke ƙasan mai canzawa, daga 8 px a 0.5 rem zuwa 64 px a 4 rem, suna ceton ka daga maimaita lissafin. Ba a loda komai ba.