Mayar da em zuwa px Em ↔ Pixels Kyauta A kan layi Amintacce
Ku rubuta ƙima a em 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 em zuwa px
| em | 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 ake canza em zuwa px
Takardar salo tana cewa margin-bottom: 0.75em a kan taken labari, padding: 0.4em 0.9em a kan maɓalli, da line-height na 1.3em a kan wani toshe na rubutu. Waɗannan ƙima ne masu kyau kuma masu sassauci, amma da wuya a iya hasaso su. Pixel nawa ne wannan margin ɗin? Shin padding ɗin maɓallin ya yi daidai da 6 px da 14 px da ke cikin fayil ɗin ƙira? Don ka gano, sai ka canza em zuwa px: ka ninka da girman rubutu da em ɗin yake nuni zuwa gare shi, sannan ka karanta amsar a cikin naúrar da kayan aikin ƙira ke amfani da ita. Wannan tambaya ce da masu ƙirƙirar shirye-shirye ke yi lokacin da suke duba lambobi, suna kwatanta ginin da samfurin ƙira, suna gyara matsalar tazara, ko suna ba da kammalallen sashe ga wanda ke tunani da pixel.
Em ita ce naúrar da ta fi wahalar canzawa a CSS, domin ba ta da ƙima ta tsayayye. Em shi ne girman rubutu da ke aiki a wurin da ake amfani da ƙimar, ko, ga kadarar font-size kanta, na iyayen. Don haka 1.5 em na iya zama 24 px a wuri ɗaya da 36 px a wani, a cikin takardar salo ɗaya, daga ƙa'ida ɗaya. Don haka mai canzawa ba ya zato. Yana tambayar girman rubutu da em ɗin yake nuni zuwa gare shi, yana nuna shi kusa da amsar kuma yana lissafi da shi. Idan ba ka san girman ba, sassan da ke ƙasa suna bayanin yadda za ka same shi a cikin burauzarka.
Lissafin yana gudana a cikin burauzarka kuma ba a loda komai ba. A ƙasa za ka sami dabarar lissafi, yadda ake samun ainihin tushe, abin da canzawar ke riƙewa da abin da ba ta iya riƙewa, yadda ƙimar em masu ɗaiɗaice ke ninkawa, lokacin da masu ƙirƙirar shirye-shirye ke buƙatar canza em zuwa px, da wasu al'adu da ke sa takardar salo ta em ta kasance mai sauƙin fahimta.
Dabarar lissafi da tushe
px daidai yake da em ninka girman rubutu
Dabarar ita ce ninkawa guda ɗaya: px = em × base. Idan tushe 16 px ne, 1.5 em ya zama 24 px, 0.75 em ya zama 12 px kuma 2 em ya zama 32 px. Shafin yana buga tushen kusa da sakamakon, don haka layi kamar 1.5 em = 24 px (16 px) yana faɗin daidai abin da aka ɗauka. Idan girman rubutu na ɓangaren shafin 20 px ne, rubuta 20, kuma 1.5 em ya zama 30 px.
Samun tushe a cikin burauzarka
Buɗe kayan aikin masu ƙirƙirar shirye-shirye, zaɓi ɓangaren shafin ka duba girman rubutunsa da aka ƙididdiga. Wannan shi ne lambar da za ka rubuta a filin tushe ga kowace kadara banda font-size. Ga font-size kanta, zaɓi iyayen ka karanta girmansa da aka ƙididdiga a maimakon haka. Yana ɗaukar daƙiƙa kaɗan kuma yana kawar da zato gaba ɗaya.
Idan ba ka iya ganin shafin
Idan kana karanta lambobi ba tare da shafin ba, bi jerin girman rubutu daga sama daga ɓangaren shafin: font-size nasa idan yana da shi, in ba haka ba na iyayensa, da sauransu har zuwa tushe, wanda yake 16 px sai dai idan takardar salo ko mai karatu ya canza shi. Inda aka bayar da girma a cikin em, ninka a kan jerin. Wannan yana gajiyarwa, shi ya sa yawancin ƙungiyoyi ke zaɓar rem don girman rubutu.
Abin da canzawar ke riƙewa da abin da ba ta iya
Tana riƙe da gwargwado ga rubutu
Sakamakon shi ne girman pixel da em ɗin yake wakilta a tushen da ka rubuta. Idan an rubuta shi da em, sarari ko girma yana bin rubutun da yake na shi, kuma canzawar tana nuna abin da hakan yake nufi ga wani girman rubutu na musamman.
Ba za ta iya ba da amsa ɗaya ga shafin ba
Wannan shi ne wanda ya kamata a yi hankali da shi: em yana dangantaka da girman rubutu na ɓangaren shafin kansa, ko, ga font-size, na iyayensa, ba na tushe ba. Don haka 1.5 em ɗaya yana zama 24 px a cikin ɓangare na 16 px da 36 px a cikin na 24 px, kuma em a cikin em yana ninkawa. Adadin da ke kan shafin daidai ne ga tushen da ke cikin filin kuma ba ga wani abu daban ba. Idan kana son lamba ɗaya da ke aiki a ko'ina, wannan shi ne abin da rem ke yi. Don kwatanta biyun, canza rem zuwa px ka ga yadda naúrar da ke dangantaka da tushe ke tsayawa tsayayye.
Zagayawa
Ninkawa da tushe na cikakken adadi yana ba da sakamako daidai ga yawancin ƙima. Idan tushen ƙaramin adadi ne, misali 13.5 px, ƙima kamar 1.2 em tana ba da 16.2 px. Burauzoci suna iya sarrafa pixel na ɓangarori, amma idan kana buƙatar cikakkun pixel, don siririn iyaka ko alama a kan grid, zagaya da gangan ka duba yadda yake.
Yadda ƙimar em masu ɗaiɗaice ke ninkawa
Jeri a cikin jeri
Ɗauki shafi wanda rubutun jikinsa 16 px ne. Jeri yana da font-size: 0.875em, wato 14 px. Abubuwan da ke cikinsa ma suna da font-size: 0.875em, wato 14 × 0.875 = 12.25 px. Jeri a cikin wani abu yana sake yin haka: 10.7 px. Zurfin matakai uku kuma rubutun ya zama ƙarami sosai, kuma babu wanda ya yanke shawarar hakan. Lokacin da ka canza em zuwa px don wani sashe kuma amsar ta yi kama da ƙarama, ɗaiɗaice shi ne abu na farko da za ka duba.
Hawa kan jerin
Don sanin ainihin girman pixel na em mai ɗaiɗaice, ninka tushen da kowace ƙima a hanyar saukowa: 16 × 0.875 × 0.875 = 12.25. Mai canzawa yana yin mataki ɗaya a lokaci guda. Ga jeri, canza ƙima ta farko, yi amfani da amsar a matsayin tushe na ta biyu ka ci gaba. Wannan lissafi ɗaya ne da burauza ke yi.
Yadda za a hana ci gaba da ninkawa
Yi amfani da rem don girman rubutu, ta yadda kowane girma zai nuna zuwa tushe, ka kuma bar em don tazara, ta yadda padding da margin za su bi rubutun ɓangaren nasu. A wannan haɗin, babu abin da ke ninkawa, kuma ƙimar em da ka canza koyaushe suna dangantaka da girman rubutu da za ka iya karantawa nan take.
Ƙimar da aka fi amfani da su
Tebur a ƙasan shafin
Shafin ya haɗa da tebur na ƙimar pixel da adadin em da aka fi amfani da su ke dacewa da su a tushen da ka saita: 0.5 em 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. A tushen da aka saba, waɗannan lambobin iri ɗaya ne da na rem. Idan ka canza tushe, teburin yana canzawa tare da shi, wanda hanya ce mai kyau ta ganin abin da em yake yi a zahiri.
Gwada tushe biyu gefe da gefe
Rubuta 1.5 da tushe na 14, sannan da tushe na 20. Za ka sami pixel 21 da 30. Wannan shi ne cikakken bambancin da ke tsakanin em da rem a gwaji ɗaya: adadi ɗaya, ɓangarori biyu, girma biyu.
Yadda ake canza em zuwa px a nan
Rubuta ƙimar em
Shigar da girman a cikin em a filin farko. Ana karɓar ƙaramin adadi, don haka 0.714 yana aiki kamar 1.
Saita girman rubutu da em ɗin yake nuni zuwa gare shi
Rubuta girman rubutu na ɓangaren shafin, ko na iyayensa idan kadarar ita ce font-size. Idan ba ka da tabbas, bar 16 ka ɗauki sakamakon a matsayin kimantawa.
Karanta ƙimar pixel
Amsar tana bayyana nan take, tare da tushen da aka nuna kusa da ita. Kwafe ta cikin bayanan kula ko ka kwatanta ta da fayil ɗin ƙira.
Daga ina waɗannan naúrori suka fito
Em
Em ya girmi yanar gizo. A cikin harufan ƙarfe ita ce faɗin toshen da aka jefa, mai suna bayan babban harafin M, kuma masu zane-zanen haruffa har yanzu suna magana game da em dash da em space. A CSS tana nufin girman rubutu da ke aiki, shi ya sa take canzawa yayin da kake ɗaiɗaice ɓangarori.
Pixel da rem
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 da ake dubawa: kusan 1/96 na inci da ake gani daga nisan karatu mai daɗi. An ƙara rem don guje wa ninkawar em: shi ne em na ɓangaren tushe kuma ba ya ninkawa har abada. Idan kana aiki da biyun, canza px zuwa em don komawa ta wata hanyar.
Lokacin da masu ƙirƙirar shirye-shirye ke canza em zuwa px
Duba gini da fayil ɗin ƙira
Mai zane yana ba da fayil da pixel, kuma lambobin suna da em. Don ka duba ko shafin ya yi daidai, kana canza em zuwa px ta amfani da girman rubutu na kowane sashe. Maɓalli mai lakabi na 14 px da padding na 0.714em 1.429em ya kamata ya fito 10 px da 20 px, kuma idan ƙirar ta ce 12 da 24, ɗaya daga cikinsu kuskure ne.
Gyara matsalar tazara
Idan tazara ta yi kama da girma ko ƙarami sosai, dalilin yawanci ƙimar em ce da ke nuni zuwa rubutu mafi girma ko ƙarami fiye da yadda ka zata. Canza ta da girman rubutun ɓangaren da aka ƙididdiga yana gaya maka nan take ko lissafin ne matsalar.
Karanta lambobin da ba ka saba da su ba
Takardun salo da aka gada suna cike da ƙimar em wadanda dole ne ka sake gina girman pixel nasu. Canza kaɗan daga cikin manyan, tare da tushen da ya dace, yana ba ka taswirar ƙirar.
Rubuta takardu da gwaje-gwaje
Mutanen da ke gwada shafi suna bayyana abin da suke gani da pixel. Mai ƙirƙirar shirye-shirye da ya ce padding 0.9em ne ba shi da ma'ana sosai ga mai gwaji; 12.6 px yana da ma'ana. Canzawa yana sa bangarorin biyu su fahimci juna.
Tarko lokacin da kake canza em zuwa px
Amfani da tushen da bai dace ba
Kuskuren da aka fi yi. Ga font-size, yi amfani da girman iyayen; ga duk sauran kadarori, na ɓangaren kansa. Duba kadarar kafin ka rubuta tushen.
Mantawa da iyaye a cikin em
Idan girman iyayen shi kansa yana cikin em, dole ne ka bi jerin. Yi amfani da ƙimar da aka ƙididdiga daga kayan aikin masu ƙirƙirar shirye-shirye don gajarta hanya.
Zaton allo yana nuna pixel iri ɗaya
Pixel na CSS ba pixel na na'ura ba ne. A kan allo mai yawa sosai, pixel na CSS ɗaya na iya zama pixel na na'ura biyu ko uku. Canzawar tana ba da pixel na CSS, naúrar da kayan aikin ƙira da takardar salo ke rabawa.
Ɗaukar amsar a matsayin alƙawari
Idan mai karatu ya faɗaɗa rubutu ko aka sake amfani da sashen da wani girman rubutu, pixel suna canzawa, kamar yadda ya kamata. Lambar da aka canza tana bayyana yanayi ɗaya, ba duka ba.
Tambayoyin da mutane ke yi kafin su canza
Pixel nawa ne 1 em?
Kamar girman rubutu da ke aiki: 16 px don rubutun jiki na yau da kullum a tushen da aka saba, 24 px a cikin ɓangare na 24 px.
Pixel nawa ne 2 em?
Sau biyu na girman rubutu da ke aiki. A 16 px wannan shi ne 32 px.
Me ya sa burauzata ke nuna wani abu daban?
Ainihin girman rubutu na ɓangaren shafin ya bambanta da tushen da ka rubuta. Karanta girman rubutu da aka ƙididdiga a cikin kayan aikin masu ƙirƙirar shirye-shirye.
Shin em daidai yake da rem?
A'a. Em yana dangantaka da ɓangaren shafi, rem kuma da tushe.
Shin 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 px zuwa em, wanda ke rarraba maimakon ninkawa.
Al'adu da ke sa takardar salo ta em ta kasance mai sauƙin fahimta
Yi sharhi kan tushe
Layi kamar padding: 0.75em 1.25em; /* 12px 20px at 16px */ yana kashe haruffa kaɗan kuma yana ceton mai karatu na gaba daga canzawa. Yana rubuta tushen da ka ɗauka.
Saita girman rubutu sau ɗaya ga kowane sashe
Bayyana girman rubutu na sashen a ɓangaren tushensa, ka kuma yi nuni zuwa gare shi da em a ciki. Tushen sai ya zama iri ɗaya ga kowace ƙima a cikin sashen, kuma za ka iya canza em zuwa px a kansa da kwarin gwiwa.
Bar em don tazara, rem don rubutu
Wannan rabon shi ne wanda yawancin takardun salo ke zaɓa, kuma yana sa lissafin ya zama mai sauƙi. Don girma masu dangantaka da allo, px zuwa vw da vw zuwa px su ne kayan aikin.
Gwada da wani girman rubutu daban
Ƙara girman rubutu na asali a burauzarka ka duba shafin. Idan tazara tana bin rubutun, ƙimar em suna aiki. Idan ba haka ba, wani abu an bar shi da pixel.
Hanya don lokuta masu wahala
Yi aiki daga waje zuwa ciki
Lokacin da sashe yake zurfi a cikin wasu kuma ƙimar em nasa suna da rikitarwa, fara daga ɓangaren waje wanda ka san girmansa ka yi aiki zuwa ciki, kana canzawa mataki ɗaya a lokaci guda. Rubuta kowane girman pixel a cikin bayanan kula yayin da kake tafiya. Bayan matakai biyu ko uku duka jerin yana kan takarda, kuma za ka iya ganin daidai daga ina lamba mai ban mamaki ta fito. Yana ɗaukar minti ɗaya kuma yana maye gurbin awa ɗaya na zato.
Yanke shawara ko za a sauƙaƙa
Idan dole ne ka canza em zuwa px ta matakai huɗu don fahimtar tsari, takardar salo tana gaya maka wani abu. Yi la'akari da matsar da girman rubutu zuwa rem, ta yadda kowane ɗaya zai nuna zuwa tushe, ka bar tazara kaɗai a cikin em. Shafin zai yi kama ɗaya kuma zai fi sauƙin karantawa a shekara mai zuwa.
Masu canzawa masu alaƙa
Iyali ɗaya na kayan aiki yana rufe canzawa maƙwabta. Don komawa zuwa em, yi amfani da px zuwa em. Ga girma masu dangantaka da tushe, akwai px zuwa rem da rem zuwa px, kuma ga girma masu dangantaka da allo, px zuwa vw da vw zuwa px. Ga launuka na takardar salo ɗaya, HEX zuwa RGB da RGB zuwa HEX suna sarrafa rubuce-rubucen.
Misali da aka yi aiki da shi
Ka ɗauka kana duba sashen maɓalli. Lakabin 14 px ne, CSS ɗin yana cewa padding: 0.714em 1.429em da tazara na 0.5em tsakanin alama da lakabi. Ka rubuta 14 a matsayin tushe, sannan 0.714 ka karanta 10 px, 1.429 ka karanta 20 px, 0.5 ka karanta 7 px. Fayil ɗin ƙira yana cewa 10, 20 da 8. Biyu cikin uku sun yi daidai, don haka ka duba tazarar: 8 px a tushen 14 zai zama 0.571 em, kuma wani ya zagaya shi zuwa 0.5. Ka tayar da shi a cikin bita, kuma gyaran lamba ɗaya ne.
Ɗan jerin dubawa
Kafin canzawa
Nemo girman rubutu da em ɗin yake nuni zuwa gare shi, daga kayan aikin masu ƙirƙirar shirye-shirye ko daga jerin girman rubutu a cikin lambobin.
Yayin canzawa
Rubuta ƙimar em, saita tushe ka karanta pixel, kana lura da tushen da aka nuna kusa da sakamakon.
Bayan canzawa
Kwatanta da fayil ɗin ƙira. Idan lambobin sun bambanta, duba tushen kafin ka yi zargin lambobin.
Kura-kurai na gama gari
Amfani da 16 ba tare da dubawa ba
Daidai ne kawai lokacin da girman rubutun ɓangaren shafin 16 px ne.
Rikita em da rem
Suna kama da juna kuma suna aiki daban. Yi amfani da shafin da ya dace ga kowanne.
Mantawa cewa em yana ninkawa
Ƙima a cikin ɓangare mai ɗaiɗaice tana dangantaka da girman da ba ka gani ba. Bi jerin.
Lambobinka suna nan a na'urarka
Lissafin yana gudana 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 em zuwa px.
Taƙaitawa
Don canza em zuwa px a nan, rubuta girman a cikin em da girman rubutu da yake nuni zuwa gare shi, ka karanta sakamakon da pixel nan take, ta amfani da dabarar px = em × base. Canzawar tana riƙe da gwargwado dangane da girman rubutu da ke aiki a wurin da ake amfani da ƙimar. Ba za ta iya ba da amsa ɗaya ga shafi ba: em yana dangantaka da ɓangaren shafin kansa, ko da iyayen ga font-size, don haka 1.5 em ɗaya yana zama 24 px a cikin ɓangare na 16 px da 36 px a cikin na 24 px, kuma em a cikin em yana ninkawa. Don lamba ɗaya da ke aiki a ko'ina, yi amfani da rem. Ba a loda komai ba.