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

Bakit mo kino-convert ang px sa em

Ang em ang pinakamatandang relatibong yunit sa CSS at ang yunit na pinakamaraming sanhi ng pagtatalo. Mayroon kang sukat sa pixel mula sa design file, 20 px na padding sa isang button, 14 px na espasyo sa tabi ng icon, 36 px para sa isang heading, at gusto mo itong nasa em, para sumunod ito sa tekstong kinabibilangan nito. Kapag kino-convert mo ang px sa em, isang partikular na tanong ang itinatanong mo: ilang ulit ng kasalukuyang laki ng font ito? Nakadepende ang sagot sa numerong hindi mahuhulaan ng pahina, ang laki ng font na umiiral kung saan ginagamit ang halaga, kaya inilalagay ng converter ang numerong iyon sa isang field at hayagang ginagamit ito.

Ang dahilan para isulat ang mga sukat sa em ay dapat lumaki kasama ng teksto ang mga bagay na kabilang sa teksto. Dapat mas malaki ang padding sa loob ng button kapag mas malaki ang label ng button. Dapat lumawak ang agwat sa pagitan ng icon at ng caption nito kapag lumawak ang caption. Dapat manatiling proporsyonal sa heading ang ibabang margin nito. Sa lahat ng kasong ito, mali na ang halaga sa pixel sa sandaling magbago ang laki ng font, at tama ang halaga sa em sa anumang laki. Iyon ang buong katwiran para sa em, at matibay ito.

Nangyayari sa iyong browser ang kalkulasyon, at walang ina-upload. Sa ibaba makikita mo ang formula, ang dahilan kung bakit mas nangangailangan ng pag-iingat ang em kaysa sa rem, ang bitag ng pagkakapugad na nagbubunga ng mga nakakagulat na sukat, ang mga lugar kung saan tamang yunit ang em, at isang paraan ng pagpili sa pagitan ng em at rem sa totoong stylesheet.

Ang formula at ang base

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

Isang paghahati ang formula: em = px ÷ base. Sa base na 16 px, ang halagang 24 px ay nagiging 1.5 em, ang 8 px ay nagiging 0.5 em at ang 20 px ay nagiging 1.25 em. Ipinapakita ng pahina ang base sa tabi ng resulta, tulad ng sa 24 px = 1.5 em (16 px), para makita mo kung ano ang ipinalagay. Pareho ang aritmetika sa rem. Iba ang kahulugan.

Ano ang base

Para sa rem, ang base ay ang laki ng font ng root element. Para sa em, ito ay ang laki ng font ng elementong pinaggagamitan ng halaga, o, para sa mismong property na font-size, ng parent. Kaya walang iisang sagot ang em: ang parehong halaga sa stylesheet ay nangangahulugan ng magkakaibang sukat sa pixel sa magkakaibang lugar. Kung kino-convert mo ang padding para sa button na 14 px ang teksto, i-type ang 14 bilang base. Kung kino-convert mo ang margin para sa heading na 32 px, i-type ang 32.

Ang default kapag hindi mo alam

Kung magaspang na bilang lang ang gusto mo, iwanan ang base sa 16, ang laki ng ordinaryong teksto sa browser na walang nagbago. Tama ang resulta para sa bloke ng normal na teksto ng katawan, at nagbibigay ito sa iyo ng pakiramdam sa proporsyon kahit na lumabas na magkaiba ang laki ng elemento.

Ang pinananatili ng conversion at ang hindi nito kaya

Pinananatili nito ang proporsyon sa teksto

Ang resulta ay ang proporsyon kaugnay ng laki ng font na umiiral kung saan ginagamit ang halaga. Kapag nakasulat sa em, lumalaki at lumiliit ang espasyo kasama ng tekstong katabi nito, at iyon mismo ang dapat na pag-uugali ng espasyo sa paligid ng mga salita.

Hindi ito makapagbibigay ng iisang numero para sa pahina

Ito ang dapat pag-ingatan. Relatibo ang em sa laki ng font ng mismong elemento, o, para sa font-size, ng parent nito, hindi sa root. Kaya walang iisang sagot para sa isang pahina: ang parehong 1.5 em ay 24 px sa loob ng elementong 16 px at 36 px sa loob ng elementong 24 px, at nagmu-multiply ang em sa loob ng em. Tama lang ang bilang sa pahina para sa base sa field at para sa wala nang iba. Kung gusto mo ng iisang numerong totoo kahit saan, iyon ang gamit ng rem. Para maghambing, i-convert ang px sa rem at tingnan kung paano kumikilos ang parehong halaga sa pixel.

Pag-round

Ang paghahati sa 16 ay nagbibigay ng malilinis na halaga para sa maraming sukat at paulit-ulit na decimal para sa iba. Maayos sa stylesheet ang halagang tulad ng 0.8125 em, pero maaaring mas gusto mong i-round sa 0.8 o 0.85 kung hindi mahalaga ang eksaktong sukat. Panatilihin ang buong bilang kung saan mahalaga ang katumpakan.

Ang bitag ng pagkakapugad

Paano nagpapatung-patong ang em

Ipagpalagay na ang isang listahan ay may font-size: 0.875em at ang mga item nito ay may font-size: 0.875em din. Ang listahan ay 87.5% ng parent nito. Ang bawat item ay 87.5% ng listahan, na halos 76.6% ng parent. Ang listahang nakapugad sa loob ng item ay lumiliit muli, sa halos 67%. Pagkatapos ng tatlong antas, napakaliit na ng teksto, at walang sinumang sadyang sumulat niyon. Iyon ang ibig sabihin ng pagsasabing nagpapatung-patong ang em.

Bakit mahalaga ito kapag kino-convert mo ang px sa em

Kung kino-convert mo ang halaga sa pixel sa em para sa font-size, ang base na dapat mong gamitin ay ang laki ng font ng parent, hindi ng mismong elemento. Maraming pagkakamali ang nagmumula sa paggamit ng mali. Para sa ibang property, tulad ng padding at margin, ang base ay ang sariling laki ng font ng elemento. Madaling sabihin at madaling kalimutan ang panuntunan: tumitingin paitaas ang font-size, tumitingin sa sarili ang lahat ng iba pa.

Paano maiiwasan ang mga sorpresa

Gamitin ang em para sa espasyong sumusunod sa teksto, at rem para sa mga laki ng font. Sa ganoong paraan, hindi kailanman nagpapatung-patong ang mga laki ng font, dahil tumutukoy ang mga ito sa root, at sumusunod pa rin ang espasyo sa sarili nitong teksto. Ito ang kombinasyong pinagtitigilan ng karamihan sa makabagong stylesheet.

Karaniwang mga sukat

Ang talahanayan sa ibaba ng pahina

Sa ilalim ng converter ay may talahanayan ng karaniwang mga sukat sa base na itinakda mo: ang 8 px ay 0.5 em, ang 10 px ay 0.625, ang 12 px ay 0.75, ang 14 px ay 0.875, ang 16 px ay 1, ang 18 px ay 1.125, ang 20 px ay 1.25, ang 24 px ay 1.5, ang 32 px ay 2, ang 48 px ay 3 at ang 64 px ay 4. Sa base na 16, ito ang parehong mga numero tulad ng sa rem, kaya nalilito ng mga tao ang dalawa. Nasa kung ano ang kinakatawan ng 16 ang pagkakaiba.

Pagbabago ng base para tumugma sa elemento

Kung itatakda mo ang base sa 14 para sa maliit na button, magbabago ang talahanayan: ang 14 px ay 1 em na ngayon, ang 7 px ay 0.5 em at ang 21 px ay 1.5 em. Subukan ito, at makikita mo kung paanong ang padding na 1.5 em ay may magkaibang sukat sa pixel sa button na 14 px kaysa sa isang 18 px, at kung bakit kapaki-pakinabang iyon.

Paano i-convert ang px sa em dito

I-type ang halaga sa pixel

Ilagay ang sukat sa pixel sa unang field. Tinatanggap ang mga decimal.

Itakda ang laki ng font na tinutukoy ng em

I-type ang laki ng font ng elemento, o ng parent nito kung kino-convert mo ang font-size. Kung hindi ka sigurado, iwanan ang 16 at ituring na tantiya ang resulta.

Kopyahin ang halaga sa em

Gamitin ang bilang sa CSS mo kasama ang yunit nito, tulad ng sa padding: 1.25em. Hindi balido para sa karamihan ng property ang numerong walang yunit.

Saan nagmula ang mga yunit na ito

Ang em sa metal na tipo

Mas matanda ang em kaysa sa web. Sa metal na tipo, ito ang lapad ng binuong bloke, na ipinangalan sa malaking titik na M, at ito ang likas na yunit ng pahalang na espasyo sa nakalimbag na linya. Nagsasalita pa rin ang mga typographer tungkol sa em dash at em space. Sa CSS, nananatili ang ideya sa mas maluwag na anyo: ang isang em ay ang laki ng kasalukuyang font.

Ang pixel at ang rem

Ang CSS pixel ay isang sanggunian na haba na halos 1/96 ng isang pulgada na nakikita sa komportableng distansya ng pagbabasa, hindi isang tuldok sa screen mo. Idinagdag ang rem para bigyan ang mga developer ng yunit na relatibo pero hindi kailanman nagpapatung-patong: ito ang em ng root element. Sa pagitan nila, sinasaklaw ng pixel, em at rem ang tatlong pangangailangan: nakapirming laki, laki na relatibo sa teksto, at laki na relatibo sa pahina.

Kung saan tamang pagpili ang em

Padding sa loob ng mga button at form field

Ang button na may padding: 0.5em 1em ay mukhang pareho ang proporsyon sa anumang laki ng teksto. Palakihin ang label at lalaki kasama nito ang buong button, na gusto mo mula sa component na maaaring gamitin sa toolbar at sa hero banner.

Espasyo sa tabi ng mga icon

Ang icon na sinusundan ng caption ay nangangailangan ng agwat na sumusunod sa sukat ng caption. Nagagawa iyon ng margin na 0.4em; hindi iyon nagagawa ng margin na 6px.

Mga margin sa paligid ng mga heading at talata

Mas madaling mapanatili ang patayong ritmo sa dokumento kapag nasa em ang espasyo ng talata, dahil sumusunod ito sa laki ng talata. Nananatiling proporsyonal ang margin ng heading sa em habang nagbabago ang laki ng heading sa magkakaibang breakpoint.

Mga media query

Tumutugon sa laki ng teksto ng mambabasa ang mga breakpoint na nakasulat sa em, kaya mas maagang lumilipat sa makitid na anyo ang layout para sa taong nagpalaki ng teksto. Sa mga media query, tumutukoy ang em sa default ng browser at hindi sa anumang elemento, kaya hindi ito nagpapatung-patong.

Mga bitag kapag kino-convert ang px sa em

Paggamit ng maling base

Ang pinakakaraniwang pagkakamali. Para sa font-size, gamitin ang laki ng parent; para sa lahat ng iba pa, ang sariling laki ng elemento. Suriin kung aling property ang kino-convert mo bago i-type ang base.

Paglimot na maaaring nasa em din ang parent

Kung ang laki ng font ng parent ay nasa em din mismo, kailangan mong sundan ang kadena paitaas para malaman ang tunay na laki. Kapag naging masalimuot ang stylesheet, ilipat sa rem ang mga laki ng font at itabi ang em para sa espasyo.

Pag-asa ng iisang bilang para sa buong component

Ang component na may tekstong magkakaiba ang laki ay walang iisang halaga sa em para sa mga bahagi nito. I-convert ang bawat bahagi laban sa sarili nitong base.

Paghahalo ng em at rem para sa parehong property

Legal ang padding na 1rem sa tabi ng margin na 1em at madalas nakalilito. Pumili ng panuntunan, tulad ng rem para sa mga laki ng font at em para sa espasyo, at manatili rito.

Mga tanong ng mga tao bago mag-convert

Ilang em ang 16 px?

Isa, kung 16 px ang laki ng font na umiiral. Kung 20 px ang laki ng font ng elemento, ang 16 px ay 0.8 em.

Mas mabuti ba ang em kaysa sa rem?

Walang mas mabuti. Mas mabuti ang rem para sa mga laki ng font at pandaigdigang layout. Mas mabuti ang em para sa espasyong dapat sumunod sa sarili nitong teksto.

Bakit mas malaki ang padding ko kaysa sa inaasahan?

Dahil relatibo ito sa laki ng font ng elemento, na maaaring mas malaki kaysa sa inakala mo. Suriin ang computed na laki ng font sa developer tools ng browser.

Puwede ba akong gumamit ng mga decimal?

Oo. Normal ang mga halagang tulad ng 0.625em at 1.333em.

Ina-upload ba ang numero ko?

Hindi. Tumatakbo sa iyong browser ang aritmetika at walang ipinapadala saanman.

Paano ako babalik?

Gamit ang em sa px, na nagmu-multiply sa halip na naghahati.

Pagpili nang matalino kapag kino-convert ang px sa em

Magpasya kung saan kabilang ang halaga

Kung kabilang ito sa teksto, tama ang em. Kung kabilang ito sa pahina, tulad ng lapad ng column o agwat ng seksyon, mas angkop ang rem o yunit ng viewport. Ipinapahayag ng Px sa vw ang sukat bilang bahagi ng lapad ng screen.

Isulat ang layunin sa isang komento

Ginagawang nakikita ng linyang tulad ng padding: 0.75em 1.25em; /* 12px 20px at 16px */ ang katwiran. Kapag nagbago ang laki ng font sa hinaharap, malalaman mo kung ano ang nilayon ng mga numero.

Itago ang laki ng font ng component sa iisang lugar

Itakda ang laki ng font sa root element ng component at hayaang tumukoy rito ang lahat ng nasa loob. Pagkatapos, magkapareho ang kahulugan ng mga halaga sa em sa loob saanman sa component, at makakapag-convert ka ng px sa em laban sa iisang base.

Magagandang gawi kapag kino-convert ang px sa em

I-convert ang px sa em nang isang component sa isang pagkakataon

Huwag subukang i-convert ang px sa em para sa buong stylesheet nang minsanan. Kumuha ng iisang component, tulad ng card o button, magpasya sa laki ng font nito, at i-convert ang bawat halaga ng espasyo nito laban sa sukat na iyon. Kapag tapos na ang component, subukan ito sa dalawa o tatlong laki ng teksto. Pagkatapos ay lumipat sa susunod.

Gumamit ng calculator para sa mga kakaibang halaga, hindi sa mga bilog

Ang mga halagang tulad ng 8, 16 at 24 na pixel ay nagiging maayos na numero sa em sa base na 16. Ang mga kakaibang halagang tulad ng 22 o 13 ay nagbibigay ng mahahabang decimal. Kapag kino-convert mo ang px sa em para sa mga ito, magpasya kung talagang kailangan ng disenyo ang eksaktong bilang o kung kasing-husay ang pinakamalapit na bilog na halaga sa em. Madalas masaya ang mga designer na mag-round, at mas madaling panatilihin ang malinis na stylesheet.

Magtago ng tala ng base

Ang maikling komento sa tabi ng bawat halaga sa em, na nagsasabi kung ano ang base, ay tumutulong sa susunod na tao. Kung may magbabago ng laki ng font ng component sa hinaharap, malalaman nilang sinadya ang pagsunod ng espasyo rito at hindi nagkataon. Sulit ang oras na ginugol sa pagsulat niyon nang isang beses.

Ihambing sa katumbas na rem

Kung hindi ka sigurado kung angkop ang em o rem para sa isang halaga, i-convert ang px sa em at sa rem at itanong kung ano ang dapat mangyari kapag nagbago ang laki ng teksto. Kung dapat sumunod ang halaga sa sariling teksto ng elemento, kunin ang em. Kung dapat itong sumunod sa pahina, kunin ang rem.

Mga kaugnay na converter

Sinasaklaw ng parehong pamilya ng mga tool ang mga katabing conversion. Para bumalik sa mga pixel, gamitin ang em sa px. Para sa mga sukat na relatibo sa root, mayroong px sa rem at rem sa px, at para sa mga sukat na relatibo sa screen, px sa vw at vw sa px. Para sa mga kulay ng parehong stylesheet, hinahawakan ng HEX sa RGB at HEX sa HSL ang mga notasyon.

Isang halimbawang gawa

Sabihin nating 14 px ang label ng button at binibigyan ng disenyo ang button ng 10 px na patayong padding at 20 px na pahalang na padding. I-type mo ang 14 bilang base, 10 at mababasa mo ang 0.714 em, i-type ang 20 at mababasa ang 1.429 em. Sa stylesheet, isusulat mo ang padding: 0.714em 1.429em. Kapag ginamit ang parehong button sa hero na may label na 18 px, ang padding ay nagiging 12.9 px at 25.7 px, nang proporsyonal. Kung isinulat mo ang 10px at 20px, mukhang manipis ang button sa paligid ng mas malaking teksto.

Maikling checklist

Bago mag-convert

Magpasya kung aling property ang kinabibilangan ng halaga, at hanapin ang laki ng font na dapat nitong maging relatibo.

Habang nagko-convert

I-type ang halaga sa pixel at ang tamang base, at kopyahin ang bilang sa em kasama ang yunit nito.

Pagkatapos mag-convert

Baguhin ang laki ng font ng component sa browser at tingnan kung sumusunod ang espasyo. Hanapin ang mga nakapugad na halaga sa em na nagpapatung-patong.

Karaniwang mga pagkakamali

Paggamit ng laki ng root bilang base para sa padding

Trabaho iyon ng rem. Tumutukoy ang em sa sariling laki ng font ng elemento.

Paggamit ng em para sa bawat laki ng font

Nagpapatung-patong at nakakagulat ang mga nakapugad na laki ng font sa em. Gamitin ang rem para sa mga laki ng font.

Pag-round sa numerong maganda sa paningin pero mali

Hindi pareho ang 1.43 at 1.5 kapag na-multiply sa malaking font. Panatilihin ang sapat na digit.

Nananatili sa device mo ang mga numero mo

Nangyayari nang lokal ang kalkulasyon. Ginagamit ng sarili mong browser ang mga halaga mo at walang ipinapadala saanman. Walang buburahin pagkatapos at walang account na lilikhain. Iyon ang simpleng paraan para i-convert ang px sa em.

Buod

Para i-convert ang px sa em dito, i-type ang sukat sa pixel at ang laki ng font na pinagbabatayan nito, at basahin agad ang resulta, gamit ang formula na em = px ÷ base. Pinananatili ng conversion ang proporsyon kaugnay ng laki ng font na umiiral kung saan ginagamit ang halaga. Hindi ito makapagbibigay ng iisang sagot para sa pahina: relatibo ang em sa sariling laki ng font ng elemento, o sa parent 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 nagmu-multiply ang em sa loob ng em. Para sa iisang numerong totoo kahit saan, gamitin ang rem. Walang ina-upload.