Mida see konverter teeb
Tööriist teisendab pikslites väärtused rem- ja em-ühikuteks ning tagasi. Sisestage väärtus ükskõik millisesse kolmest ühiku väljast ja ülejäänud kaks arvutatakse ning kuvatakse automaatselt. Lisaks teisendusele endale saate määrata oma juurfondi suuruse ja em konteksti fondi suuruse, nii et saadud arvud vastavad teie tegeliku kujunduse tingimustele, mitte üldisele vaikeväärtusele.
Px, rem ja em — mida iga väli tähistab
Konverter koosneb kolmest väljast: Juurfondi suurus (px) sisaldab baasfondi suurust pikslites, mille suhtes rem-väärtusi mõõdetakse. em konteksti fondi suurus (px) sisaldab selle konkreetse elemendi fondi suurust pikslites, mille jaoks em-väärtust arvutate. Väärtused on koht, kuhu sisestate pikkuse enda — pikslites, rem-ides või em-ides. Alguspunktis, enne kui midagi muudate, tähistavad 16px, 1rem ja 1em kõik sama pikkust — see on baasjoon, millest tööriist alustab, kuni te seda ei muuda.
Juurfondi ja em konteksti suuruse seadistamine
Juurfondi suuruse väli on tavaline arv ja see peab olema suurem kui 0. Vaikimisi on see 16px, millest tööriist iga kord alustab, kui te seda ei muuda. Selle väärtuse suhtes mõõdetakse teie rem-teisendusi, seega kui teie projekti tegelik juurfondi suurus erineb vaikeväärtusest, hoiab selle välja uuendamine rem-väärtused teie kujunduse jaoks täpsena. Kui tühjendate välja või sisestate midagi, mis ei ole kehtiv positiivne arv, kuvab tööriist teate "Juurfondi suurus peab olema arv, mis on suurem kui 0."
em konteksti väli töötab samamoodi — arv, mis on suurem kui 0, vaikimisi 16px —, kuid sellel on teine eesmärk. Kuna em-väärtus on suhteline selle konkreetse elemendi fondi suurusega, millesse see kuulub (mitte tingimata lehe juurelemendiga), küsib tööriist selle elemendi fondi suurust eraldi. Seda välja kasutate siis, kui peate arvutama em-väärtuse ühe kindla elemendi, mitte kogu lehe põhjal. Kui sisestate siia midagi kehtetut, kuvab tööriist teate "em konteksti fondi suurus peab olema arv, mis on suurem kui 0."
Väärtuste sisestamine ja teisenemise jälgimine
Väärtuste ala annab teile välja iga kolme ühiku jaoks. Muutke ükskõik millist neist — px, rem või em — ja ülejäänud kaks arvutatakse ümber tippimise ajal, kasutades hetkel määratud juur- ja em konteksti fondi suurust. Näiteks, kui jätate nii juurfondi kui ka em konteksti vaikeväärtuseks 16px ja sisestate px väljale 24, uueneb rem väli väärtusele 1,5rem ja em väli väärtusele 1,5em, kuna 24 jagatud 16-ga on 1,5.
Negatiivsed pikslisuurused on lubatud, seega väärtus nagu -8px teiseneb samamoodi nagu positiivne — 16px vaikeväärtuste juures muutub see -0,5rem-iks. Kui sisestate väärtuste väljale midagi, mis ei ole kehtiv arv, kuvab tööriist teate "Sisestage teisendamiseks arv."
Teisendustulemus sõltub alati hetkel määratud juurfondi ja em konteksti suurusest. 16px juurfondi suuruse korral vastab px väljal olev 40 väärtusele 2,5rem, sest 40 jagatud 16-ga on 2,5. Kui teie projekti juurfondi suurus on selle asemel 20px, vastab sama 40px väärtusele 2rem, sest 40 jagatud 20-ga on 2 — seega tasub juurfondi suuruse väli seada vastavaks oma tegelikule CSS-ile, enne kui väärtusi loete.
Tabeli "Levinud px → rem (16px baasil)" lugemine
Teisendusväljade all kuvab tööriist tabeli Levinud px → rem (16px baasil) — tabeli levinud pikslisuurustest, mis on teisendatud rem-iks konkreetselt 16px juurfondi suuruse suhtes. See on eraldiseisev kiirviide elavate teisendusväljade kõrval, kasulik siis, kui soovite kiiresti kontrollida mõnda tüüpilist väärtust, sisestamata iga väärtust eraldi Väärtuste väljale.
Kus teie numbreid töödeldakse
Iga teisendus toimub teie brauseris. Midagi teie sisestatust ei laadita BroBroGo serverisse.
Kellele see tööriist mõeldud on
See sobib kõigile, kes teisendavad fikseeritud pikslisuurusi suhtelisteks rem- või em-ühikuteks responsiivse paigutuse jaoks, kõigile, kes soovivad näha, kuidas juurfondi suuruse muutmine mõjutab saadud rem-väärtusi, ja kõigile, kes arvutavad em-väärtust, mis sõltub konkreetse elemendi enda fondi suurusest. Samuti on see kasulik, kui soovite tagada, et teie suurused töötavad ka siis, kui lugeja muudab oma vaikimisi fondi suurust.
Korduma kippuvad küsimused
Mis vahe on px, rem ja em ühikutel? px on fikseeritud pikkus. rem-i mõõdetakse lehe juurfondi suuruse (root font size) suhtes, seega 16px juure puhul võrdub 1rem 16 piksliga. em-i mõõdetakse selle elemendi fondi suuruse suhtes, milles see asub. Kirja ja vahemike määramine rem-ühikutes võimaldab kõigel skaleeruda, kui lugeja muudab oma brauseri vaikimisi fondi suurust.
Miks on olemas eraldi em konteksti suurus? em suhestub selle enda elemendi fondi suurusega, mis ei pruugi alati olla juurelement. Seadistage em kontekst selle elemendi fondi suurusele, et em-väärtust õigesti lugeda, ja hoidke see võrdsena juurega, kui need kaks kattuvad.
Mis siis, kui minu juurfondi suurus ei ole 16px? Muutke juurfondi suuruse (root font size) välja vastavalt oma CSS-ile ja iga rem-väärtus uueneb koheselt. Allpool olev kiire tabel on mugavaks juhiseks levinud 16px juure puhul, millest enamik veebisaite alustab.