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

Bakit kailangan mong i-convert ang rem sa px

Binubuksan mo ang isang stylesheet at nakikita ang padding: 2.25rem sa isang card at font-size: 0.8125rem sa isang caption. Magagandang halaga ang mga ito, isinulat sa paraang dapat isulat ang modernong CSS, at wala silang sinasabi sa unang sulyap. Gaano kalaki ang padding ng card na iyon sa screen? Mababasa ba ang caption? Tugma ba ito sa 36 px at 13 px sa design file na iniabot sa iyo? Para masagot, kino-convert mo ang rem sa px: minu-multiply mo sa laki ng font ng ugat at binabasa ang sagot sa yunit na ginagamit ng mga design tool. Kabaligtaran ito ng karaniwang direksyon, at ito ang ginagawa mo kapag nagbabasa ka ng code, nagsusuri ng mockup laban sa build o nagpapaliwanag ng layout sa taong nag-iisip sa pixel.

Madali ang conversion; ang dahilan kung bakit may sariling pahina ito ay ang base. Ang rem ay hindi laki, ito ay multiple ng isang laki, ang laki ng font ng root element. Sa browser na walang nagsabi ng iba, ang laking iyon ay 16 px, kaya ang 1 rem ay 16 px, ang 2.25 rem ay 36 px at ang 0.8125 rem ay 13 px. Ngunit maaaring baguhin ng stylesheet ang root, at maaaring baguhin ito ng mambabasa sa browser, at pagkatapos ay gumagalaw kasama nito ang bawat halaga ng rem sa pahina. Kaya hinihingi ng pahina ang base at ginagamit ito, sa halip na itago.

Nangyayari sa iyong browser ang pagkalkula, at walang ina-upload. Sa ibaba makikita mo ang pormula, talahanayan ng mga karaniwang halaga, kung ano ang pinananatili ng conversion at ang hindi nito kayang panatilihin, ang mga sitwasyon kung saan kailangang i-convert ng mga developer ang rem sa px, at ilang gawi na nagpapanatiling madaling basahin ang stylesheet na nakabatay sa rem.

Ang pormula at ang base

Ang px ay katumbas ng rem na minu-multiply sa base

Isang pag-multiply lang ang pormula: px = rem × base. Sa karaniwang base na 16 px, ang 1.5 rem ay nagiging 24 px, ang 0.75 rem ay nagiging 12 px at ang 4 rem ay nagiging 64 px. Ini-print ng pahina ang base sa tabi ng resulta, kaya ang linyang gaya ng 1.5 rem = 24 px (16 px) ay nagsasabi ng ipinagpalagay nito at makikita mo agad kung tugma ito sa proyekto mo.

Paghahanap ng base mo

Hanapin sa stylesheet ang rule sa html o :root na nagtatakda ng font-size. Kung wala, ang base ay ang default ng browser na 16 px. Kung mayroon, gaya ng 62.5%, kunin ang porsyentong iyon ng 16: ang 62.5% ay nagbibigay ng 10 px. Sa mga developer tool ng browser, maaari mo ring piliin ang root element at basahin ang computed font size nito, na siyang numerong itatype sa field ng base.

Kapag fluid ang laki ng root

Pinalalaki ng ilang site ang laki ng root kasabay ng window, gamit ang clamp expression. Sa gayon, walang iisang halaga sa pixel ang 1 rem: 15 px ito sa telepono at 18 px sa malapad na monitor. Sa ganoong kaso, snapshot lang ang anumang conversion. I-type ang base na nakikita mo sa lapad na mahalaga sa iyo, at unawaing sa lapad na iyon lang valid ang sagot.

Ang pinananatili ng conversion at ang hindi nito kayang panatilihin

Pinananatili nito ang proporsyon

Ang isang rem ay kung anuman ang laki ng font ng root, kaya ang layout na isinulat sa rem ay pinananatili ang hugis nito kapag nagbago ang laking iyon. Kapag kino-convert mo ang rem sa px, ang halaga sa pixel ay ang parehong proporsyon na ginawang kongkreto para sa isang partikular na base. Ang ratio sa pagitan ng dalawang laki, halimbawa ang heading na 2 rem sa ibabaw ng body text na 1 rem, ay hindi nagbabago kahit paano mo i-convert, at ang ratio na iyon ang sinasandigan ng mahusay na layout.

Hindi nito alam ang mga setting ng mambabasa mo

Lubos na nakadepende sa base ang numero. Kung itinaas ng mambabasa ang default na laki ng teksto ng browser niya, na ginagawa ng maraming tao at may karapatan silang gawin, hindi 16 px ang 1 rem para sa kanila, at tama lang ang numerong nakikita mo para sa base sa field. Ituring ang halaga sa pixel bilang paraan para maunawaan ang disenyo, hindi pangako ng makikita ng bawat bisita.

Pag-round

Dahil karaniwang buong numero ang base, karaniwang eksakto ang resulta ng pag-multiply. Ang 0.8125 rem ay eksaktong 13 px sa base na 16; ang 0.6875 rem ay eksaktong 11 px. Kung makakuha ka ng mahabang decimal, senyales ito na kinalkula ang halaga ng rem mula sa ibang base kaysa sa itinype mo.

Mga karaniwang halaga

Ang talahanayan sa ibaba ng pahina

May talahanayan ang pahina ng mga halaga sa pixel na katumbas ng mga karaniwang bilang ng rem sa base na itinakda mo: ang 0.5 rem 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. Ito ang mga halagang pinakamadalas lumitaw sa spacing at type scale, at ang pagkaalam sa mga ito nang kabisado ay ginagawang nababasa sa isang sulyap ang stylesheet.

Pagbabasa ng stylesheet sa pixel

Kapaki-pakinabang na pagsasanay ang kumuha ng stylesheet na hindi mo isinulat at isalin ang mga pangunahing halaga nito sa pixel nang minsan, isinusulat ang mga resulta sa tala. Body size na 1 rem, mga heading na 1.5 at 2.25 rem, gap ng container na 2 rem: sa pixel, 16, 24, 36 at 32. Kapag ganito ang tingin, lumilitaw ang lohika ng disenyo, at maihahambing mo ito sa design file nang walang calculator.

Paano i-convert ang rem sa px dito

I-type ang halaga ng rem

Ipasok ang laki sa rem sa unang field. Tinatanggap ang mga decimal, kaya gumagana ang 0.8125 gaya ng 1.

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

Basahin ang halaga sa pixel

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

Saan nanggaling ang mga yunit na ito

Ang CSS pixel

Nang tumigil ang mga display sa pagkakaroon ng mahuhulaang density, ang pahinang sinusukat sa totoong pixel ay naging pahinang lumiliit habang lumilinaw ang mga screen. Kaya muling binigyang-kahulugan ang CSS pixel bilang reference na haba: mga 1/96 ng isang pulgada na tinitingnan sa komportableng distansya ng pagbabasa. Ang pixel sa stylesheet ay kaya hindi tuldok sa screen mo kundi yunit ng haba na minamapa ng browser sa dami ng tuldok na kailangan ng screen.

Ang rem

Mas matanda ang em kaysa sa web: sa metal na type, ito ang lapad ng cast block, na ipinangalan sa malaking titik M, at sa CSS ay nangangahulugan itong laki ng font na umiiral, kaya nagbabago ito habang nagne-nest ka ng mga elemento. Idinagdag ang rem para takasan mismo iyon: ito ang em ng root element at hindi kailanman nagpapatong-patong. Para makita ang pagkakaiba sa numero, i-convert ang px sa em at ihambing sa makukuha mo kapag kino-convert mo ang rem sa px.

Kapag kino-convert ng mga developer ang rem sa px

Pagsusuri ng build laban sa design file

Nag-aabot ang designer ng file sa pixel; isinulat ng developer ang code sa rem. Para suriin kung tugma ang pahina, kino-convert nila ang rem sa px at inihahambing ang mga numero. Agad na lumilitaw ang hindi pagkakatugma: ang 1.375 rem ay 22 px, at kung 24 ang sabi ng disenyo, may mali sa isa sa dalawa.

Pagbasa ng hindi pamilyar na code

Kapag nagmana ka ng stylesheet, itinatago ng mga halaga ng rem ang totoong laki. Ang pag-convert ng ilan sa mga pangunahin ay nagbibigay sa iyo ng mapa ng disenyo: gaano kalaki ang type, gaano kalapad ang mga gutter, saan bumabagsak ang mga breakpoint.

Pagsulat ng ulat ng bug at dokumentasyon

Inilalarawan ng mga taong sumusubok ng pahina ang nakikita nila sa pixel. Kapag sinabi ng developer na 2.5 rem ang padding, kaunti ang ibig sabihin nito sa tester; may kahulugan ang 40 px. Pinag-uunawa ng conversion ang dalawang panig.

Pagtatakda ng mga halagang dapat eksakto sa pixel

May mga bagay na dapat eksaktong bilang ng device pixel o magmumukhang malabo: isang border na isang pixel, isang icon na iginuhit sa 24 px na grid. Kung dapat bumagsak sa pixel grid ang isang laki, sinasabi sa iyo ng pag-convert ng rem sa px kung ganoon nga sa base mo.

Mga patibong kapag kino-convert ang rem sa px

Pagkalimot sa binagong laki ng root

Kung nakatakda ang root sa 62.5% o sa clamp expression, hindi nalalapat ang karaniwang factor na 16. Mali ang resulta ayon sa ratio ng dalawang base. Laging suriin muna ang base.

Pagkalito sa rem at em

Kaugnay ang em sa sariling laki ng font ng elemento, hindi sa root. Ang halagang 1.5em sa loob ng heading na 24 px ay 36 px, ngunit sa loob ng talata na 16 px ay 24 px. Kino-convert ng pahinang ito ang rem, na walang ganoong kalabuan. Para sa em, tingnan ang em sa px.

Pagpapalagay na ipinapakita ng screen ang parehong pixel

Hindi device pixel ang CSS pixel. Sa display na may mataas na density, ang isang CSS pixel ay maaaring dalawa o tatlong device pixel. Nagbibigay ang conversion ng mga CSS pixel, na ginagamit ng parehong design tool at stylesheet.

Pag-round nang masyadong maaga

Kung iro-round mo ang 13.333 px sa 13 at saka magko-convert pabalik, makukuha mo ang 0.8125 rem, hindi ang 0.8333 na pinagmulan mo. Itago ang orihinal na halaga ng rem kapag mahalaga ito.

Mga tanong ng mga tao bago mag-convert

Ilang pixel ang 1 rem?

Labing-anim, sa browser na hindi binago ang default.

Ilang pixel ang 2 rem?

Tatlumpu't dalawa sa default na base. Sa base na 10, magiging 20 ito.

Bakit iba ang ipinapakita ng browser ko?

Binago ng setting ng mambabasa o ng rule sa stylesheet ang laki ng root. Tingnan ang computed font size ng root element sa mga developer tool.

Pareho ba ang rem at em?

Hindi. Tumutukoy ang rem sa root element at tumutukoy ang em sa mismong elemento.

Ina-upload ba ang numero ko?

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

Paano ako babalik?

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

Mga gawi na nagpapadaling basahin ang rem stylesheet

Isulat ang halaga sa pixel sa comment

Ang linyang gaya ng gap: 1.5rem; /* 24px */ ay may halagang ilang karakter at nagliligtas sa susunod na mambabasa ng isang conversion. Itinatala rin nito ang base na ipinagpalagay mo.

Gumamit ng maliit na scale

Madaling matutunan ang proyektong gumagamit lang ng iilang halaga ng rem, gaya ng 0.5, 1, 1.5, 2 at 3: pagkatapos ng isang araw, alam mo na ang mga ito sa pixel nang hindi nag-iisip. Kapag kino-convert mo ang rem sa px para sa ganoong stylesheet, kinukumpirma mo lang ang natatandaan mo.

Pangalanan ang mga halaga mo

Sa mga custom property, gaya ng --space-md: 1.5rem, inilalarawan ng stylesheet ang layunin sa halip na mga numero. Dala ng pangalan ang kahulugan, at nasa iisang lugar ang numero.

Subukan sa ibang default na laki

Itaas ang default na laki ng teksto sa browser mo at tingnan ang pahina. Kung buo pa rin ito, tunay ngang itinayo sa rem ang layout. Kung nasira, may naiwan sa pixel.

Wastong paggamit ng halaga sa pixel pagkatapos mong i-convert ang rem sa px

Ihambing ang mga ratio, hindi lang ang mga numero

Kapag kino-convert mo ang rem sa px para sa buong stylesheet, tingnan ang mga ratio sa pagitan ng mga laki gayundin ang mga laki mismo. Ang type scale na ang bawat hakbang ay mga 1.25 beses ng nauna ay nagbibigay ng 16, 20, 25, 31 at 39 pixel; ang scale na 1.5 ay nagbibigay ng 16, 24, 36 at 54. Ang pagkakita sa ratio ay nagsasabi ng layunin ng designer, at hinahayaan kang palawakin ang scale nang pare-pareho kapag kailangan mo ng bagong laki.

Isalin para sa mga taong nag-iisip sa pixel

Hindi lahat sa koponan ay nagbabasa ng rem. Madalas na gumagawa mula sa mga screenshot ang mga project manager, copywriter at kliyente at humihiling na gawing medyo mas malaki ang heading. Kung masasabi mong 36 px ang heading ngayon at magiging 40 px ito sa 2.5 rem, maikli ang usapan. Kapaki-pakinabang ang pahina bilang mabilis na tulay sa pagitan ng dalawang bokabularyo.

Suriin ang mga touch target at pinakamababang laki

Humihingi ang mga gabay para sa touch screen ng mga target na hindi bababa sa mga 44 px, at humihingi ang mga gabay para sa teksto ng body copy na mga 16 px o higit pa. Parehong nakasaad sa pixel. Para i-verify ang stylesheet na isinulat sa rem laban sa mga ito, i-convert ang rem sa px at tingnan kung lampas sa linya ang mga button at teksto.

Isaalang-alang ang naka-zoom na kaso

Para sa base na itinype mo ang halagang makukuha mo. Kung maaaring palakihin ng mga mambabasa mo ang teksto, subukang muli ang conversion na may base na 20 o 24 at tingnan ang hinihingi ng layout sa screen. Ang card na komportable sa 16 ay maaaring umapaw sa 24, at ang pinakamagandang panahon para malaman iyon ay bago ilathala ang pahina.

Mga kaugnay na converter

Sinasaklaw ng parehong pamilya ng mga tool ang mga kalapit na conversion. Para bumalik sa rem, gamitin ang px sa rem. Para sa mga laki na kaugnay ng elemento, mayroong px sa em at em sa px, at para sa mga laki na kaugnay ng screen, px sa vw at vw sa px. Para sa mga kulay sa parehong stylesheet, nariyan ang HEX sa RGB at HSL sa HEX, at para sa mga pangalan ng class, ginagawa ng teksto sa kebab-case ang parirala bilang pangalang tinatanggap ng CSS.

Isang halimbawang nalutas

Sabihin nating nirerepaso mo ang pull request at ang stylesheet ay may hero section na may padding: 5rem 1.5rem, pamagat na 3.5rem at lead paragraph na 1.25rem. Sinasabi ng design file na 80 px at 24 px ng padding, 56 px na pamagat at 20 px na lead. Itinatype mo ang 5 at nababasa ang 80 px, itinatype ang 1.5 at nababasa ang 24, itinatype ang 3.5 at nababasa ang 56, itinatype ang 1.25 at nababasa ang 20. Tugma ang lahat ng apat, kaya tapat ang build. Kung 3.25 rem ang pamagat, nabasa mo sana ang 52 at napansin ang pagkakaiba bago ito umabot sa designer.

Maikling checklist

Bago mag-convert

Hanapin ang base: ang root rule sa stylesheet, o ang computed size sa mga developer tool.

Habang nagko-convert

I-type ang halaga ng rem, suriin ang base na ipinapakita sa tabi ng resulta at itala ang bilang sa pixel.

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

Default ito, hindi panuntunan. Suriin ang root.

Pagturing sa mga pixel bilang pinal

Totoo ang sagot para sa isang base. Ang mambabasang may mas malaking default ay nakakakita ng mas malalaking pixel.

Paghahalo ng rem at em

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

Nananatili sa device mo ang mga numero mo

Lokal na nangyayari ang pagkalkula. Ginagamit ng sarili mong browser ang mga halaga mo at walang ipinapadala saanman. Walang buburahin pagkatapos at walang account na gagawin. Iyon ang payak na paraan para i-convert ang rem sa px.

Buod

Para i-convert ang rem sa px dito, i-type ang laki sa rem at basahin agad sa pixel, gamit ang pormulang px = rem × 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, dahil ang isang rem ay kung anuman ang laki ng font ng root, at hindi nito alam ang mga setting ng mambabasa mo, kaya tama lang ang numero para sa base sa field. Ang talahanayan ng mga karaniwang halaga, mula sa 0.5 rem sa 8 px hanggang 4 rem sa 64 px, ay tumutulong na basahin ang stylesheet sa isang sulyap. Walang ina-upload.