I-convert ang em sa px Em ↔ Pixels Libre Online Ligtas

Bakit mo kino-convert ang em sa px

Sinasabi ng isang stylesheet na margin-bottom: 0.75em sa isang heading, at padding: 0.4em 0.9em sa isang button, at line-height na 1.3em sa isang bloke ng teksto. Mahusay at nababagay na mga halaga ang mga ito, at halos imposibleng mailarawan sa isip. Ilang pixel ba ang margin na iyon? Tugma ba ang padding ng button sa 6 px at 14 px sa design file? Para malaman, kino-convert mo ang em sa px: pinaparami mo sa laki ng font na tinutukoy ng em, at binabasa ang sagot sa yunit na ginagamit ng mga design tool. Tanong ito ng mga developer kapag nirerepaso nila ang code, sinusuri ang build laban sa mockup, nagde-debug ng problema sa espasyo o ibinibigay ang natapos na component sa taong pixel ang iniisip.

Ang em ang pinakamahirap i-convert na yunit sa CSS, dahil wala itong takdang halaga. Ang em ay ang laki ng font na may bisa kung saan ginagamit ang halaga, o, para sa property na font-size mismo, ang sa magulang. Kaya ang 1.5 em ay maaaring 24 px sa isang lugar at 36 px sa iba, sa parehong stylesheet, mula sa parehong tuntunin. Kaya hindi nanghuhula ang converter. Hinihingi nito ang laki ng font na tinutukoy ng em, ipinapakita ito sa tabi ng sagot at kinukuwenta ito. Kung hindi mo alam ang laki, ipinapaliwanag ng mga seksyon sa ibaba kung paano ito hanapin sa browser mo.

Nangyayari sa iyong browser ang kuwenta at walang ina-upload. Sa ibaba makikita mo ang pormula, kung paano hanapin ang tamang base, ang pinananatili ng conversion at ang hindi nito kayang panatilihin, kung paano nagpaparami ang magkakasamang halaga ng em, kailan kailangang i-convert ng mga developer ang em sa px, at ilang ugaling nagpapanatiling maintindihan ang stylesheet na nakabatay sa em.

Ang pormula at ang base

Ang px ay katumbas ng em na pinarami sa laki ng font

Isang pagpaparami ang pormula: px = em × base. Sa base na 16 px, ang 1.5 em ay nagiging 24 px, ang 0.75 em ay nagiging 12 px at ang 2 em ay nagiging 32 px. Ipinapakita ng pahina ang base sa tabi ng resulta, kaya ang linyang gaya ng 1.5 em = 24 px (16 px) ay eksaktong nagsasabi ng ipinalagay. Kung 20 px ang laki ng font ng elemento, i-type ang 20, at ang 1.5 em ay nagiging 30 px.

Paghahanap ng base sa browser mo

Buksan ang developer tools, piliin ang elemento at tingnan ang computed font size nito. Iyon ang numerong ita-type sa field ng base para sa anumang property maliban sa font-size. Para sa font-size mismo, piliin ang magulang at basahin sa halip ang computed size nito. Ilang segundo lang ito at ganap nitong inaalis ang paghula.

Kapag hindi mo makita ang pahina

Kung nagbabasa ka ng code nang wala ang pahina, sundan paitaas ang kadena ng mga laki ng font mula sa elemento: ang sarili nitong font-size kung mayroon, kung wala ay ang sa magulang nito, at iba pa hanggang sa ugat, na 16 px maliban kung binago ito ng stylesheet o ng mambabasa. Kung saan ibinigay ang laki sa em, magparami sa kahabaan ng kadena. Nakakapagod ito, kaya karamihan ng mga koponan ay nagpapasyang gumamit ng rem para sa mga laki ng font.

Ang pinananatili ng conversion at ang hindi nito kaya

Pinananatili nito ang proporsyon sa teksto

Ang resulta ay ang laki sa pixel na kinakatawan ng em sa base na inilagay mo. Kapag isinulat sa em, ang espasyo o laki ay sumusunod sa tekstong kinabibilangan nito, at ipinapakita ng conversion kung ano ang katumbas nito para sa isang partikular na laki ng teksto.

Hindi ito makapagbibigay ng iisang sagot para sa pahina

Ito ang dapat ingatan: ang em ay kaugnay ng laki ng font ng mismong elemento, o, para sa font-size, ng magulang nito, hindi ng ugat. Kaya ang parehong 1.5 em ay 24 px sa loob ng elementong 16 px at 36 px sa loob ng elementong 24 px, at ang em sa loob ng em ay nagpaparami. Tama ang bilang sa pahina para sa base sa field at sa wala nang iba. Kung gusto mo ng iisang numerong tumatagal saanman, para doon ang rem. Para ihambing ang dalawa, i-convert ang rem sa px at tingnan kung paano nananatiling takda ang yunit na kaugnay ng ugat.

Pag-round

Ang pagpaparami sa base na buong numero ay nagbibigay ng eksaktong resulta para sa karamihan ng halaga. Kung desimal ang base, halimbawa 13.5 px, ang halagang gaya ng 1.2 em ay nagbibigay ng 16.2 px. Kayang hawakan ng mga browser ang mga fractional na pixel, ngunit kapag kailangan mo ng buong pixel, para sa hairline na border o icon sa grid, mag-round nang sinasadya at suriin ang hitsura.

Paano nagpaparami ang magkakasamang halaga ng em

Isang listahan sa loob ng listahan

Kumuha ng pahinang 16 px ang teksto ng katawan. May font-size: 0.875em ang isang listahan, na 14 px. Mayroon ding font-size: 0.875em ang mga aytem sa loob nito, na 14 × 0.875 = 12.25 px. Inuulit ito ng listahan sa loob ng aytem: 10.7 px. Sa tatlong antas ng lalim, maliit na ang teksto, at walang nagpasya na dapat ganoon. Kapag kino-convert mo ang em sa px para sa isang component at mukhang masyadong maliit ang sagot, ang nesting ang unang dapat suriin.

Pag-akyat sa kadena

Para malaman ang tunay na laki sa pixel ng magkakasamang em, pagparamihin ang base sa bawat halaga habang bumababa: 16 × 0.875 × 0.875 = 12.25. Isang hakbang bawat pagkakataon ang ginagawa ng converter. Para sa kadena, i-convert ang unang halaga, gamitin ang sagot bilang base para sa ikalawa at magpatuloy. Ito ang parehong aritmetikang ginagawa ng browser.

Paano ito pigilan sa pagdami

Gumamit ng rem para sa mga laki ng font, para ang bawat laki ay tumutukoy sa ugat, at panatilihin ang em para sa espasyo, para sundan ng padding at margin ang teksto ng sarili nilang elemento. Sa kombinasyong iyon, walang nagpaparami, at ang mga halaga ng em na kino-convert mo ay laging kaugnay ng laki ng font na agad mong mababasa.

Mga karaniwang halaga

Ang talahanayan sa paanan ng pahina

Kasama sa pahina ang talahanayan ng mga halaga sa pixel na katumbas ng mga karaniwang bilang ng em sa base na itinakda mo: ang 0.5 em ay 8 px, ang 0.625 ay 10, ang 0.75 ay 12, ang 0.875 ay 14, ang 1 ay 16, ang 1.125 ay 18, ang 1.25 ay 20, ang 1.5 ay 24, ang 2 ay 32, ang 3 ay 48 at ang 4 ay 64. Sa default na base, ito ang parehong mga numero tulad ng sa rem. Baguhin ang base at nagbabago kasama nito ang talahanayan, na mahusay na paraan para makita kung ano talaga ang ginagawa ng em.

Subukan ang dalawang base nang magkatabi

I-type ang 1.5 na may base na 14, saka may base na 20. Makakakuha ka ng 21 at 30 pixel. Iyon ang buong pagkakaiba ng em at rem sa isang eksperimento: ang parehong bilang, dalawang elemento, dalawang laki.

Paano i-convert ang em sa px rito

I-type ang halaga ng em

Ilagay ang laki sa em sa unang field. Tinatanggap ang mga desimal, kaya gumagana ang 0.714 gaya ng 1.

Itakda ang laki ng font na tinutukoy ng em

I-type ang laki ng font ng elemento, o ng magulang nito kung font-size ang property. Kung hindi ka sigurado, iwanan ang 16 at ituring na pagtataya ang resulta.

Basahin ang halaga sa pixel

Lumilitaw agad ang sagot, na ipinapakita ang base sa tabi nito. Kopyahin ito sa mga tala mo o ihambing sa design file.

Saan nanggaling ang mga yunit na ito

Ang em

Mas matanda ang em kaysa sa web. Sa metal na uri, ito ang lapad ng binuong bloke, na ipinangalan sa malaking titik na M, at nagsasalita pa rin ang mga typographer ng em dash at em space. Sa CSS, ibig sabihin nito ay ang laki ng font na may bisa, kaya nagbabago ito habang nagsasama-sama ang mga elemento.

Ang pixel at ang rem

Nang tumigil sa pagkakaroon ng mahuhulaang densidad ang mga display, ang pahinang sinusukat sa totoong pixel ay naging pahinang lumiliit habang lumilinaw ang mga screen. Kaya muling binigyang-kahulugan ang CSS pixel bilang sanggunian na haba: humigit-kumulang 1/96 ng isang pulgada na nakikita sa komportableng distansya ng pagbasa. Idinagdag ang rem para makatakas sa pagdami ng em: ito ang em ng elementong ugat at hindi kailanman nagpaparami. Kung gumagamit ka ng pareho, i-convert ang px sa em para pumunta sa kabilang direksyon.

Kailan kino-convert ng mga developer ang em sa px

Pagsuri ng build laban sa design file

Nagbibigay ang designer ng file sa pixel, at nasa em ang code. Para tiyaking tugma ang pahina, kino-convert mo ang em sa px gamit ang laki ng font ng bawat component. Ang button na may label na 14 px at padding na 0.714em 1.429em ay dapat lumabas sa 10 px at 20 px, at kung 12 at 24 ang sinasabi ng design, mali ang isa sa kanila.

Pag-debug ng espasyo

Kapag mukhang masyadong malaki o maliit ang puwang, karaniwang ang sanhi ay halaga ng em na tumutukoy sa mas malaki o mas maliit na font kaysa sa inaasahan mo. Ang pag-convert nito gamit ang computed font size ng elemento ay agad na nagsasabi kung ang aritmetika ang problema.

Pagbasa ng hindi pamilyar na code

Puno ng mga halaga ng em ang mga minanang stylesheet na kailangan mong buuin muli ang laki sa pixel. Ang pag-convert ng iilang pangunahin, gamit ang tamang base, ay nagbibigay sa iyo ng mapa ng disenyo.

Pagsulat ng dokumentasyon at pagsusulit

Inilalarawan sa pixel ng mga sumusubok ng pahina ang nakikita nila. Kaunti ang ibig sabihin ng developer na nagsasabing 0.9em ang padding sa isang tester; may ibig sabihin ang 12.6 px. Ang pag-convert ay nagpapaunawaan sa dalawang panig.

Mga patibong kapag kino-convert mo ang em sa px

Paggamit ng maling base

Ang pinakakaraniwang pagkakamali. Para sa font-size, gamitin ang laki ng magulang; para sa lahat ng ibang property, ang sa mismong elemento. Suriin ang property bago mo i-type ang base.

Pagkalimot sa magulang na nasa em

Kung ang laki ng magulang mismo ay nasa em, kailangan mong sundan ang kadena. Gamitin ang computed value mula sa developer tools para paikliin ito.

Pag-aakalang ipinapakita ng screen ang parehong mga pixel

Hindi device pixel ang CSS pixel. Sa display na mataas ang densidad, ang isang CSS pixel ay maaaring dalawa o tatlong device pixel. Ang ibinibigay ng conversion ay mga CSS pixel, ang yunit na pinagsasaluhan ng mga design tool at ng stylesheet.

Pagturing sa sagot na pangako

Kung palakihin ng mambabasa ang teksto o gamitin muli ang component na may ibang laki ng font, nagbabago ang mga pixel, gaya ng nararapat. Inilalarawan ng na-convert na numero ang isang sitwasyon, hindi lahat.

Mga tanong ng mga tao bago mag-convert

Ilang pixel ang 1 em?

Kasing-dami ng laki ng font na may bisa: 16 px para sa ordinaryong teksto ng katawan sa default, 24 px sa loob ng elementong 24 px.

Ilang pixel ang 2 em?

Dalawang beses ng laki ng font na may bisa. Sa 16 px, 32 px iyon.

Bakit iba ang ipinapakita ng browser ko?

Iba ang tunay na laki ng font ng elemento sa base na inilagay mo. Basahin ang computed font size sa developer tools.

Pareho ba ang em at rem?

Hindi. Ang em ay kaugnay ng elemento, ang rem ay ng ugat.

Ina-upload ba ang numero ko?

Hindi. Tumatakbo sa iyong browser ang aritmetika at walang ipinapadala kahit saan.

Paano ako babalik?

Gamit ang px sa em, na naghahati sa halip na nagpaparami.

Mga ugaling nagpapanatiling maintindihan ang stylesheet na em

Lagyan ng komento ang base

Ang linyang gaya ng padding: 0.75em 1.25em; /* 12px 20px at 16px */ ay nagkakahalaga ng ilang karakter at nakatitipid sa susunod na mambabasa ng isang conversion. Itinatala nito ang base na ipinalagay mo.

Itakda nang isang beses ang laki ng font bawat component

Tukuyin ang laki ng font ng component sa elementong ugat nito, at sumangguni dito gamit ang em sa loob. Magiging pareho na ang base para sa bawat halaga sa component, at maaari mong i-convert ang em sa px laban dito nang may kumpiyansa.

Panatilihin ang em para sa espasyo, rem para sa uri

Ito ang hatiang pinagpapasyahan ng karamihan ng mga stylesheet, at pinananatili nitong simple ang aritmetika. Para sa mga laki na kaugnay ng screen, ang px sa vw at vw sa px ang mga tool.

Subukan sa ibang laki ng teksto

Itaas ang default na laki ng teksto sa browser mo at tingnan ang pahina. Kung sumusunod sa teksto ang espasyo, gumagana ang mga halaga ng em. Kung hindi, may naiwan sa pixel.

Isang paraan para sa mahihirap na kaso

Gumawa mula sa labas papasok

Kapag nasa kalaliman ng iba ang isang component at nakalilito ang mga halaga ng em nito, magsimula sa pinakalabas na elementong alam mo ang laki at gumawa papasok, na isang antas bawat pagkakataon ang kino-convert. Isulat sa tala ang bawat laki sa pixel habang nagpapatuloy. Pagkalipas ng dalawa o tatlong antas, nasa papel na ang buong kadena, at makikita mo kung saan nanggagaling ang nakagugulat na numero. Isang minuto lang ito at pumapalit sa isang oras ng paghula.

Magpasya kung pasisimplehin

Kung kailangan mong i-convert ang em sa px sa apat na antas para maunawaan ang layout, may sinasabi sa iyo ang stylesheet. Isaalang-alang ang paglipat ng mga laki ng font sa rem, para ang bawat isa ay tumutukoy sa ugat, at ang espasyo lang ang iiwan sa em. Pareho ang magiging hitsura ng pahina at mas madali itong basahin sa susunod na taon.

Mga kaugnay na converter

Sinasaklaw ng parehong pamilya ng mga tool ang mga katabing conversion. Para bumalik sa em, gamitin ang px sa em. Para sa mga laki na kaugnay ng ugat, may px sa rem at rem sa px, at para sa mga laki na kaugnay ng screen, px sa vw at vw sa px. Para sa mga kulay ng parehong stylesheet, hinahawakan ng HEX sa RGB at RGB sa HEX ang mga notasyon.

Isang halimbawang nalutas

Sabihin nating nirerepaso mo ang isang component ng button. Ang label ay 14 px, ang CSS ay nagsasabing padding: 0.714em 1.429em at puwang na 0.5em sa pagitan ng icon at ng label. I-type mo ang 14 bilang base, saka 0.714 at mababasa ang 10 px, 1.429 at mababasa ang 20 px, 0.5 at mababasa ang 7 px. Sinasabi ng design file ang 10, 20 at 8. Dalawa sa tatlo ang tugma, kaya tinitingnan mo ang puwang: ang 8 px sa base na 14 ay magiging 0.571 em, at may nag-round nito sa 0.5. Ibinabangon mo ito sa pagsusuri, at isang numero lang ang kailangang ayusin.

Maikling checklist

Bago mag-convert

Hanapin ang laki ng font na tinutukoy ng em, mula sa developer tools o mula sa kadena ng mga laki ng font sa code.

Habang nagko-convert

I-type ang halaga ng em, itakda ang base at basahin ang mga pixel, na pansinin ang base na ipinapakita sa tabi ng resulta.

Pagkatapos mag-convert

Ihambing sa design file. Kung magkaiba ang mga numero, suriin ang base bago mo pagdudahan ang code.

Mga karaniwang pagkakamali

Paggamit ng 16 nang hindi sinusuri

Tama lang ito kapag 16 px ang laki ng font ng elemento.

Pagkalito sa em at rem

Magkahawig sila at magkaiba ang kilos. Gamitin ang tamang pahina para sa bawat isa.

Pagkalimot na nagpaparami ang em

Ang halaga sa loob ng magkakasamang elemento ay kaugnay ng laking maaaring hindi mo pa nakikita. Sundan ang kadena.

Nananatili sa device mo ang mga numero mo

Lokal na nangyayari ang kuwenta. Ginagamit ng sarili mong browser ang mga halaga mo at walang ipinapadala kahit saan. Walang buburahin pagkatapos at walang account na gagawin. Iyan ang payak na paraan para i-convert ang em sa px.

Buod

Para i-convert ang em sa px rito, i-type ang laki sa em at ang laki ng font na tinutukoy nito, at basahin agad ang resulta sa pixel, gamit ang pormulang px = em × base. Pinananatili ng conversion ang proporsyon na kaugnay ng laki ng font na may bisa kung saan ginagamit ang halaga. Hindi ito makapagbibigay ng iisang sagot para sa pahina: ang em ay kaugnay ng mismong elemento, o ng magulang para sa font-size, kaya ang parehong 1.5 em ay 24 px sa loob ng elementong 16 px at 36 px sa loob ng elementong 24 px, at ang em sa loob ng em ay nagpaparami. Para sa iisang numerong tumatagal saanman, gamitin ang rem. Walang ina-upload.