Ինչպես փոխարկել CSS միավորների միջև՝ px, rem և em

Ինչի համար է պետք CSS միավորների փոխարկիչը

CSS միավորների փոխարկիչը օգնում է նույն թվային արժեքը ներկայացնել տարբեր CSS միավորներով։ Այն կարող է փոխարկել px, em, rem, %, vw, vh, pt, cm, mm և in միավորների միջև՝ հաշվի առնելով հիմքի չափը կամ տեսադաշտի չափերը, երբ դրանք անհրաժեշտ են։ Սա օգտակար է, երբ դիզայնի չափումները պետք է հարմարեցնել տարբեր հիմքերի կամ էկրանների համար։

Փոխարկումը կատարվում է նախ արժեքը պիքսելային արժեքի վերածելով, ապա այն նպատակային միավորի փոխարկելով։ Արդյունքում վերադարձվող փոխարկված արժեքը և միջանկյալ պիքսելային արժեքը հաջող գործողության դեպքում կլորացվում են մինչև չորս տասնորդական նիշ։

Ինչպես կատարել փոխարկումը

Մուտքագրեք թվային արժեքը։ Եթե արժեքը չնշվի, օգտագործվում է 16։
Ընտրեք կամ գրեք սկզբնական միավորը։ Չնշելու դեպքում սկզբնական միավորը px է։ Հասանելի միավորներն են px, em, rem, %, vw, vh, pt, cm, mm և in։
Նշեք նպատակային միավորը։ Եթե այն բաց թողնեք, օգտագործվում է rem։
Անհրաժեշտության դեպքում սահմանեք հիմքի չափը։ Լռելյայն այն 16 է։ em և rem սկզբնական արժեքները բազմապատկվում են այդ չափով, իսկ տոկոսային արժեքները՝ այդ չափով և բաժանվում 100-ի։
vw կամ vh օգտագործելիս լրացրեք տեսադաշտի լայնությունն ու բարձրությունը, եթե լռելյայն չափերը՝ համապատասխանաբար 1920 և 1080, չեն համապատասխանում ձեր հաշվարկին։ vw-ը հիմնվում է լայնության, իսկ vh-ը՝ բարձրության վրա։
Գործարկեք փոխարկումը և դիտեք ստացված թիվը։

Օրինակ՝ pt, cm, mm և in սկզբնական արժեքները նախ հաշվարկվում են իրենց համապատասխան պիքսելային գործակիցներով։ Նպատակային em-ի կամ rem-ի համար պիքսելային արժեքը բաժանվում է հիմքի չափին, իսկ % ստանալու դեպքում այն բազմապատկվում է 100-ով և բաժանվում այդ չափին։ vw և vh արդյունքները հաշվարկվում են համապատասխան տեսադաշտի չափի համեմատ։

Ինչպես մեկնաբանել արդյունքը

Արդյունքում ստացվող թիվը պետք է կարդալ ընտրված հիմքի և տեսադաշտի համատեքստում։ Նույն սկզբնական արժեքը կարող է տալ տարբեր արդյունք, եթե փոխեք հիմքի չափը, տեսադաշտի լայնությունը կամ բարձրությունը։ Հաջող պատասխանում կարող են ներկայացվել թե՛ փոխարկված արժեքը, թե՛ միջանկյալ պիքսելային արժեքը՝ մինչև չորս տասնորդական նիշի կլորացմամբ։

Ստուգեք, որ սկզբնական և նպատակային միավորները գրված լինեն սպասվող ձևով և որ թվային դաշտերը չպարունակեն պատահական նիշեր։ Միավորների նշումները փոքրատառի են վերածվում։ Չճանաչված սկզբնական նշումը գործնականում ընդունվում է որպես արդեն պիքսելային արժեք, իսկ չճանաչված նպատակային նշման դեպքում պիքսելային արժեքը մնում է անփոփոխ։ Այդ պատճառով նման արդյունքը պետք է վերանայել, այլ ոչ թե ընդունել որպես CSS միավորի հաստատված փոխարկում։

Զրո հիմքի չափի դեպքում em, rem կամ % նպատակային փոխարկումները վերադարձնում են զրո։ Զրո համապատասխան տեսադաշտի չափի դեպքում vw կամ vh փոխարկումը նույնպես վերադարձնում է զրո։ Եթե փոխարկման ընթացքում բացառություն առաջանա, գործողությունը վերադարձնում է անհաջող արդյունք՝ բացառության տեքստով։

Գործնական օրինակ

Դիզայները ցանկանում է 16 px չափումը ներկայացնել rem-ով՝ 16 px հիմքի չափ օգտագործող ոճաթերթիկի համար։

Սկզբնական արժեքում մուտքագրեք 16, ընտրեք px որպես սկզբնական և rem որպես նպատակային միավոր, թողեք հիմքի չափը 16 և գործարկեք հաշվարկը։ Ստացված փոխարկված արժեքը կլինի 1.0000, իսկ միջանկյալ պիքսելային արժեքը՝ 16.0000։

Հաջող արդյունքը պարունակում է փոխարկված արժեքը և միջանկյալ պիքսելային արժեքը՝ մինչև չորս տասնորդական նիշով։

Սահմանափակումներ

Չճանաչված միավորների դեպքում փոխարկումը հետևում է պիքսելային անցման կանոնին, իսկ զրո հիմքի կամ համապատասխան տեսադաշտի չափը որոշ փոխարկումների արդյունքը դարձնում է զրո։ Բացառության դեպքում վերադարձվում է անհաջող արդյունք՝ դրա տեքստով։

Հաճախակի սխալներ

Սխալ միավորի նշում օգտագործելը կարող է թվալ, թե փոխարկումն ավարտվել է, քանի որ չճանաչված սկզբնական նշումը դիտարկվում է որպես px, իսկ չճանաչված նպատակային նշումը չի փոխում պիքսելային արժեքը։ Ուղղում՝ ստուգեք նշումը և օգտագործեք աջակցվող փոքրատառ տարբերակներից մեկը։

Հաճախ տրվող հարցեր

Ինչպե՞ս փոխարկել 16 px-ը rem-ի։

Px-ից rem փոխարկման դեպքում լռելյայն արժեքը 16 px է, հիմքի չափը՝ 16, իսկ նպատակային միավորը՝ rem, ուստի հաջող հաշվարկի արդյունքը 1.0 է։

Արդյունքը փոխվո՞ւմ է հիմքի կամ տեսադաշտի չափը փոխելիս։

Այո, %, em և rem արժեքները օգտագործում են հիմքի չափը, իսկ vw և vh արժեքները՝ համապատասխանաբար տեսադաշտի լայնությունն ու բարձրությունը։ Եթե այդ չափերը չնշվեն, կիրառվում են 16, 1920 և 1080 լռելյայն արժեքները։

Ի՞նչ կլինի, եթե սխալ CSS միավոր գրեմ։

Եթե միավորի նշումը չճանաչվի, սկզբնական նշումը դիտարկվում է որպես px, իսկ նպատակային նշումը թողնում է պիքսելային արժեքը անփոփոխ։ Այդ պատճառով նախ ստուգեք նշման գրությունը և կիրառեք աջակցվող միավոր։