Pereiti prie turinio
🛠️
Whiz Tools

PX į REM į EM keitiklis – Nemokamas CSS vienetų skaičiuotuvas

Akimirksniu konvertuokite pikselius į REM ir EM vienetus. Nemokamas CSS vienetų keitiklis jautriam žiniatinklio dizainui. Palaiko pasirinktinį šrifto dydį ir realaus laiko skaičiavimus tiksliausiems rezultatams.

PX, REM ir EM vienetų keitiklis

Konvertuokite tarp pikselių (PX), šaknies em (REM) ir em (EM) vienetų. Įveskite reikšmę bet kuriame lauke, kad pamatytumėte ekvivalentines reikšmes kituose vienetuose.

px
px
px
rem
em
Vizualizacija nepasiekiama neigiamoms ar nulinėms reikšmėms

Konvertavimo formulės

  • PX į REM: reikšmė pikseliais ÷ šaknies šrifto dydis
  • PX į EM: reikšmė pikseliais ÷ tėvinio elemento šrifto dydis
  • REM į PX: reikšmė rem × šaknies šrifto dydis
  • EM į PX: reikšmė em × tėvinio elemento šrifto dydis
Įkrovimo skaičiuotuvas...
📚

Dokumentacija

PX, REM ir EM vienetų keitiklis

px į rem ir em keitiklis perskaičiuoja CSS ilgio reikšmę tarp pikselių (px), šakninio em (rem) ir em, naudodamas naudotojo nustatytus šakninio elemento ir tėvinio elemento šrifto dydžius. Šie trys vienetai yra dažniausiai naudojami teksto ir tarpų dydžiui CSS – kalboje, naudojamoje tinklalapių stiliui nustatyti.

Kas yra px, rem ir em?

Pikselis (px) yra fiksuotas vienetas. 200px pločio laukelis išlieka 200px pločio, nesvarbu, kokį šrifto dydį naudoja puslapis.

rem („root em“) yra vienetas, kurio dydis kinta pagal puslapio šakninio elemento, paprastai <html> žymos, šrifto dydį. Dauguma naršyklių nustato 16px šakninio elemento šrifto dydį, nebent svetainė jį pakeičia. Jei šakninio elemento šrifto dydis yra 16px, tuomet 1rem lygu 16px.

em yra vienetas, kurio dydis kinta pagal tėvinio elemento, t. y. elemento, kuriame jis yra, šrifto dydį. Jei tėvinio elemento reikšmė yra font-size: 20px, tuomet jame esantis 1em lygus 20px.

Pagrindinis skirtumas tarp rem ir em yra tai, su kuo kiekvienas iš jų lyginamas. Rem visada remiasi šakniniu elementu. Em remiasi artimiausiu tėviniu elementu, todėl jo reikšmė gali keistis kiekviename įdėjimo lygyje.

Kaip perskaičiuoti px į rem

Norėdami pikselius perskaičiuoti į rem, pikselių reikšmę padalykite iš šakninio elemento šrifto dydžio:

r=pRr = \frac{p}{R}

čia r yra ilgis rem vienetais, p – ilgis pikseliais, o R – šakninio elemento šrifto dydis pikseliais.

Išspręstas pavyzdys

Kai numatytasis šakninio elemento šrifto dydis yra 16px, 24px perskaičiuojami taip:

24 ÷ 16 = 1,5rem

Jei svetainė nustato 10px šakninio elemento šrifto dydį (įprasta gudrybė, nustatant html { font-size: 62.5%; }, nes 62,5 % nuo 16px yra 10px), tie patys 24px tampa:

24 ÷ 10 = 2,4rem

Kaip perskaičiuoti rem į px

Norėdami atlikti atvirkštinį perskaičiavimą, rem reikšmę padauginkite iš šakninio elemento šrifto dydžio:

p=r×Rp = r \times R

čia p yra ilgis pikseliais, r – ilgis rem vienetais, o R – šakninio elemento šrifto dydis.

Kai šakninio elemento šrifto dydis yra 16px, 1.5rem perskaičiuojami atgal taip: 1,5 × 16 = 24px.

Kaip perskaičiuoti px į em

Norėdami pikselius perskaičiuoti į em, pikselių reikšmę padalykite iš tėvinio elemento šrifto dydžio:

e=pPe = \frac{p}{P}

čia e yra ilgis em vienetais, o P – tėvinio elemento šrifto dydis pikseliais.

Išspręstas pavyzdys

Jei pagrindinio elemento šrifto dydis yra 20px, tuomet 24px perskaičiuojami taip:

24 ÷ 20 = 1,2em

Kaip perskaičiuoti em į px

Em reikšmę padauginkite iš pagrindinio elemento šrifto dydžio:

p=e×Pp = e \times P

čia p yra ilgis pikseliais, e – ilgis em vienetais, o P – pagrindinio elemento šrifto dydis.

Kai pagrindinio elemento šrifto dydis yra 20px, 1.2em perskaičiuojami atgal taip: 1,2 × 20 = 24px.

Kaip perskaičiuoti rem į em ir em į rem

Kadangi rem ir em lyginami su skirtingais šrifto dydžiais, norint juos perskaičiuoti vieną į kitą reikia ir šakninio, ir tėvinio elemento šrifto dydžio:

e=r×RPe = r \times \frac{R}{P}

r=e×PRr = e \times \frac{P}{R}

čia R yra šakninio elemento šrifto dydis, o P – pagrindinio elemento šrifto dydis.

Išspręstas pavyzdys

Kai šakninio elemento šrifto dydis yra 16px, o tėvinio elemento – 20px, 2rem perskaičiuojami taip:

2 × (16 ÷ 20) = 1,6em

Jei šakninio ir pagrindinio elementų šrifto dydžiai yra vienodi, 1rem visada lygu 1em.

Kada naudinga naudoti kiekvieną vienetą

Pikseliai tinka detalėms, kurių dydis neturėtų keistis, pavyzdžiui, 1px kraštinei arba fiksuoto pločio piktogramai.

Rem dažnai naudojamas tarpams ir tipografijai, kurie turėtų išlikti vienodi visame puslapyje. Kadangi jis visada remiasi šakninio elemento šrifto dydžiu, rem reikšmė nesikeičia, nesvarbu, kaip giliai elementas įdėtas. Tai taip pat reiškia, kad rem pagrįsti išdėstymai automatiškai prisitaiko, kai naudotojas padidina numatytąjį naršyklės šrifto dydį, todėl jie patogesni silpnaregiams.

Em gerai veikia viename savarankiškame komponente, pavyzdžiui, mygtuke, kai vidiniai tarpai turėtų didėti kartu su paties mygtuko šrifto dydžiu. Dažna em problema yra kaupimasis: jei keliuose vienas į kitą įdėtuose elementuose naudojama font-size: 1.2em, kiekvienas lygis daugina ankstesnio lygio reikšmę, todėl šrifto dydžiai auga greičiau, nei numatyta.

1.level-1 { font-size: 1.2em; }  /* 19.2px, if the parent is 16px */
2.level-2 { font-size: 1.2em; }  /* 23.04px (19.2px × 1.2) */
3.level-3 { font-size: 1.2em; }  /* 27.65px (23.04px × 1.2) */
4

Po trijų lygių tekstas padidėja maždaug 73 %, o ne 20 %, kaip programuotojas galėtų tikėtis iš vienos 1.2em taisyklės.

Keitiklio naudojimas

  1. Įveskite reikšmę į pikselių, rem arba em lauką.
  2. Kiti du laukai atnaujinami automatiškai, reikšmes suapvalinant iki keturių skaitmenų po kablelio.
  3. Nustatykite šakninio elemento šrifto dydį, atitinkantį projekto <html> elemento dydį. Daugumoje naršyklių numatytoji reikšmė yra 16px; ji turi įtakos tik rem.
  4. Nustatykite tėvinio elemento šrifto dydį, atitinkantį elemento, kuriame būtų em reikšmė, šrifto dydį. Jis turi įtakos tik em.
  5. Norėdami nukopijuoti lauko reikšmę, paspauskite šalia jo esantį kopijavimo mygtuką.

Abiejuose šrifto dydžio laukuose galima įvesti sveikąjį pikselių skaičių, o mažiausia leidžiama reikšmė yra 1px. Atkūrimo mygtukas išvalo reikšmę ir abiem šrifto dydžiams vėl nustato 16px.

Po laukais įrankis nubrėžia po vieną juostą kiekvienam vienetui. Visos trys juostos žymi tą patį fizinį ilgį, todėl jų plotis vienodas – tai greitas patikrinimas, ar perskaičiavimas atliktas teisingai. Juosta rodoma tikruoju pikselių ilgiu, jei jis neviršija 300px; ilgesnės reikšmės sumažinamos, kad tilptų, todėl 600px ir 900px reikšmės abi baigiasi ties 300px. Juostos rodomos tik tada, kai pikselių reikšmė yra didesnė už nulį.

Dažnai užduodami klausimai

Kuo skiriasi rem ir em? Rem visada remiasi šakninio elemento šrifto dydžiu. Em remiasi artimiausio tėvinio elemento šrifto dydžiu. Rem reikšmė visame puslapyje išlieka tokia pati, o em reikšmė gali keistis priklausomai nuo to, kaip giliai elementas įdėtas.

Kodėl naršyklės kaip numatytąjį šrifto dydį naudoja 16px? 16px jau seniai yra numatytasis teksto dydis pagrindinėse naršyklėse, nes įprastuose ekranuose jį patogu skaityti be papildomų stiliaus taisyklių. Žiniatinklio prieinamumo rekomendacijose patariama užtikrinti, kad tekstą būtų galima padidinti iki 200 % nesugadinant puslapio išdėstymo, o 16px tam yra praktiškas pradinis dydis.

Kas yra 62,5 % gudrybė? Nustačius html { font-size: 62.5%; }, numatytasis 16px šakninio elemento šrifto dydis pakeičiamas į 10px, nes 62,5 % nuo 16 yra 10. Tai palengvina rem skaičiavimus, nes 1,6rem lygu 16px, o 2,4rem lygu 24px.

Ar px, rem ir em reikšmės gali būti neigiamos? Taip, jei savybėms leidžiami neigiami ilgiai, pavyzdžiui, paraštėms arba CSS transformacijoms. CSS neleidžia neigiamų vidinių tarpų; naršyklės neigiamą vidinių tarpų reikšmę ignoruoja. Keitiklis apdoroja neigiamas reikšmes, tačiau joms juostų nepiešia, nes juostos plotis negali būti neigiamas.

Ar kiekvieną pikselių reikšmę reikėtų perskaičiuoti į rem? Nebūtinai. Kraštinės ir kitos smulkios detalės paprastai paliekamos pikseliais, nes joms retai reikia keistis kartu su šrifto dydžiu, be to, dalies pikselio pločio kraštinės gali atrodyti netolygiai. Rem tinka tarpams ir tipografijai, kurie turėtų keistis pagal naudotojo pasirinktą šrifto dydį.

Ar vieneto pasirinkimas turi įtakos puslapio našumui? Ne. Išdėstymo metu naršyklės kiekvieną CSS ilgio reikšmę perskaičiuoja į tą pačią vidinę reikšmę, todėl px, rem ir em atvaizduojami vienodai greitai. Pasirinkimas tarp jų turi įtakos priežiūrai ir prieinamumui, o ne spartai.