Претворач на PX во REM

Како да го користите претворачот на PX во REM

1. Подесете Големина на коренскиот фонт (px). Во секој главен прелистувач е 16, освен ако вашата стилска датотека не ја менува. Копчињата под полето префрлаат на 16 px, 10 px (со html { font-size: 62.5%; }) или 18 px.
2. Ако работите со em, подесете Големина на фонтот на родителот за em (px): пресметаната големина на фонтот на елементот што го содржи оној што го стилизирате.
3. Под Претворете вредност внесете во Пиксели (px), REM или EM. Другите две полиња се освежуваат додека пишувате, а линијата подолу го прикажува користеното делење.
4. Табела за масовно претворање наведува вообичаени големини. Заменете ги Вредности во пиксели со ваши дизајн-токени (скала на растојанија, типографска скала…) и користете Копирај табела за да го залепите резултатот во табеларна пресметка или документ за дизајн.
5. За да миграрате постоечки код, залепете го во CSS за претворање, изберете ги опциите и кликнете Претвори px во rem. Вчитај пример прикажува мала стилска датотека. Копирајте го Претворен CSS со Копирај.

Претворањето се извршува целосно во вашиот прелистувач. Ништо од залепеното не се испраќа на сервер.

Формулите

• rem = px ÷ големина на коренскиот фонт. Со основните 16 px, 24px = 24 ÷ 16 = 1,5rem.
• em = px ÷ големина на фонтот на родителот. Во наслов од 20 px, 10px = 0,5em.
• px = rem × големина на коренскиот фонт, а px = em × големина на фонтот на родителот.

rem или em: кој да го користите?

rem („root em“) секогаш се однесува на големината на фонтот на елементот html, па 1.5rem значи исто насекаде на страницата. Тоа е најбезбедниот избор за големини на фонт, растојанија, максимални ширини и празнини во распоредот.

em се однесува на големината на фонтот на самиот елемент (за font-size, на родителот). Се акумулира: листа од 0,9em вгнездена три пати завршува на 0,9 × 0,9 × 0,9 = 73 % од основата. Тоа го прави em практичен за работи што треба да се скалираат со сопствениот текст (padding на копче, големина на икона до ознака) и ризичен за глобална типографија.

Зошто rem е важен за пристапноста

Многу луѓе ја зголемуваат основната големина на фонтот во поставките на прелистувачот (на пример од 16 на 20 или 24 px) наместо да зумираат секоја страница. Големините запишани во px ја игнорираат таа поставка; големините во rem или em ја следат. Користењето rem за текст и растојанија му овозможува на целиот распоред да расте според изборот на читателот, што помага за критериумот за успех 1.4.4 на WCAG 2.2 (промена на големина на текст до 200 %).

Од истата причина избегнувајте да поставувате html { font-size: 16px; } во px: користете процент (100%, или 62.5% ако сакате 1rem = 10px) за поставката на корисникот сè уште да важи.

Што менува CSS претворачот

Ги заменува броевите проследени со px во декларациите со вредноста поделена со големината на коренскиот фонт. Никогаш не допира коментари, низи или вредности url().

• Задржи ширини на рамки и контури во px: border, border-*-width, outline, outline-offset и column-rule остануваат во px, па тенките линии остануваат остри. border-radius сепак се претвора.
• Задржи вредности од 1px: секоја вредност меѓу −1px и 1px останува каква што е.
• Претвори media queries во em (основа 16px): во условите @media, rem и em секогаш се однесуваат на почетната големина на фонтот на прелистувачот, никогаш на вашето правило html, па алатката дели со 16 и таму запишува em, без оглед на вашата коренска големина. Кога не е штиклирано, media queries ги задржуваат своите px.