Pāriet uz saturu
🛠️
Whiz Tools

PX uz REM uz EM pārveidotājs – Bezmaksas CSS vienību kalkulators

Momentāli pārveidojiet pikseļus uz REM un EM vienībām. Bezmaksas CSS vienību pārveidotājs atsaucīgai tīmekļa dizainā. Atbalsta pielāgotas fonta izmērus un reāllaika aprēķinus precīziem rezultātiem.

PX, REM un EM vienību pārveidotājs

Pārveidojiet starp pikseļiem (PX), saknes em (REM) un em (EM) vienībām. Ievadiet vērtību jebkurā laukā, lai redzētu ekvivalentās vērtības citās vienībās.

px
px
px
rem
em
Vizualizācija nav pieejama negatīvām vai nulles vērtībām

Pārveidošanas formulas

  • PX uz REM: vērtība pikseļos ÷ saknes fonta izmērs
  • PX uz EM: vērtība pikseļos ÷ vecākelementa fonta izmērs
  • REM uz PX: vērtība rem × saknes fonta izmērs
  • EM uz PX: vērtība em × vecākelementa fonta izmērs
Ielādes kalkulators...
📚

Dokumentācija

PX, REM un EM mērvienību pārveidotājs

px uz rem un em pārveidotājs maina CSS garuma mērvienību starp pikseļiem (px), saknes em (rem) un em, izmantojot saknes fonta lielumu un vecākelementa fonta lielumu, ko iestata lietotājs. Šīs trīs mērvienības ir visbiežāk izmantotie veidi teksta un atstarpju izmēra noteikšanai CSS — valodā, ko izmanto tīmekļa lapu stilizēšanai.

Kas ir px, rem un em?

Pikselis (px) ir fiksēta mērvienība. Elementa platums, kas iestatīts uz 200px, paliek 200px neatkarīgi no lapā izmantotā fonta lieluma.

rem (“saknes em”) ir mērvienība, kas mainās atbilstoši lapas saknes elementa fonta lielumam; parasti tas ir <html> tags. Lielākā daļa pārlūkprogrammu iestata saknes fonta lielumu uz 16px, ja vien vietne to nemaina. Ja saknes fonta lielums ir 16px, tad 1rem ir vienāds ar 16px.

em ir mērvienība, kas mainās atbilstoši vecākelementa fonta lielumam — elementam, kurā tā atrodas. Ja vecākelementam ir font-size: 20px, tad 1em šajā elementā ir vienāds ar 20px.

Galvenā atšķirība starp rem un em ir tas, pret ko katra mērvienība tiek mērīta. Rem vienmēr izmanto saknes elementu. Em izmanto tuvāko vecākelementu, tāpēc tā vērtība var mainīties katrā ligzdošanas līmenī.

Kā aprēķināt px uz rem

Lai pikseļus pārveidotu rem, pikseļu vērtība jāizdala ar saknes fonta lielumu:

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

kur r ir garums rem, p — garums pikseļos, bet R — saknes fonta lielums pikseļos.

Aprēķina piemērs

Ar noklusējuma saknes fonta lielumu 16px 24px tiek pārveidoti par:

24 ÷ 16 = 1,5rem

Ja vietne iestata saknes fonta lielumu uz 10px (izplatīts paņēmiens, iestatot html { font-size: 62.5%; }, jo 62,5% no 16px ir 10px), tie paši 24px kļūst par:

24 ÷ 10 = 2,4rem

Kā aprēķināt rem uz px

Lai veiktu pretēju pārveidošanu, rem vērtība jāreizina ar saknes fonta lielumu:

p=r×Rp = r \times R

kur p ir garums pikseļos, r — garums rem, bet R — saknes fonta lielums.

Ar 16px lielu saknes fontu 1.5rem tiek pārveidots atpakaļ par 1,5 × 16 = 24px.

Kā aprēķināt px uz em

Lai pikseļus pārveidotu em, pikseļu vērtība jāizdala ar vecākelementa fonta lielumu:

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

kur e ir garums em, bet P — vecākelementa fonta lielums pikseļos.

Aprēķina piemērs

Ja vecākelementa fonta lielums ir 20px, tad 24px tiek pārveidoti par:

24 ÷ 20 = 1,2em

Kā aprēķināt em uz px

Em vērtība jāreizina ar vecākelementa fonta lielumu:

p=e×Pp = e \times P

kur p ir garums pikseļos, e — garums em, bet P — vecākelementa fonta lielums.

Ar 20px lielu vecākelementa fontu 1.2em tiek pārveidots atpakaļ par 1,2 × 20 = 24px.

Kā aprēķināt rem uz em un em uz rem

Tā kā rem un em tiek mērītas pret atšķirīgiem fonta lielumiem, pārveidošanai starp tām nepieciešams gan saknes fonta lielums, gan vecākelementa fonta lielums:

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

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

kur R ir saknes fonta lielums, bet P — vecākelementa fonta lielums.

Aprēķina piemērs

Ja saknes fonta lielums ir 16px un vecākelementa fonta lielums ir 20px, 2rem tiek pārveidots par:

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

Ja saknes un vecākelementa fonta lielumi ir vienādi, 1rem vienmēr ir vienāds ar 1em.

Kad katra mērvienība ir noderīga

Pikseļi ir piemēroti detaļām, kuru izmēram nevajadzētu mainīties, piemēram, 1px apmalei vai fiksēta platuma ikonai.

Rem bieži izmanto atstarpēm un tipogrāfijai, kam visā lapā jāsaglabā vienāds mērogs. Tā kā rem vienmēr attiecas uz saknes fonta lielumu, rem vērtība nemainās neatkarīgi no elementa ligzdošanas dziļuma. Tas arī nozīmē, ka uz rem balstīti izkārtojumi automātiski pielāgojas, kad lietotājs palielina pārlūkprogrammas noklusējuma fonta lielumu, tādējādi palīdzot cilvēkiem ar vāju redzi.

Em ir piemērots vienam, patstāvīgam komponentam, piemēram, pogai, kuras iekšējai atkāpei jāmainās atbilstoši pašas pogas fonta lielumam. Bieža em problēma ir kumulatīva mērogošana: ja vairāki ligzdoti elementi katrs izmanto font-size: 1.2em, katrs līmenis reizina iepriekšējā līmeņa vērtību, tāpēc fonta izmērs palielinās straujāk, nekā paredzēts.

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

Pēc trim līmeņiem teksts ir palielinājies par aptuveni 73%, nevis par 20%, ko izstrādātājs varētu sagaidīt no viena 1.2em noteikuma.

Kalkulatora lietošana

  1. Ievadiet vērtību pikseļu, rem vai em laukā.
  2. Pārējie divi lauki tiek automātiski atjaunināti, noapaļojot vērtības līdz četrām zīmēm aiz komata.
  3. Iestatiet saknes fonta lielumu atbilstoši projekta <html> elementam. Lielākajā daļā pārlūkprogrammu pēc noklusējuma tas ir 16px, un tas ietekmē tikai rem.
  4. Iestatiet vecākelementa fonta lielumu atbilstoši tā elementa fonta lielumam, kurā atrastos em vērtība. Tas ietekmē tikai em.
  5. Izmantojiet pie lauka esošo kopēšanas pogu, lai kopētu tā vērtību.

Abos fonta lieluma laukos jāievada vesels pikseļu skaits, un mazākā atļautā vērtība ir 1px. Atiestatīšanas poga notīra vērtību un abiem fonta lielumiem atjauno 16px.

Zem laukiem rīks attēlo vienu joslu katrai mērvienībai. Visas trīs joslas attēlo vienādu fizisko garumu, tāpēc to platums ir vienāds; tas ir ātrs pārbaudes veids, vai pārveidošana ir pareiza. Josla tiek attēlota tās faktiskajā pikseļu garumā līdz 300px; viss garāks tiek samazināts, lai ietilptu, tāpēc gan 600px, gan 900px vērtība beidzas pie 300px. Joslas tiek parādītas tikai tad, ja pikseļu vērtība ir lielāka par nulli.

Biežāk uzdotie jautājumi

Kāda ir atšķirība starp rem un em? Rem vienmēr attiecas uz saknes elementa fonta lielumu. Em attiecas uz tuvākā vecākelementa fonta lielumu. Rem vērtība visā lapā paliek nemainīga, bet em vērtība var mainīties atkarībā no elementa ligzdošanas dziļuma.

Kāpēc pārlūkprogrammas kā noklusējuma fonta lielumu izmanto 16px? 16px jau ilgu laiku ir noklusējuma teksta lielums lielākajās pārlūkprogrammās, jo parastajos ekrānos to ir ērti lasīt bez papildu stila iestatījumiem. Tīmekļa pieejamības vadlīnijas iesaka nodrošināt iespēju palielināt tekstu līdz 200%, nesabojājot lapas izkārtojumu, un 16px ir praktisks sākumpunkts šādai palielināšanai.

Kas ir 62,5% paņēmiens? Iestatot html { font-size: 62.5%; }, noklusējuma 16px saknes fonta lielums tiek pārvērsts par 10px, jo 62,5% no 16 ir 10. Tas vienkāršo rem aprēķinus, jo 1,6rem ir 16px un 2,4rem ir 24px.

Vai px, rem un em vērtības var būt negatīvas? Jā, tām īpašībām, kas pieņem negatīvus garumus, piemēram, ārējām atkāpēm vai CSS transformācijām. CSS iekšējās atkāpes nevar būt negatīvas; pārlūkprogrammas negatīvu iekšējās atkāpes vērtību ignorē. Pārveidotājs apstrādā negatīvas vērtības, bet šādām vērtībām joslas neattēlo, jo joslai nevar būt negatīvs platums.

Vai katra pikseļu vērtība būtu jāpārveido rem? Ne vienmēr. Apmales un citas smalkas detaļas parasti saglabā pikseļos, jo tām reti jāmainās atbilstoši fonta lielumam un tās var izskatīties nevienmērīgas, ja platums ir mazāks par vienu pikseli. Rem ir piemērots atstarpēm un tipogrāfijai, kurai jāpielāgojas lietotāja izvēlētajam fonta lielumam.

Vai mērvienības izvēle ietekmē lapas veiktspēju? Nē. Pārlūkprogrammas izkārtojuma aprēķina laikā visus CSS garumus pārveido vienā un tajā pašā iekšējā vērtībā, tāpēc px, rem un em tiek attēloti ar vienādu ātrumu. Izvēle starp tiem ietekmē uzturējamību un pieejamību, nevis ātrumu.