PX uz REM pārveidotājs

Kā lietot PX uz REM pārveidotāju

1. Iestatiet Saknes fonta izmērs (px). Tas ir 16 visās lielākajās pārlūkprogrammās, ja vien jūsu stilu lapa to nemaina. Pogas zem lauka pārslēdz uz 16 px, 10 px (triks html { font-size: 62.5%; }) vai 18 px.
2. Ja strādājat ar em, iestatiet Vecākelementa fonta izmērs em (px): tā elementa aprēķinātais fonta izmērs, kas satur elementu, kuru noformējat.
3. Sadaļā Pārveidot vērtību ievadiet Pikseļi (px), REM vai EM. Pārējie divi lauki atjaunojas, jums rakstot, un rindiņa zemāk parāda izmantoto dalīšanu.
4. Masveida pārveidošanas tabula uzskaita biežākos izmērus. Aizvietojiet Pikseļu vērtības ar saviem dizaina marķieriem (atstarpju skalu, burtu izmēru skalu…) un ar Kopēt tabulu ielīmējiet rezultātu izklājlapā vai dizaina dokumentā.
5. Lai pārnestu esošu kodu, ielīmējiet to laukā Pārveidojamais CSS, izvēlieties opcijas un noklikšķiniet uz Pārveidot px uz rem. Ielādēt piemēru parāda nelielu stilu lapu. Ar Kopēt nokopējiet Pārveidotais CSS.

Formulas

• rem = px ÷ saknes fonta izmērs. Ar noklusējuma 16 px: 24px = 24 ÷ 16 = 1,5rem.
• em = px ÷ vecākelementa fonta izmērs. 20 px virsrakstā 10px = 0,5em.
• px = rem × saknes fonta izmērs un px = em × vecākelementa fonta izmērs.

rem pret em: kuru izmantot?

rem („root em“) vienmēr attiecas uz html elementa fonta izmēru, tāpēc 1.5rem nozīmē vienu un to pašu visā lapā. Tā ir drošākā izvēle fontu izmēriem, atstarpēm, maksimālajiem platumiem un izkārtojuma atstarpēm.

em attiecas uz paša elementa fonta izmēru (font-size gadījumā – uz vecākelementa). Tas uzkrājas: trīs reizes ieligzdots saraksts ar 0,9em beigās ir 0,9 × 0,9 × 0,9 = 73 % no bāzes. Tāpēc em ir ērts lietām, kam jāmērogojas līdz ar savu tekstu (pogas iekšējā atstarpe, ikonas izmērs blakus uzrakstam) un riskants globālajai tipogrāfijai.

Kāpēc rem ir svarīgs pieejamībai

Daudzi cilvēki pārlūkprogrammas iestatījumos palielina noklusējuma fonta izmēru (piemēram, no 16 līdz 20 vai 24 px), nevis tuvina katru lapu. Izmēri px šo iestatījumu ignorē; izmēri rem vai em tam seko. Lietojot rem tekstam un atstarpēm, viss izkārtojums aug līdzi lasītāja izvēlei, kas palīdz izpildīt WCAG 2.2 panākuma kritēriju 1.4.4 (teksta izmēra maiņa līdz 200 %).

Tā paša iemesla dēļ izvairieties no html { font-size: 16px; } rakstīšanas pikseļos: izmantojiet procentus (100% vai 62.5%, ja vēlaties 1rem = 10px), lai lietotāja iestatījums joprojām darbotos.

Ko maina CSS pārveidotājs

Tas aizvieto deklarācijās skaitļus, kam seko px, ar vērtību, dalītu ar saknes fonta izmēru. Tas nekad neskar komentārus, virknes vai url() vērtības.

• Saglabāt apmaļu un kontūru platumus px: border, border-*-width, outline, outline-offset un column-rule paliek px, lai plānas līnijas paliktu asas. border-radius tiek pārveidots.
• Saglabāt 1px vērtības: jebkura vērtība starp −1px un 1px paliek tāda, kāda ir.
• Pārveidot media queries uz em (16px bāze): @media nosacījumos rem un em vienmēr attiecas uz pārlūkprogrammas sākotnējo fonta izmēru, nevis uz jūsu html noteikumu, tāpēc rīks dala ar 16 un tur raksta em neatkarīgi no jūsu saknes izmēra. Ja atzīme noņemta, media queries paliek ar px.