Kam skirtas šis konverteris
„px į rem ir em konverteris“ paverčia pikselių (px) reikšmes į rem ir em vienetus, ir atvirkščiai. Reikšmę galite įvesti bet kuriuo iš trijų vienetų, o įrankis automatiškai apskaičiuoja ir parodo atitinkamas reikšmes kituose dviejuose vienetuose. Papildomai galite nustatyti savo pagrindinį (root) šrifto dydį ir em konteksto šrifto dydį, kad konvertavimas atitiktų būtent jūsų projekto poreikius.
Šis konverteris naudingas, kai reikia fiksuotas pikselių reikšmes paversti santykiniais rem ar em vienetais adaptyviam dizainui, kai norite suprasti, kaip skirtingi pagrindinio šrifto dydžiai veikia rem reikšmes, kai reikia apskaičiuoti em reikšmę pagal konkretaus elemento šrifto dydį, arba kai siekiate, kad jūsų dydžiai teisingai keistųsi, jei skaitytojas pakeičia numatytąjį naršyklės šrifto dydį.
Kaip veikia konvertavimas rašant
Įrankyje yra trys pagrindiniai laukai: „Pagrindinis (root) šrifto dydis (px)“, „em kontekstinis šrifto dydis (px)“ ir „Reikšmės“. Kai redaguojate bet kurį iš px, rem arba em laukų, kiti du atsinaujina tuo pat metu, kai rašote — kaip primena ir pati sąsaja: „Įveskite px, rem arba em reikšmę – kitos dvi atsinaujins jums rašant.“
Pradiniu momentu, kol nieko nepakeitėte, 16px lygu 1rem lygu 1em, nes numatytasis pagrindinis šrifto dydis ir numatytasis em konteksto dydis abu yra 16px. Tai reiškia, kad tuo metu Reikšmių lauke įvedus, pavyzdžiui, 24 px, kituose laukuose įrankis parodys 1,5rem ir 1,5em (24 padalyta iš 16 lygu 1,5). Tas pats veikia ir priešinga kryptimi: jei Reikšmių lauke vietoje px įrašysite 2rem, likus numatytiems 16px, įrankis kituose laukuose parodys 32px ir 2em. Įrankis taip pat leidžia įvesti neigiamas pikselių reikšmes: įvedus -8 px, kol pagrindinis ir konteksto dydžiai lieka numatytieji 16px, atitinkama reikšmė bus -0,5rem ir -0,5em.
Pagrindinio šrifto dydžio nustatymas
Laukas „Pagrindinis (root) šrifto dydis (px)“ nurodo bazinį šrifto dydį pikseliais, nuo kurio skaičiuojamos rem reikšmės. Numatytasis pagrindinio šrifto dydžio nustatymas yra 16px. Jei jūsų projektas naudoja kitokį pagrindinį dydį, pakeiskite šį lauką — tai leis konvertavimui atitikti jūsų konkretaus dizaino poreikius. Pavyzdžiui, pagrindinį šrifto dydį pakeitus į 20px ir Reikšmių lauke įvedus 40 px, įrankis parodys 2rem (40 padalyta iš 20 lygu 2), o ne 2,5rem, kaip būtų prie numatytojo 16px pagrindo. Reikšmė šiame lauke privalo būti skaičius, didesnis už 0.
em konteksto šrifto dydžio nustatymas
Laukas „em kontekstinis šrifto dydis (px)“ nurodo elemento, kuriam skaičiuojate em reikšmę, šrifto dydį pikseliais. Numatytasis em konteksto šrifto dydis taip pat yra 16px. Šis laukas svarbus, nes em vienetas priklauso nuo elemento, kuriame jis naudojamas, o ne nuo puslapio pagrindinio šrifto dydžio — todėl nustatę tikslų konteksto dydį gaunate tikslią em reikšmę. Pavyzdžiui, jei pagrindinis šrifto dydis lieka 16px, o em konteksto dydį pakeičiate į 20px, tuomet Reikšmių lauke įvedus 30 px, įrankis parodys 1,875rem (30 padalyta iš 16), bet 1,5em (30 padalyta iš 20) — dvi skirtingos reikšmės tai pačiai px reikšmei, priklausomai nuo to, ar skaičiuojate pagal pagrindinį, ar pagal konteksto dydį. Kaip ir pagrindinio šrifto dydžio atveju, em konteksto lauke įvesta reikšmė privalo būti skaičius, didesnis už 0.
Dažni px → rem atitikmenys
Po konvertavimo laukų įrankis rodo lentelę „Dažni px → rem (16px pagrindas)“ — joje surinktos dažniausiai naudojamos pikselių reikšmės, paverstos į rem, laikant, kad pagrindinis šrifto dydis yra 16px. Ši lentelė patogi, kai norite greitai pasitikrinti įprastą reikšmę, nekeisdami pagrindinio ar konteksto laukų.
Klaidos ir leidžiamos reikšmės
Jei „Reikšmės“ lauke įvedate netinkamą reikšmę, įrankis parodo pranešimą „Įveskite skaičių, kurį norite konvertuoti.“ Jei netinkama reikšmė įvedama lauke „Pagrindinis (root) šrifto dydis (px)“, rodomas pranešimas „Pagrindinis (root) šrifto dydis turi būti skaičius, didesnis už 0.“ O jei netinkama reikšmė įvedama „em kontekstinis šrifto dydis (px)“ lauke, pasirodo pranešimas „em kontekstinis šrifto dydis turi būti skaičius, didesnis už 0.“ Skirtingai nei pagrindinio ir konteksto šrifto dydžio laukuose, „Reikšmės“ lauke neigiamos pikselių reikšmės yra leidžiamos.
Duomenų privatumas
Kiekvienas konvertavimas atliekamas jūsų naršyklėje. Jokie įvesti duomenys nėra siunčiami į „BroBroGo“.
Dažniausiai užduodami klausimai
Kuo skiriasi px, rem ir em? px yra fiksuotas ilgis. rem matuojamas pagal puslapio pagrindinį (root) šrifto dydį, todėl esant 16px pagrindui, 1rem lygus 16px. em matuojamas pagal elemento, kuriame jis yra, šrifto dydį. Naudojant rem šriftams ir tarpams, viskas proporcingai keičiasi, kai skaitytojas pakeičia savo numatytąjį naršyklės šrifto dydį.
Kodėl yra atskiras em konteksto dydis? em vienetas yra santykinis pagal savo paties elemento šrifto dydį, kuris ne visada sutampa su pagrindiniu (root). Nustatykite em kontekstą pagal to elemento šrifto dydį, kad teisingai apskaičiuotumėte em reikšmę, arba palikite jį lygų pagrindiniam dydžiui, jei jie sutampa.
Ką daryti, jei mano pagrindinis šrifto dydis nėra 16px? Pakeiskite pagrindinio šrifto dydžio laukelį, kad jis atitiktų jūsų CSS, ir kiekviena rem reikšmė akimirksniu atsinaujins. Lentelė su dažniausiai naudojamu 16px pagrindu lieka patogus orientyras, net jei jūsų projektas naudoja kitokį pagrindinį dydį.