Konvertitur PX għal REM

Q: Kemm pikseli hu 1rem?

16 px awtomatikament. Jekk l istylesheet tiegħek jissettja html { font size: 62.5%; } , 1rem = 10 px, u jikber jekk l utent jgħolli d daqs awtomatiku tal font tal brawżer.

Q: rem huwa l-istess bħal em?

Biss fuq elementi li l parent tagħhom juża d daqs tal font tar root. rem dejjem iħares lejn l element html ; em iħares lejn il parent, allura valuri em nested jimmultiplikaw.

Q: Iż-żum tal-paġna jagħmel rem bla siwi?

Le. Iż żum tal brawżer jiskala px u rem bl istess mod, imma s setting tad daqs awtomatiku tal font jiskala biss l unitajiet relattivi. Li tappoġġja t tnejn huwa parti mir rispett tal preferenzi tal qarrej.

Q: Is-CSS tiegħi jintbagħat xi mkien?

Le. Il konverżjoni sseħħ kollha fil brawżer tiegħek u xejn minn dak li twaħħal ma jitlaq mill apparat tiegħek.

Konvertitur PX għal REM

Ikkonverti px għal rem u em b’kwalunkwe daqs tal-font tar-root, ibni tabella ta’ konverżjoni multipla u biddel kull valur px ta’ snippet CSS għal rem b’click.

Daqs tal-font tar-root (px)

Komuni:

Daqs tal-font tal-parent għal em (px)

em huwa relattiv għad-daqs tal-font tal-element parent, rem għall-element root (html).

Ikkonverti valur

Pikseli (px) REM EM

Tabella ta’ konverżjoni multipla

Valuri tal-pikseli (separati b’spazji, virgoli jew linji)

px	rem	em

Ikkonverti snippet CSS

CSS li għandu jiġi kkonvertit

Żomm il-wisgħat tal-border u tal-outline f’px Żomm il-valuri ta’ 1px Ikkonverti l-media queries għal em (bażi 16px) Deċimali

CSS ikkonvertit

Kif tuża l-konvertitur PX għal REM

Issettja d-Daqs tal-font tar-root (px). Huwa 16 fil-brawżers ewlenin kollha sakemm l-istylesheet tiegħek ma tbiddlux. Il-buttuni taħt il-qasam jaqilbu għal 16 px, 10 px (it-trick html { font-size: 62.5%; }) jew 18 px.
Jekk taħdem b’em, issettja d-Daqs tal-font tal-parent għal em (px): id-daqs tal-font ikkalkulat tal-element li jinkludi dak li qed tistilizza.
Taħt Ikkonverti valur, ikteb f’Pikseli (px), REM jew EM. Iż-żewġ oqsma l-oħra jinbidlu waqt li tikteb, u l-linja ta’ taħt turi d-diviżjoni użata.
It-Tabella ta’ konverżjoni multipla telenka daqsijiet komuni. Ibdel il-Valuri tal-pikseli bit-tokens tad-disinn tiegħek (skala tal-ispazju, skala tat-tipografija…) u uża Ikkopja t-tabella biex twaħħal ir-riżultat f’spreadsheet jew f’dokument tad-disinn.
Biex timmigra kodiċi eżistenti, waħħlu f’CSS li għandu jiġi kkonvertit, agħżel l-għażliet u ikklikkja Ikkonverti px għal rem. Ikkarga eżempju juri stylesheet żgħir. Ikkopja s-CSS ikkonvertit b’Ikkopja.

Il-konverżjoni sseħħ kollha fil-brawżer tiegħek.

Il-formuli

rem = px ÷ daqs tal-font tar-root. Bil-16 px awtomatiku, 24px = 24 ÷ 16 = 1.5rem.
em = px ÷ daqs tal-font tal-parent. Ġewwa titlu ta’ 20 px, 10px = 0.5em.
px = rem × daqs tal-font tar-root, u px = em × daqs tal-font tal-parent.

rem kontra em: liema għandi nuża?

rem (“root em”) dejjem jirreferi għad-daqs tal-font tal-element html, allura 1.5rem ifisser l-istess ħaġa kullimkien fuq il-paġna. Hija l-aktar għażla sikura għad-daqsijiet tal-font, l-ispazju, il-max-widths u l-gaps tat-tqassim.

em jirreferi għad-daqs tal-font tal-element innifsu (għal font-size, tal-parent). Jakkumula: lista b’0.9em nested tliet darbiet tispiċċa f’0.9 × 0.9 × 0.9 = 73 % tal-bażi. Dan jagħmel em utli għal affarijiet li għandhom jiskalaw mat-test tagħhom stess (il-padding ta’ buttuna, id-daqs ta’ ikona ħdejn tikketta) u riskjuż għat-tipografija globali.

Għaliex rem hu importanti għall-aċċessibbiltà

Ħafna nies jgħollu d-daqs awtomatiku tal-font fis-settings tal-brawżer tagħhom (per eżempju minn 16 għal 20 jew 24 px) minflok jagħmlu żum fuq kull paġna. Id-daqsijiet miktuba f’px jinjoraw din il-preferenza; id-daqsijiet f’rem jew em isegwuha. Jekk tuża rem għat-test u l-ispazju, it-tqassim kollu jikber mal-għażla tal-qarrej, u dan jgħin mal-kriterju ta’ suċċess WCAG 2.2 1.4.4 (it-test jista’ jitkabbar sa 200 %).

Għall-istess raġuni, evita li tissettja html { font-size: 16px; } f’px: uża perċentwal (100%, jew 62.5% jekk trid 1rem = 10px) biex is-setting tal-utent xorta japplika.

X’jibdel il-konvertitur CSS

Jibdel in-numri segwiti minn px fid-dikjarazzjonijiet bil-valur maqsum bid-daqs tal-font tar-root. Qatt ma jmiss kummenti, strings jew valuri url().

Żomm il-wisgħat tal-border u tal-outline f’px: border, border-*-width, outline, outline-offset u column-rule jibqgħu f’px, allura l-linji rqaq jibqgħu ċari. border-radius xorta jiġi kkonvertit.
Żomm il-valuri ta’ 1px: kwalunkwe valur bejn −1px u 1px jibqa’ kif inhu.
Ikkonverti l-media queries għal em (bażi 16px): fil-kondizzjonijiet @media, rem u em dejjem jirreferu għad-daqs inizjali tal-font tal-brawżer, qatt għar-regola html tiegħek, allura l-għodda taqsam b’16 u tikteb em hemm, kwalunkwe daqs tar-root li jkollok. Meta ma jkunx mmarkat, il-media queries jżommu l-px tagħhom.

Mistoqsijiet frekwenti

Kemm pikseli hu 1rem?

16 px awtomatikament. Jekk l-istylesheet tiegħek jissettja html { font-size: 62.5%; }, 1rem = 10 px, u jikber jekk l-utent jgħolli d-daqs awtomatiku tal-font tal-brawżer.

rem huwa l-istess bħal em?

Biss fuq elementi li l-parent tagħhom juża d-daqs tal-font tar-root. rem dejjem iħares lejn l-element html; em iħares lejn il-parent, allura valuri em nested jimmultiplikaw.

Għandi nikkonverti l-borders għal rem?

Normalment le. Border ta’ 1px ikkonvertit għal 0.0625rem jista’ jidher imċajpar jew jisparixxi fuq xi skrins b’daqsijiet tal-font mhux tas-soltu. Għalhekk l-għażliet tal-border u ta’ 1px huma mixgħula awtomatikament.

Iż-żum tal-paġna jagħmel rem bla siwi?

Le. Iż-żum tal-brawżer jiskala px u rem bl-istess mod, imma s-setting tad-daqs awtomatiku tal-font jiskala biss l-unitajiet relattivi. Li tappoġġja t-tnejn huwa parti mir-rispett tal-preferenzi tal-qarrej.

Is-CSS tiegħi jintbagħat xi mkien?

Le. Il-konverżjoni sseħħ kollha fil-brawżer tiegħek u xejn minn dak li twaħħal ma jitlaq mill-apparat tiegħek.