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

Bakit kino-convert ng mga designer at developer ang px sa rem

Pixel ang wika ng mga design tool. Sinasabi ng mockup na 32 px ang heading, 48 px ang agwat sa pagitan ng mga seksyon, 16 px ang padding ng button. Rem ang wika ng mga stylesheet, kapag maayos ang pagkakasulat. Ang puwang sa pagitan ng dalawang wikang iyon ang kinaroroonan ng pahinang ito: nagta-type ka ng sukat sa pixel at binabasa mo ito sa rem, para ang numerong ilalagay mo sa CSS ay mangahulugan ng ibig sabihin ng designer. Maliit na gawain ang pag-convert ng px sa rem, pero daan-daang beses itong ginagawa sa buhay ng isang website, at ginagawang bahagyang mali ng maling base ang maingat na layout sa lahat ng dako nang sabay-sabay.

Ang dahilan para mag-abala sa rem ay ang accessibility at flexibility. Ang rem ay maramihan ng laki ng font ng root, na itinatakda ng browser sa 16 px maliban kung sabihin ang iba, at malayang mabago ng mambabasa sa mga setting nila. Kaya napananatili ng layout na nakasulat sa rem ang hugis nito kapag itinaas ng taong may mahinang paningin ang default na laki ng teksto: sabay-sabay na lumalaki ang type, espasyo at mga kahon. Hindi sumusunod ang layout na nakasulat sa pixel, at ang mambabasang humiling ng mas malaking teksto ay nakakakuha ng mas malalaking letra sa masisikip na kahon, o wala man lang. Iyon ang dahilan kung bakit halos bawat makabagong style guide ay iisa ang sinasabi: gamitin ang rem para sa type at espasyo.

Ginagawa ng pahinang ito ang aritmetika sa iyong browser. Walang ina-upload, at ang pinagbabatayan ng conversion, ang laki ng base, ay nakasulat sa ibaba at nasa field na maaari mong baguhin, sa halip na ipalagay nang patago. Sa ibaba makikita mo ang formula, ang talahanayan ng karaniwang mga sukat, ang mga dahilan kung bakit mahalaga ang base, ang mga bitag na nakakahuli sa mga taong nagmamadaling mag-convert ng px sa rem at isang maikling gabay sa paggamit ng resulta sa totoong mga stylesheet.

Ang formula at ang base

Ang rem ay katumbas ng px na hinati sa base

Isang paghahati ang formula: rem = px ÷ base. Sa karaniwang base na 16 px, ang sukat na 24 px ay nagiging 1.5 rem, ang 32 px ay nagiging 2 rem at ang 8 px ay nagiging 0.5 rem. Ipinapakita ng pahina ang resulta habang nagta-type ka, at ipinapakita rin nito ang base na ginamit nito, kaya sinasabi sa iyo ng linyang 24 px = 1.5 rem (16 px) kung ano mismo ang ipinalagay.

Saan nagmula ang 16

Nagsisimula ang base sa 16 px dahil iyon ang ginagamit ng browser kapag walang nagsabi ng iba. Hindi ito batas ng web; ito ang default ng default, at matatag na ito sa loob ng mga dekada. Kung hindi hinahawakan ng CSS mo ang laki ng font ng root, ang 1 rem ay 16 px para sa karamihan ng mga bisita. Kung hinahawakan nito, ang base ay anuman ang itinakda mo.

Ang trick na 62.5% at kung bakit ito ginagamit ng mga tao

Itinatakda ng ilang stylesheet ang laki ng root sa 62.5%, na ginagawang katumbas ng 10 px ang 1 rem sa default na browser, kaya ang 24 px ay simpleng 2.4 rem at madaling gawin sa isip ang aritmetika. Gumagana ito, pero may kapalit: nakadepende na ngayon sa porsiyentong iyon ang buong pahina, at ang anumang component na umaasa sa 16 bilang base ay magiging masyadong maliit. Kung ginagawa ito ng proyekto mo, i-type ang 10 sa base field ng pahinang ito, at tutugma ang bawat bilang sa CSS mo.

Ang pinananatili ng conversion at ang hindi nito kaya

Pinananatili nito ang proporsyon

Ang isang rem ay anuman ang laki ng font ng root, kaya napananatili ng layout na nakasulat sa rem ang hugis nito kapag nagbago ang laki na iyon. Iyon ang buong dahilan para isulat ito sa ganoong paraan. Kapag kino-convert mo ang px sa rem, ang numerong makukuha mo ay ang parehong proporsyong mayroon ang halaga sa pixel sa base na pinili mo, na ipinapahayag na ngayon sa paraang nagsa-scale.

Hindi nito alam ang mga setting ng mambabasa mo

Ganap na nakadepende sa base ang numero. Kung nagtatakda ang CSS mo ng ibang laki sa root element, o binago ng mambabasa ang default na laki ng teksto sa browser nila, na ginagawa ng maraming tao at may karapatan sila, hindi 16 px ang 1 rem para sa kanila. Tama lang ang bilang sa pahina para sa base sa field. Hindi ito kapintasan ng tool kundi likas na katangian ng yunit: relatibo ito, at ang relatibong yunit ay walang nakapirming halagang pagko-convertan.

Pag-round

Ang paghahati sa 16 ay nagbibigay ng malilinis na resulta para sa maraming karaniwang sukat (16, 24, 32, 48, 64) at paulit-ulit na decimal para sa iba (ang 10 px ay 0.625 rem; ang 13 px ay 0.8125). Nagbibigay ang pahina ng kasing-dami ng digit na kailangan ng numero, at ikaw ang magpapasya kung ilan ang itatago sa stylesheet. Walang problemang hinahawakan ng mga browser ang mahahabang decimal, pero mas madaling basahin at panatilihin ang naka-round na halagang tulad ng 0.8125rem kaysa sa may sampung digit.

Karaniwang mga sukat

Ang talahanayan sa ibaba ng pahina

Sa ilalim ng converter, makikita mo ang talahanayan ng karaniwang mga sukat: ang 8 px ay 0.5 rem, 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. Ito ang mga sukat na pinakamadalas lumitaw sa mga type scale at sistema ng espasyo, at nakakatipid ng isang conversion ang pagkakaroon ng mga ito sa harap mo.

Isang scale na nakabatay sa rem

Kapaki-pakinabang na gawi ang pumili ng maliit na hanay ng mga halaga sa rem at gamitin ang mga ito nang paulit-ulit: 0.5, 1, 1.5, 2, 3 at 4 para sa espasyo, at 0.875, 1, 1.25, 1.5, 2 para sa type. Tinatawag ito ng mga designer na scale, at pinananatili nitong biswal na pare-pareho ang site. Kapag nagbigay sa iyo ang mockup ng kakaibang halagang tulad ng 22 px, gamitin ang converter para makitang 1.375 rem ito, at pagkatapos ay magpasya kung iro-round sa pinakamalapit na halaga sa scale mo.

Paano i-convert ang px sa rem dito

I-type ang halaga sa pixel

Ilagay ang sukat sa pixel sa unang field. Tinatanggap ang mga decimal, kaya gumagana ang 13.5 px gaya ng 14.

Suriin ang base

Iwanan ito sa 16 kung hindi binabago ng CSS mo ang laki ng root. Baguhin ito kung binabago. Nag-a-update ang resulta habang nagta-type ka.

Kopyahin ang halaga sa rem

Basahin ang bilang at gamitin ito sa CSS mo, na nakasulat ang yunit pagkatapos nito: font-size: 1.5rem. Huwag kalimutan ang yunit, dahil ibang bagay ang ibig sabihin ng hubad na numero sa karamihan ng property.

Saan nagmula ang mga yunit na ito

Hindi ang CSS pixel ang pixel ng screen mo

Nang hindi na mahulaan ang density ng 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: halos 1/96 ng isang pulgada na nakikita sa komportableng distansya ng pagbabasa. Nakabatay doon ang lahat ng iba pa sa pahinang ito. 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 sa CSS ay nangangahulugan ito ng laki ng font na umiiral, kaya nagbabago ito habang inilalagay mo ang mga elemento sa loob ng isa’t isa. Idinagdag ang rem para takasan mismo iyon: ito ang em ng root element at hindi kailanman nagpapatung-patong.

Bakit umiiral ang rem

Bago ang rem, sinusukat ng mga developer ang lahat sa em o porsiyento, at nagmu-multiply sa isa’t isa ang mga nakapugad na elemento: ang listahan sa loob ng listahan sa loob ng listahan ay lumiliit o lumalaki sa bawat antas. Binigyan sila ng rem ng isang nakapirming sanggunian, ang root, at inalis nito ang pagpapatung-patong. Kung gusto mong paghambingin ang dalawa, i-convert ang px sa em at tingnan kung paano nakadepende ang parehong halaga sa pixel sa elementong kinaroroonan nito.

Kung saan mo makikita ang rem sa praktika

Type

Karaniwang 1 rem ang teksto ng katawan, 1.25 hanggang 3 rem ang mga heading, 0.75 hanggang 0.875 rem ang maliliit na letra. Dahil nakasulat ang mga ito sa rem, napapalaki ng mambabasa ang buong pahina sa pamamagitan ng pagbabago ng isang setting ng browser.

Espasyo at layout

Pinananatiling proporsyonal sa type ng mga margin, padding at agwat sa rem ang whitespace. Kapag lumaki ang teksto, lumalaki rin ang espasyo sa paligid nito, at nananatiling balanse ang layout sa halip na isiksik ang mas malalaking letra sa lumang mga kahon.

Mga media query

Tumutugon sa laki ng teksto ng mambabasa ang mga breakpoint na nakasulat sa em o rem, kaya mas maagang lumilipat sa makitid na anyo ang layout para sa taong nagpalaki ng teksto. Pagpipinong dapat malaman, bagaman karaniwan pa rin ang pixel sa mga breakpoint.

Ano ang iiwan sa pixel

Madalas pinakamaganda ang mga hairline na border, anino ng kahon at manipis na icon sa nakapirming sukat sa pixel, dahil walang natutulungan ang border na 0.0625rem na lumalaki sa 0.1rem kapag malaki ang teksto. Gamitin ang rem para sa dapat mag-scale at pixel para sa hindi.

Mga bitag kapag kino-convert ang px sa rem

Paglimot na hindi laging 16 ang base

Kung nagtatakda ang proyekto ng html { font-size: 62.5% }, o gumagamit ng fluid na laki ng root, iba ang salik. Suriin ang stylesheet bago magtiwala sa numero mula sa anumang converter, kasama ang isang ito.

Pagko-convert sa mismong laki ng root

Kung itatakda mo ang laki ng root sa pixel, napapawalang-bisa ang setting ng browser ng mambabasa at nawawala ang benepisyo ng rem. Itakda ang root bilang porsiyento, o huwag itong galawin, para igalang ang kagustuhan ng user.

Paggamit ng rem sa loob ng component na nagtatakda ng sarili nitong laki ng font

Palaging tumutukoy ang rem sa root, hindi sa component. Ang button na may laki ng font na 14 px at padding na 1rem ay may padding na hindi sumusunod sa sariling teksto ng button. Kung gusto mo ng espasyong sumusunod sa teksto ng elemento, trabaho iyon ng em.

Paghahalo ng mga yunit nang walang plano

Mahirap pangatwiranan ang stylesheet na gumagamit ng px para sa isang margin, rem para sa susunod at em para sa pangatlo. Pumili ng panuntunan: rem para sa type at espasyo, pixel para sa mga border at anino, at panatilihin ito.

Mga tanong ng mga tao bago mag-convert

Ilang rem ang 16 px?

Isa, sa default na browser. Labing-anim na hinati sa base na labing-anim.

Mas mabuti ba ang rem kaysa sa px?

Para sa type at espasyo, ito ang mas mabuting pagpipilian sa karamihan ng proyekto, dahil iginagalang nito ang mga setting ng mambabasa. Nananatiling tama ang pixel para sa mga bagay na hindi dapat mag-scale.

Bakit iba ang resulta ko sa ibang site?

Malamang na magkaiba ang base. Suriin ang field: may mga tool na nagpapalagay ng 10, may 16, may 14. Ipinapakita ng pahinang ito ang base sa tabi ng resulta.

Kailangan ko bang mag-round?

Hindi. Tinatanggap ng mga browser ang mahahabang decimal. Mag-round lang para mas madaling basahin.

Ina-upload ba ang numero ko?

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

Paano ako babalik?

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

Pagpili nang matalino kapag kino-convert ang px sa rem

Magpasya sa base para sa proyekto at manatili rito

Anuman ang piliin mo, gawin itong desisyon at isulat sa dokumentasyon ng proyekto. Ang pangkat na hindi magkasundo tungkol sa base ay gumagawa ng mga component na hindi magkakasya.

Mag-convert sa yugto ng disenyo, hindi sa huling sandali

Kung kino-convert mo ang px sa rem habang binabasa ang mockup, isinasama mo ang scale sa disenyo at maagang napapansin ang mga kakaibang halaga. Kung gagawin mo sa dulo, matutuklasan mo ang mga ito bilang tambak ng hindi pare-parehong numero.

Isaalang-alang din ang mga yunit ng viewport

Para sa mga heading na dapat pumuno sa screen, ipinapahayag ng px sa vw ang sukat bilang bahagi ng viewport. Magkaiba ang pag-scale nito sa rem, at madalas pinagsasama ang dalawa.

Mga gawing nagpapadali sa pag-convert ng px sa rem

Magtago ng talahanayan ng conversion sa isip mo

Sa base na 16, sapat ang ilang angkla para sa karamihan ng gawain: ang 4 px ay 0.25 rem, ang 8 px ay 0.5, ang 12 px ay 0.75, ang 16 px ay 1, ang 24 px ay 1.5 at ang 32 px ay 2. Kapag nagbigay sa iyo ang mockup ng halagang nasa pagitan ng mga ito, makakapagtantiya ka bago mo i-convert ang px sa rem sa pahina, at gamitin ang converter para lang kumpirmahin. Pagkalipas ng ilang linggo, kabisado mo na ang talahanayan nang hindi tumitingin.

Hayaang gawin ng design system ang trabaho

Kung may design token ang pangkat mo, tulad ng spacing-2 o font-lg, itago ang mga ito sa rem nang isang beses, at hayaang tumukoy ang lahat sa mga pangalan. Pagkatapos, wala nang kailangang mag-convert ng px sa rem muli, at ginagawa sa iisang lugar ang pagbabago sa scale. Ang converter ang tool na ginagamit mo kapag isinusulat ang mga token, hindi kapag ginagamit ang mga ito.

Isulat ang halaga sa pixel sa isang komento

Ang linyang tulad ng padding: 1.25rem; /* 20px */ ay ilang karakter lang ang gastos at inililigtas ang susunod na developer sa paghahanap ng calculator. Itinatala rin nito kung aling base ang ipinalagay mo, na nakakatulong kung mabago ang laki ng root sa hinaharap.

Subukan gamit ang binagong setting ng browser

Ang patunay na nakabuo sa rem ang pahina ay nakaligtas ito sa mas malaking default na laki ng teksto. Baguhin ang setting sa browser mo, i-reload at tingnan. Ang mga component na nasisira ay iyong may naiwan sa pixel o kung saan pinutol ng nakapirming taas ang teksto.

Mga kaugnay na converter

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

Isang halimbawang gawa

Sabihin nating nagbibigay ang mockup ng pamagat ng card na 28 px, padding ng card na 20 px at agwat na 12 px sa pagitan ng mga card, at gumagamit ang proyekto mo ng default na base na 16 px. I-type mo ang 28 at mababasa mo ang 1.75 rem, i-type ang 20 at mababasa ang 1.25 rem, i-type ang 12 at mababasa ang 0.75 rem. Sa stylesheet, isusulat mo ang font-size: 1.75rem, padding: 1.25rem at gap: 0.75rem. Ang bisitang nagtaas ng laki ng teksto ng browser sa 20 px ay makikita ang parehong card, na na-scale nang isang-kapat: ang pamagat ay 35 px, ang padding ay 25 px at ang agwat ay 15 px, lahat ay proporsyonal. Kung pixel ang isinulat mo, mananatili sa 28 ang pamagat at magmumukhang mali ang card.

Maikling checklist

Bago mag-convert

Alamin ang base na ginagamit ng CSS mo. Magpasya kung aling mga sukat ang dapat mag-scale at alin ang hindi.

Habang nagko-convert

I-type ang halaga sa pixel, suriin ang base na ipinapakita sa tabi ng resulta at kopyahin ang bilang sa rem kasama ang yunit nito.

Pagkatapos mag-convert

Subukan ang pahina na may mas malaking default na laki ng teksto sa browser, at hanapin ang mga kahon na hindi na kayang hawakan ang teksto nila.

Karaniwang mga pagkakamali

Pag-aakalang laging 16 px ang 1 rem

Ganoon lang kapag walang nagbago ng laki ng root, at may mga mambabasang nagbago. Isulat ang layout nang gumana rin ito sa ibang mga sukat.

Pagtatakda ng laki ng root sa pixel

Napapawalang-bisa nito ang pinili ng mambabasa. Gumamit ng porsiyento, o huwag itong itakda.

Pagko-convert sa lahat

Hindi lahat ng sukat ay dapat mag-scale. Iwanan sa pixel ang mga border at anino.

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 rem.

Buod

Para i-convert ang px sa rem dito, i-type ang sukat sa pixel at basahin agad ito sa rem, gamit ang formula na rem = px ÷ base. Nagsisimula ang base sa 16 px, ang default ng browser, at maaari mo itong baguhin para tumugma sa CSS mo. Pinananatili ng conversion ang proporsyon: napananatili ng layout na nakasulat sa rem ang hugis nito kapag nagbago ang laki ng font ng root. Hindi nito alam ang mga setting ng mambabasa mo, kaya tama lang ang bilang para sa base sa field. Ang karaniwang mga sukat sa talahanayan sa ilalim ng converter, mula 8 px sa 0.5 rem hanggang 64 px sa 4 rem, ay nakakatipid sa iyo sa pag-uulit ng aritmetika. Walang ina-upload.