Konvertues PX në REM

Si ta përdorësh konvertuesin PX në REM

1. Cakto Madhësinë e shkronjës rrënjë (px). Është 16 në çdo shfletues kryesor, përveç kur stilesheeti yt e ndryshon. Butonat nën fushë kalojnë në 16 px, 10 px (truku html { font-size: 62.5%; }) ose 18 px.
2. Nëse punon me em, cakto Madhësinë e shkronjës së prindit për em (px): madhësinë e llogaritur të shkronjës së elementit që përmban atë që po stilizon.
3. Te Konverto një vlerë, shkruaj te Piksele (px), REM ose EM. Dy fushat e tjera përditësohen ndërkohë që shkruan, dhe rreshti poshtë tregon pjesëtimin e përdorur.
4. Tabela e konvertimit në masë rendit madhësi të zakonshme. Zëvendëso Vlerat në piksele me token-et e tua të dizajnit (shkallën e hapësirave, shkallën e shkronjave…) dhe përdor Kopjo tabelën për ta ngjitur rezultatin në një fletë llogaritjeje ose dokument dizajni.
5. Për të migruar kod ekzistues, ngjite te CSS për t’u konvertuar, zgjidh opsionet dhe kliko Konverto px në rem. Ngarko një shembull tregon një stilesheet të vogël. Kopjo CSS-in e konvertuar me butonin Kopjo.

Formulat

• rem = px ÷ madhësia e shkronjës rrënjë. Me parazgjedhjen 16 px, 24px = 24 ÷ 16 = 1,5rem.
• em = px ÷ madhësia e shkronjës së prindit. Brenda një titulli 20 px, 10px = 0,5em.
• px = rem × madhësia e shkronjës rrënjë, dhe px = em × madhësia e shkronjës së prindit.

rem apo em: cilin ta përdor?

rem (“root em”) i referohet gjithmonë madhësisë së shkronjës së elementit html, prandaj 1.5rem do të thotë e njëjta gjë kudo në faqe. Është zgjedhja më e sigurt për madhësi shkronjash, hapësira, gjerësi maksimale dhe boshllëqe faqosjeje.

em i referohet madhësisë së shkronjës së vetë elementit (për font-size, asaj të prindit). Grumbullohet: një listë me 0.9em e fshehur tri herë përfundon në 0,9 × 0,9 × 0,9 = 73 % të bazës. Kjo e bën em të përshtatshëm për gjëra që duhet të shkallëzohen me tekstin e tyre (padding i një butoni, madhësia e një ikone pranë një etikete) dhe të rrezikshëm për tipografinë globale.

Pse rem ka rëndësi për aksesueshmërinë

Shumë njerëz e rrisin madhësinë e parazgjedhur të shkronjave në cilësimet e shfletuesit (për shembull nga 16 në 20 ose 24 px) në vend që ta zmadhojnë çdo faqe. Madhësitë e shkruara në px e shpërfillin këtë preferencë; ato në rem ose em e ndjekin. Përdorimi i rem për tekst e hapësira e lë gjithë faqosjen të rritet sipas zgjedhjes së lexuesit, gjë që ndihmon kriterin e suksesit WCAG 2.2 1.4.4 (ndryshimi i madhësisë së tekstit deri në 200 %).

Për të njëjtën arsye, shmang vendosjen e html { font-size: 16px; } në px: përdor një përqindje (100%, ose 62.5% nëse do 1rem = 10px) që cilësimi i përdoruesit të vazhdojë të vlejë.

Çfarë ndryshon konvertuesi CSS

Zëvendëson numrat e ndjekur nga px në deklarime me vlerën e pjesëtuar me madhësinë e shkronjës rrënjë. Nuk i prek kurrë komentet, vargjet ose vlerat url().

• Mbaj gjerësitë e kornizave dhe të konturave në px: border, border-*-width, outline, outline-offset dhe column-rule mbeten në px, kështu vijat e holla mbeten të mprehta. border-radius konvertohet prapë.
• Mbaj vlerat 1px: çdo vlerë mes −1px dhe 1px mbetet siç është.
• Konverto media query në em (baza 16px): në kushtet @media, rem dhe em i referohen gjithmonë madhësisë fillestare të shkronjave të shfletuesit, kurrë rregullit tënd html, prandaj mjeti pjesëton me 16 dhe shkruan em atje, çfarëdo madhësie rrënjë të kesh. Kur nuk është i shënuar, media query-t mbajnë px.