Ko šis konvertētājs dara
Šis rīks pārvērš pikseļu (px) vērtības par rem un em vienībām un otrādi. Vērtību var ievadīt jebkurā no trim mērvienībām, un rīks automātiski aprēķina un parāda atbilstošās vērtības abās pārējās vienībās. Papildus var iestatīt pielāgotu saknes fonta izmēru un em konteksta fonta izmēru, lai konvertācijas atbilstu tieši jūsu projekta vajadzībām.
Kad rediģē jebkuru no px, rem vai em laukiem, pārējie divi atjaunojas rakstīšanas laikā — rezultātu redzat uzreiz, bez atsevišķas pogas. Tas nozīmē, ka par sākumpunktu var izmantot jebkuru no trim vienībām: ja jums jau ir px vērtība no dizaina maketa, ievadiet to px laukā; ja strādājat pie esoša CSS ar rem vienībām, ievadiet vērtību rem laukā, un rīks pats parādīs atbilstošo px un em.
Kam šis rīks noder
Rīks noder, ja pikseļos uzrakstītus izmērus vēlaties pārvērst relatīvās rem vai em vienībās atsaucīgam dizainam. Tas noder arī tad, ja gribat saprast, kā dažādi saknes fonta izmēri ietekmē rem vērtības, vai ja jārēķina em vērtība atbilstoši konkrēta elementa fonta izmēram. Rīks der arī tad, ja vēlaties pārliecināties, ka izmēri pareizi mērogojas, kad lasītājs maina savu noklusējuma fonta izmēru.
Ievades lauki
Rīkā ir trīs ievades vietas:
- Saknes fonta izmērs (px) — bāzes fonta izmērs pikseļos, pret kuru tiek rēķinātas rem vērtības.
- em konteksta fonta izmērs (px) — tā elementa fonta izmērs pikseļos, pret kuru tiek rēķinātas em vērtības.
- Vērtības — pati garuma vērtība, ko vēlaties konvertēt px, rem vai em vienībās.
Abus fonta izmēra laukus var mainīt neatkarīgi no Vērtības lauka, tāpēc reizi iestatītu saknes vai konteksta izmēru nav jāievada no jauna katru reizi, kad maināt konvertējamo vērtību.
Saknes fonta izmēra iestatīšana
Saknes fonta izmēra noklusējuma vērtība ir 16px. Sākotnēji 16px ir vienāds ar 1rem un ar 1em. Ja jūsu projektā lapas saknes fonta izmērs atšķiras no 16px, šo lauku var mainīt, lai rem konvertācijas atbilstu jūsu faktiskajam CSS iestatījumam.
Saknes fonta izmēram jābūt skaitlim, kas lielāks par 0. Ja ievadītā vērtība neatbilst šai prasībai, rīks parāda ziņojumu "Saknes fonta izmēram jābūt skaitlim, kas lielāks par 0."
em konteksta fonta izmēra iestatīšana
em vienība tiek rēķināta pret tā elementa fonta izmēru, kurā tā atrodas, nevis pret lapas sakni — tāpēc rīkam ir atsevišķs em konteksta fonta izmēra lauks. Tā noklusējuma vērtība arī ir 16px.
Šis lauks noder, ja rēķina em vērtību elementam, kura fonta izmērs atšķiras no lapas saknes, piemēram, kāda konkrēta bloka iekšienē. em konteksta fonta izmēram tāpat jābūt skaitlim, kas lielāks par 0 — pretējā gadījumā parādās ziņojums "em konteksta fonta izmēram jābūt skaitlim, kas lielāks par 0."
Rezultāti un ātrā uzziņas tabula
Pēc vērtības ievades rīks parāda:
- iestatīto saknes fonta izmēru;
- iestatīto em konteksta fonta izmēru;
- konvertētās vērtības visās trīs mērvienībās;
- tabulu "Biežākās px → rem attiecības (16px bāze)", kas parāda vairākas bieži lietotas px vērtības un to rem ekvivalentu, pieņemot 16px saknes fonta izmēru.
Vērtību laukā drīkst ievadīt arī negatīvas pikseļu vērtības — rīks tās pieņem un konvertē tāpat kā pozitīvas. Ja Vērtības laukā ievadītais teksts nav derīgs skaitlis, parādās ziņojums "Ievadiet skaitli, lai konvertētu."
Šo tabulu var izmantot kā ātru uzziņu ierastajām 16px bāzes vērtībām, neievadot katru px vērtību atsevišķi Vērtības laukā.
Privātums
Katra konvertēšana darbojas jūsu pārlūkprogrammā. Nekas no ievadītā netiek augšupielādēts BroBroGo. Tas attiecas gan uz Vērtības lauku, gan uz iestatīto saknes fonta izmēru un em konteksta fonta izmēru.
Bieži uzdotie jautājumi
Kāda ir atšķirība starp px, rem un em? px ir fiksēts garums. rem tiek mērīts pret lapas saknes fonta izmēru, tāpēc pie 16px saknes 1rem ir vienāds ar 16px. em tiek mērīts pret tā elementa fonta izmēru, kurā tas atrodas. Izmēru un atstarpju noteikšana rem mērvienībās ļauj visam mērogoties, kad lasītājs maina savu noklusējuma fonta izmēru.
Kāpēc ir atsevišķs em konteksta izmērs? em ir relatīvs pret tā paša elementa fonta lielumu, kas ne vienmēr ir sakne. Iestatiet em kontekstu uz šī elementa fonta lielumu, lai pareizi nolasītu em, un saglabājiet to vienādu ar sakni, kad abi sakrīt.
Ko darīt, ja mans saknes fonta izmērs nav 16px? Mainiet saknes fonta izmēra lauku, lai tas atbilstu jūsu CSS, un katra rem vērtība tiks atjaunināta uzreiz. Zemāk redzamā ātrā tabula ir ērts ceļvedis parastajai 16px saknei, ar kuru sāk lielākā daļa vietņu.