Ի՞նչ է անում գործիքը
px-ից rem և em փոխարկիչը փոխակերպում է պիքսելային (px) արժեքները rem և em միավորների, և հակառակը: Կարող եք մուտքագրել արժեք երեք միավորներից՝ px, rem կամ em, ցանկացածում, և գործիքն ինքնաշխատ հաշվարկում ու ցուցադրում է համարժեք արժեքները մյուս երկուսում: Բացի «Արժեքներ» դաշտից, կարող եք սահմանել նաև երկու լրացուցիչ պարամետր՝ արմատային տառատեսակի չափը և em կոնտեքստի տառատեսակի չափը, որպեսզի փոխարկումները ճշգրիտ լինեն հենց Ձեր նախագծի համար: Ելքում ցուցադրվում են Ձեր սահմանած արմատային և կոնտեքստային չափերը, փոխարկված արժեքները երեք միավորներում, ինչպես նաև «Տարածված px → rem (16px հիմքով)» աղյուսակը, որը ցույց է տալիս տարածված պիքսելային արժեքների համապատասխանությունը rem-ի հետ՝ ենթադրելով 16px արմատային չափ:
px, rem և em տարբերությունը
Երեք միավորները տարբեր կերպ են հաշվարկվում: px-ը ֆիքսված երկարություն է՝ միշտ նույն մեծությամբ, անկախ ցանկացած այլ պարամետրից: rem-ը չափվում է էջի արմատային տառատեսակի չափի նկատմամբ. եթե արմատը 16px է, ապա 1rem-ը հավասար է 16px-ի: em-ը, ի տարբերություն rem-ի, չափվում է այն կոնկրետ տարրի տառատեսակի չափի նկատմամբ, որում այն օգտագործվում է, ուստի նույն em արժեքը կարող է տարբեր px-ի հավասարվել՝ կախված համատեքստից: Տեքստերի և տարածությունների չափսերը rem-ով սահմանելը թույլ է տալիս ամեն ինչ մասշտաբավորել, երբ ընթերցողը փոխում է բրաուզերի լռելյայն տառատեսակի չափը:
Արմատային տառատեսակի չափի դերը
«Արմատային տառատեսակի չափը (px)» դաշտը սահմանում է այն հիմքը, որի նկատմամբ հաշվարկվում են rem արժեքները: Լռելյայն այս արժեքը 16px է, և գործիքի բացման պահին 16px-ը հավասար է և՛ 1rem-ի, և՛ 1em-ի: Եթե փոխեք այս դաշտի արժեքը՝ Ձեր նախագծի իրական արմատային չափին համապատասխան, բոլոր rem փոխարկումները վերահաշվարկվում են ըստ նոր հիմքի: Օրինակ, եթե արմատային չափը 16px է, ապա 24px արժեքը հավասար է 1.5rem-ի (24 ÷ 16 = 1.5): Դաշտը պետք է պարունակի 0-ից մեծ թիվ. հակառակ դեպքում ցուցադրվում է «Արմատային տառատեսակի չափը պետք է լինի 0-ից մեծ թիվ» հաղորդագրությունը:
em կոնտեքստային չափի դերը
em միավորը հարաբերական է ոչ թե էջի արմատային չափին, այլ այն կոնկրետ տարրի տառատեսակի չափին, որում կիրառվում է, և այդ չափը միշտ չէ, որ համընկնում է արմատայինի հետ: Հենց դրա համար գործիքն ունի առանձին «em կոնտեքստային տառատեսակի չափը (px)» դաշտ, որի լռելյայն արժեքը նույնպես 16px է: Սահմանելով այս դաշտն այն տարրի փաստացի տառատեսակի չափին, որի համար հաշվարկում եք em-ը, ստանում եք ճշգրիտ արդյունք. եթե տարրի չափը հենց արմատայինին հավասար է, թողեք երկու դաշտերն էլ նույնը: Այս դաշտի արժեքը նույնպես պետք է լինի 0-ից մեծ, հակառակ դեպքում ցուցադրվում է «em կոնտեքստային տառատեսակի չափը պետք է լինի 0-ից մեծ թիվ» հաղորդագրությունը:
Ինչպես օգտագործել գործիքը
«Արժեքներ» դաշտում մուտքագրեք թիվ՝ px, rem կամ em նշանակությամբ, ինչպես հուշում է «Մուտքագրե՛ք px, rem կամ em արժեք. մյուս երկուսը կթարմացվեն մուտքագրմանը զուգընթաց» տեքստը. մյուս երկու դաշտերը թարմացվում են ուղիղ Ձեր մուտքագրման ընթացքում: Կարող եք մուտքագրել նաև բացասական պիքսելային արժեքներ. գործիքն այն թույլատրում է: Երբ փոխարկումը կատարված է, ցուցադրվում է «Փոխարկված է բոլոր երեք միավորների միջև» հաղորդագրությունը: Եթե «Արժեքներ» դաշտում մուտքագրած արժեքն անվավեր է, հայտնվում է «Մուտքագրե՛ք թիվ փոխարկելու համար» հաղորդագրությունը: Անհրաժեշտության դեպքում կարգավորեք արմատային և կոնտեքստային տառատեսակի չափերը՝ մինչև Ձեր փոխարկումն սկսելը կամ դրանից հետո. արդյունքները վերահաշվարկվում են անմիջապես:
Ում է օգտակար այս փոխարկիչը
Այս գործիքն օգտակար է նրանց համար, ովքեր պետք է ֆիքսված պիքսելային արժեքները փոխարկեն հարաբերական rem կամ em միավորների՝ հարմարվողական (responsive) դիզայնի համար: Այն նաև օգնում է հասկանալ, թե ինչպես է արմատային տառատեսակի տարբեր չափերն ազդում rem արժեքների վրա, և հաշվարկել em արժեքներ՝ հիմնվելով կոնկրետ տարրի տառատեսակի չափի վրա: Վերջապես, այն նպատակահարմար է նրանց համար, ովքեր ցանկանում են վստահ լինել, որ իրենց սահմանած չափերը ճիշտ մասշտաբավորվում են, երբ ընթերցողը փոխում է իր բրաուզերի լռելյայն տառատեսակի չափը:
Գաղտնիություն
Յուրաքանչյուր փոխարկում կատարվում է Ձեր բրաուզերում: Ձեր մուտքագրած տվյալներից ոչինչ չի վերբեռնվում BroBroGo:
Հաճախ տրվող հարցեր
Ո՞րն է տարբերությունը px, rem և em միջև: px-ը ֆիքսված երկարություն է: rem-ը չափվում է էջի արմատային տառատեսակի չափի նկատմամբ, ուստի 16px արմատի դեպքում 1rem-ը հավասար է 16px-ի: em-ը չափվում է այն տարրի տառատեսակի չափի նկատմամբ, որում այն գտնվում է: Տեքստերի և տարածությունների չափսերը rem-ով սահմանելը թույլ է տալիս ամեն ինչ մասշտաբավորել, երբ ընթերցողը փոխում է բրաուզերի լռելյայն տառատեսակի չափը:
Ինչո՞ւ կա առանձին em կոնտեքստային չափ: em-ը հարաբերական է իր սեփական տարրի տառատեսակի չափին, որը միշտ չէ, որ համընկնում է արմատայինի հետ: Սահմանե՛ք em կոնտեքստը տվյալ տարրի տառատեսակի չափին՝ em-ը ճիշտ հաշվարկելու համար, և պահե՛ք այն արմատայինին հավասար, երբ դրանք համընկնում են:
Ի՞նչ անել, եթե իմ արմատային տառատեսակի չափը 16px չէ: Փոխե՛ք արմատային տառատեսակի չափի դաշտը Ձեր CSS-ին համապատասխան, և յուրաքանչյուր rem արժեք ակնթարթորեն կթարմացվի: Ստորև ներկայացված արագ աղյուսակը հարմար ուղեցույց է սովորական 16px արմատային չափի համար, որից սկսում են կայքերի մեծ մասը: