PX to REM Converter

Paano gamitin ang PX to REM converter

1. Itakda ang Root font size (px). 16 ito sa bawat pangunahing browser maliban kung binago ito ng iyong stylesheet. Ang mga button sa ilalim ng field ay lumilipat sa 16 px, 10 px (ang trick na html { font-size: 62.5%; }) o 18 px.
2. Kung gumagamit ka ng em, itakda ang Font size ng parent para sa em (px): ang computed na font size ng element na naglalaman ng ini-istilo mo.
3. Sa ilalim ng Mag-convert ng halaga, mag-type sa Pixel (px), REM o EM. Nag-a-update ang dalawa pang field habang nagta-type ka, at ipinapakita ng linya sa ibaba ang paghahating ginamit.
4. Inililista ng Talahanayan ng bulk conversion ang mga karaniwang laki. Palitan ang Mga halaga sa pixel ng sarili mong mga design token (spacing scale, type scale…) at gamitin ang Kopyahin ang talahanayan para i-paste ang resulta sa spreadsheet o design document.
5. Para i-migrate ang umiiral na code, i-paste ito sa CSS na iko-convert, piliin ang mga opsyon at i-click ang I-convert ang px sa rem. Ipinapakita ng Mag-load ng halimbawa ang maliit na stylesheet. Kopyahin ang Na-convert na CSS gamit ang Kopyahin.

Gumagana ito sa iyong browser. Walang ini-type mo na ipinapadala sa server.

Ang mga pormula

• rem = px ÷ root font size. Sa default na 16 px, ang 24px = 24 ÷ 16 = 1.5rem.
• em = px ÷ font size ng parent. Sa loob ng heading na 20 px, ang 10px = 0.5em.
• px = rem × root font size, at px = em × font size ng parent.

rem o em: alin ang gagamitin?

Ang rem (“root em”) ay laging tumutukoy sa font size ng html element, kaya ang 1.5rem ay may parehong kahulugan saanman sa pahina. Ito ang pinakaligtas na pagpili para sa mga font size, spacing, max-width at gap ng layout.

Ang em ay tumutukoy sa font size ng mismong element (para sa font-size, ang sa parent). Nagpapatong-patong ito: ang listahang 0.9em na tatlong beses na nested ay aabot sa 0.9 × 0.9 × 0.9 = 73 % ng base. Kaya madaling gamitin ang em para sa mga bagay na dapat sumabay sa sarili nilang text (padding ng button, laki ng icon sa tabi ng label) at delikado para sa pandaigdigang typography.

Bakit mahalaga ang rem para sa accessibility

Maraming tao ang nagtataas ng default na font size sa setting ng kanilang browser (halimbawa mula 16 hanggang 20 o 24 px) sa halip na i-zoom ang bawat pahina. Binabalewala ng mga laking nakasulat sa px ang kagustuhang iyon; sinusunod ito ng mga nasa rem o em. Ang paggamit ng rem para sa text at spacing ay hinahayaang lumaki ang buong layout ayon sa pinili ng mambabasa, na nakakatulong sa WCAG 2.2 success criterion 1.4.4 (pagpapalaki ng text hanggang 200 %).

Sa parehong dahilan, iwasang itakda ang html { font-size: 16px; } sa px: gumamit ng porsyento (100%, o 62.5% kung gusto mong 1rem = 10px) para umiral pa rin ang setting ng user.

Ano ang binabago ng CSS converter

Pinapalitan nito ang mga numerong sinusundan ng px sa mga deklarasyon ng halagang hinati sa root font size. Hindi nito kailanman ginagalaw ang mga komento, string o halagang url().

• Panatilihin sa px ang lapad ng border at outline: nananatili sa px ang border, border-*-width, outline, outline-offset at column-rule, para manatiling matalas ang manipis na linya. Kino-convert pa rin ang border-radius.
• Panatilihin ang mga halagang 1px: nananatili ang anumang halaga sa pagitan ng −1px at 1px.
• I-convert ang mga media query sa em (16px na base): sa mga kondisyon ng @media, laging tumutukoy ang rem at em sa paunang font size ng browser, hindi sa iyong html rule, kaya hinahati ng tool sa 16 at nagsusulat ng em doon, anuman ang root size mo. Kapag walang tsek, nananatili sa px ang mga media query.