რას აკეთებს კონვერტერი
ეს ხელსაწყო px, rem და em ერთეულებს ერთმანეთში გადაჰყავს. სამი ველიდან ნებისმიერში — px, rem ან em — შეგიძლიათ ჩაწეროთ მნიშვნელობა, ხოლო დანარჩენი ორი ავტომატურად და მყისიერად გამოითვლება. ინტერფეისი ამას პირდაპირ გეუბნებათ კიდეც: "შეიყვანეთ px, rem ან em მნიშვნელობა — დანარჩენი ორი განახლდება წერისას." კონვერტაცია ხდება არა ერთხელ ღილაკზე დაჭერით, არამედ წერის დროს, ველი "მნიშვნელობები" რომ შეავსოთ.
დამატებით შეგიძლიათ დააყენოთ საკუთარი ძირეული შრიფტის ზომა და em კონტექსტის შრიფტის ზომა, რათა კონვერტაცია ზუსტად შეესაბამებოდეს თქვენს კონკრეტულ დიზაინს — არა მხოლოდ ნაგულისხმევ 16px ბაზას.
კონვერტერი გამოსადეგია, თუ ფიქსირებულ პიქსელურ მნიშვნელობებს მოქნილ rem ან em ერთეულებში გადაჰყავთ სარესპონსივო დიზაინისთვის, თუ გინდათ გაიგოთ, როგორ მოქმედებს სხვადასხვა ძირეული შრიფტის ზომა rem მნიშვნელობებზე, ან თუ კონკრეტული ელემენტის შრიფტის ზომაზე დაფუძნებული em მნიშვნელობის გამოთვლა გჭირდებათ.
px, rem და em — რა განსხვავებაა
px ფიქსირებული ერთეულია. rem აითვლება გვერდის ძირეული შრიფტის ზომის მიხედვით, ხოლო em — იმ ელემენტის შრიფტის ზომის მიხედვით, რომელშიც თავად მდებარეობს. ხელსაწყოში საწყის მდგომარეობაში, სანამ ველებს არ შეცვლით, 16px, 1rem და 1em ერთმანეთის ტოლია — რადგან ორივე, ძირეული შრიფტის ზომაც და em კონტექსტის ზომაც, ნაგულისხმევად 16px-ია.
განსხვავება პრაქტიკულ მნიშვნელობას იძენს მაშინ, როცა მკითხველი თავად ცვლის ბრაუზერის ნაგულისხმევ შრიფტის ზომას: px-ში მითითებული ზომები უცვლელი რჩება, მაშინ როცა rem-ში თუ em-ში მითითებული ზომები ამ ცვლილებასთან ერთად მასშტაბირდება. სწორედ ამიტომ ეხმარება ეს კონვერტერი px მნიშვნელობების rem თუ em ერთეულებში გადაყვანაში სარესპონსივო და მისაწვდომი დიზაინისთვის.
ძირეული შრიფტის ზომის დაყენება
ველი "ძირეული (root) შრიფტის ზომა (px)" განსაზღვრავს, რის მიმართაც გამოითვლება rem მნიშვნელობები. ნაგულისხმევი მნიშვნელობა 16px-ია, თუმცა თუ თქვენს პროექტში ეს რიცხვი განსხვავებულია, ველის შეცვლა საკმარისია — ყველა rem მნიშვნელობა მყისიერად გადაითვლება ახალი ბაზის მიხედვით. მაგალითად, 24px მნიშვნელობა 16px ძირეულთან 1.5rem-ს უდრის (24 გაყოფილი 16-ზე), მაშინ როცა იმავე 24px-ს 20px ძირეულთან 1.2rem გამოვა (24 გაყოფილი 20-ზე).
ეს ველი მხოლოდ 0-ზე მეტ რიცხვს იღებს. სხვა შემთხვევაში გამოჩნდება შეტყობინება: "ძირეული (root) შრიფტის ზომა უნდა იყოს 0-ზე მეტი რიცხვი."
em კონტექსტის შრიფტის ზომა
em ერთეული, rem-ისგან განსხვავებით, ყოველთვის იმ ელემენტის შრიფტის ზომაზეა დამოკიდებული, სადაც ის გამოიყენება — და ეს ზომა ხშირად არ ემთხვევა გვერდის ძირეულს. ამიტომ ცალკე ველია "em კონტექსტური შრიფტის ზომა (px)", სადაც შეყავთ იმ კონკრეტული ელემენტის შრიფტის ზომა, რომლისთვისაც em მნიშვნელობას ითვლით. ეს ველიც ნაგულისხმევად 16px-ია და ისიც მხოლოდ 0-ზე მეტ რიცხვს იღებს — არასწორი მნიშვნელობის შემთხვევაში ჩნდება შეტყობინება "em კონტექსტური შრიფტის ზომა უნდა იყოს 0-ზე მეტი რიცხვი."
მაგალითად, თუ ელემენტის შრიფტის ზომა 14px-ია და გინდათ იმ ელემენტში 21px padding-ის em მნიშვნელობა, კონტექსტის ველში 14 ჩაწერთ და 21px-ს 1.5em-ად მიიღებთ (21 გაყოფილი 14-ზე).
ნაბიჯ-ნაბიჯ მაგალითი
დავუშვათ, ორივე ველი — ძირეული და em კონტექსტი — ნაგულისხმევ 16px-ზეა დატოვებული. "მნიშვნელობები" ველში რომ 32px ჩაწეროთ, rem სვეტში მყისიერად გამოჩნდება 2rem (32 გაყოფილი 16-ზე), ხოლო em სვეტში — 2em, რადგან კონტექსტიც 16px-ია. თუ ამის მაგივრად 32px-ის ნაცვლად უარყოფით მნიშვნელობას, ვთქვათ -4px, ჩაწერთ, rem სვეტში -0.25rem გამოჩნდება (-4 გაყოფილი 16-ზე) — ხელსაწყო უარყოფითი პიქსელური მნიშვნელობების შეყვანასაც უშვებს. სამივე ველი ერთმანეთთან სინქრონულია: ნებისმიერის შეცვლა დანარჩენ ორს წერის დროსვე ცვლის.
ხშირად გამოყენებადი px → rem ცხრილი, შეცდომები და კონფიდენციალურობა
გვერდზეა ცხრილიც სახელწოდებით "ხშირად გამოყენებადი px → rem (16px ბაზა)", რომელიც აჩვენებს ხშირად გამოყენებად პიქსელურ მნიშვნელობებს უკვე rem-ში გადაყვანილს, 16px ძირეული ბაზის დაშვებით — მოსახერხებელია, თუ თქვენს დიზაინში სწორედ სტანდარტული 16px ბაზა გამოიყენება. ამ ბაზაზე გამოთვლა უბრალო გაყოფაა 16-ზე: მაგალითად, 8px იქნება 0.5rem, 40px იქნება 2.5rem, ხოლო 64px იქნება 4rem.
თუ "მნიშვნელობები" ველში რიცხვი ვერ ამოვიცანით, ხელსაწყო აჩვენებს შეტყობინებას "კონვერტაციისთვის შეიყვანეთ რიცხვი." — იგივე ლოგიკა მოქმედებს ორივე შრიფტის ზომის ველზეც, თავიანთი შესაბამისი შეტყობინებებით.
რაც შეეხება მონაცემებს — ყოველი კონვერტაცია თქვენს ბრაუზერში სრულდება, და თქვენ მიერ შეყვანილი მონაცემები BroBroGo-ზე არ იტვირთება.
ხშირად დასმული კითხვები
რატომ არის თავიდან 16px, 1rem და 1em ერთმანეთის ტოლი? რადგან ხელსაწყოში ორივე — ძირეული შრიფტის ზომაც და em კონტექსტის ზომაც — ნაგულისხმევად 16px-ია, სანამ თავად არ შეცვლით.
შემიძლია უარყოფითი px მნიშვნელობის შეყვანა? დიახ, ხელსაწყო უარყოფითი პიქსელური მნიშვნელობების შეყვანასაც უშვებს.
რა ხდება, თუ ძირეული ან em კონტექსტის ველში არასწორ რიცხვს ჩავწერ? ძირეული შრიფტის ზომის ველისთვის გამოჩნდება "ძირეული (root) შრიფტის ზომა უნდა იყოს 0-ზე მეტი რიცხვი.", ხოლო em კონტექსტის ველისთვის — "em კონტექსტური შრიფტის ზომა უნდა იყოს 0-ზე მეტი რიცხვი." ორივე ველი მხოლოდ 0-ზე მეტ რიცხვს იღებს.
ვისთვისაა გამოსადეგი ეს კონვერტერი? მათთვის, ვინც ფიქსირებულ პიქსელურ მნიშვნელობებს გადაჰყავს მოქნილ rem ან em ერთეულებში სარესპონსივო დიზაინისთვის, ვისაც სურს გაიგოს, როგორ მოქმედებს სხვადასხვა ძირეული შრიფტის ზომა rem მნიშვნელობებზე, და მათთვის, ვისაც სჭირდება კონკრეტული ელემენტის შრიფტის ზომაზე დაფუძნებული em მნიშვნელობის გამოთვლა.
საჭიროა თუ არა em კონტექსტის ველის ცვლილება, თუ ჩემი ელემენტის შრიფტის ზომა ძირეულს ემთხვევა? არა — თუ ელემენტის შრიფტის ზომა ძირეულის ტოლია, em კონტექსტის ველი შეგიძლიათ ძირეულის ტოლფასადვე დატოვოთ.