🛠️

Whiz Tools

Build • Create • Innovate

PX į REM į EM konverteris: CSS vienetų skaičiuoklė

Paverskite pikselius (PX), šaknies em (REM) ir em (EM) CSS vienetus su šia paprasta skaičiuokle. Būtina atsakingam tinklalapių dizainui ir kūrimui.

PX, REM ir EM vienetų konverteris

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

px
px
Enter a value in px units
px
Enter a value in rem units
rem
Enter a value in em units
em
Vizualizacija nepasiekiama neigiamoms ar nulinei vertėms

Konversijos formulės

  • PX į REM: vertė px ÷ pagrindinis šrifto dydis
  • PX į EM: vertė px ÷ tėvinio šrifto dydis
  • REM į PX: vertė rem × pagrindinis šrifto dydis
  • EM į PX: vertė em × tėvinio šrifto dydis
📚

Dokumentacija

PX, REM ir EM vienetų konverteris: esminiai CSS vienetai paaiškinti

CSS vienetų konvertavimo įvadas

Suprasti ir konvertuoti CSS vienetus yra būtina, norint sukurti reaguojančius svetainių dizainus ir plėtrą. PX (pikselis), REM (šakninė em) ir EM vienetai yra pagrindiniai elementai, kurie nustato, kaip elementai yra dydžio ir pozicionuojami įvairiuose įrenginiuose ir ekrano dydžiuose. Šis išsamus vienetų konverterio įrankis leidžia jums lengvai versti reikšmes tarp šių trijų svarbių CSS vienetų, padedant sukurti lankstesnius ir lengviau prižiūrimus svetainių išdėstymus.

Pikseliai (PX) yra fiksuoto dydžio vienetai, kurie suteikia tikslų valdymą, tačiau trūksta skalavimo, tuo tarpu REM vienetai skalė priklauso nuo šakninio elemento šrifto dydžio, o EM vienetai skalė priklauso nuo jų tėvų elemento šrifto dydžio. Konvertuoti tarp šių vienetų gali būti sudėtinga, ypač dirbant su sudėtingais dizainais arba palaikant prieinamumo funkcijas, tokias kaip teksto dydžio keitimas. Mūsų PX, REM ir EM konverteris supaprastina šį procesą, leidžiant jums sutelkti dėmesį į gražių, reaguojančių dizainų kūrimą.

CSS vienetų supratimas: PX, REM ir EM

Kas yra pikseliai (PX)?

Pikseliai (PX) yra pagrindinis ir dažniausiai naudojamas CSS vienetas. Pikselis yra vienas taškas skaitmeniniame vaizdo tinkle ir atstovauja mažiausią valdomą elementą ekrane. CSS pikseliai suteikia fiksuoto dydžio matavimo vienetą, kuris išlieka nuoseklus, nepriklausomai nuo kitų stiliaus veiksnių.

1.element {
2  width: 200px;
3  font-size: 16px;
4  margin: 10px;
5}
6

Pikselių pagrindinės savybės:

  • Fiksuoto dydžio vienetai, kurie automatiškai nesikeičia
  • Suteikia tikslią kontrolę elementų matmenims
  • Lengva suprasti ir vizualizuoti
  • Mažiau tinkami reaguojančiam dizainui ir prieinamumui

Kas yra REM vienetai?

REM (šakninė em) vienetai yra santykiniai vienetai, kurie skalė priklauso nuo šakninio elemento šrifto dydžio (paprastai <html> elemento). Pagal numatytuosius nustatymus dauguma naršyklių nustato šakninio šrifto dydį 16px, todėl 1rem lygu 16px, nebent aiškiai pakeista.

1html {
2  font-size: 16px; /* Numatytoji daugumoje naršyklių */
3}
4
5.element {
6  width: 12.5rem; /* Atitinka 200px su numatytuoju šakninio šrifto dydžiu */
7  font-size: 1rem; /* Atitinka 16px */
8  margin: 0.625rem; /* Atitinka 10px */
9}
10

REM vienetų pagrindinės savybės:

  • Skalė priklauso nuo šakninio elemento šrifto dydžio
  • Išlaiko nuoseklias proporcijas visame dokumente
  • Palaiko geresnį prieinamumą per globalius šrifto dydžio koregavimus
  • Tinkama reaguojantiems išdėstymams ir tipografijai

Kas yra EM vienetai?

EM vienetai yra santykiniai vienetai, kurie skalė priklauso nuo jų tėvų elemento šrifto dydžio. Jei tėvui nenurodytas šrifto dydis, EM atsižvelgs į paveldėtą šrifto dydį.

1.parent {
2  font-size: 20px;
3}
4
5.child {
6  font-size: 0.8em; /* Atitinka 16px (20px × 0.8) */
7  margin: 0.5em; /* Atitinka 8px (16px × 0.5) */
8}
9

EM vienetų pagrindinės savybės:

  • Skalė priklauso nuo jų tėvų elemento šrifto dydžio
  • Sukuria kaskadinį efektą, kai yra įdėtos
  • Naudinga kuriant proporcingus dizainus komponentuose
  • Gali tapti sudėtinga valdyti su giliai įdėtais elementais

Konversijos formulės ir skaičiavimai

Suprasti matematinį ryšį tarp PX, REM ir EM vienetų yra svarbu tiksliai konvertuojant. Štai formulės, naudojamos mūsų konverteryje:

PX į REM konversija

Norint konvertuoti pikselius į REM vienetus, padalinkite pikselių reikšmę iš šakninio šrifto dydžio:

REM=PXrootFontSizeREM = \frac{PX}{rootFontSize}

Pavyzdžiui, su numatytuoju šakninio šrifto dydžiu 16px:

  • 16px = 1rem
  • 24px = 1.5rem
  • 8px = 0.5rem

PX į EM konversija

Norint konvertuoti pikselius į EM vienetus, padalinkite pikselių reikšmę iš tėvų elemento šrifto dydžio:

EM=PXparentFontSizeEM = \frac{PX}{parentFontSize}

Pavyzdžiui, su tėvų šrifto dydžiu 16px:

  • 16px = 1em
  • 24px = 1.5em
  • 8px = 0.5em

REM į PX konversija

Norint konvertuoti REM vienetus į pikselius, padauginkite REM reikšmę iš šakninio šrifto dydžio:

PX=REM×rootFontSizePX = REM \times rootFontSize

Pavyzdžiui, su numatytuoju šakninio šrifto dydžiu 16px:

  • 1rem = 16px
  • 1.5rem = 24px
  • 0.5rem = 8px

EM į PX konversija

Norint konvertuoti EM vienetus į pikselius, padauginkite EM reikšmę iš tėvų elemento šrifto dydžio:

PX=EM×parentFontSizePX = EM \times parentFontSize

Pavyzdžiui, su tėvų šrifto dydžiu 16px:

  • 1em = 16px
  • 1.5em = 24px
  • 0.5em = 8px

REM į EM konversija

Norint konvertuoti REM vienetus į EM vienetus, reikia atsižvelgti tiek į šakninio šrifto dydį, tiek į tėvų elemento šrifto dydį:

EM=REM×rootFontSizeparentFontSizeEM = REM \times \frac{rootFontSize}{parentFontSize}

Jei tiek šakniniai, tiek tėvų šrifto dydžiai yra vienodi (pvz., 16px), tada 1rem = 1em.

EM į REM konversija

Norint konvertuoti EM vienetus į REM vienetus, naudokite šią formulę:

REM=EM×parentFontSizerootFontSizeREM = EM \times \frac{parentFontSize}{rootFontSize}

Dar kartą, jei abu šrifto dydžiai yra vienodi, tada 1em = 1rem.

Kaip naudoti PX, REM ir EM vienetų konverterį

Mūsų vienetų konverterio įrankis palengvina reikšmių vertimą tarp PX, REM ir EM vienetų. Štai žingsnis po žingsnio vadovas, kaip efektyviai naudoti konverterį:

Pagrindinis naudojimas

  1. Įveskite reikšmę bet kuriame įvedimo lauke (PX, REM arba EM)
  2. Konverteris automatiškai apskaičiuos ir parodys atitinkamas reikšmes kitais dviem vienetais
  3. Pakeiskite šakninio šrifto dydį (numatytoji: 16px), kad pamatytumėte, kaip tai veikia REM konversijas
  4. Pakeiskite tėvų šrifto dydį (numatytoji: 16px), kad pamatytumėte, kaip tai veikia EM konversijas
  5. Naudokite kopijavimo mygtuką šalia kiekvieno lauko, kad nukopijuotumėte reikšmę į savo iškarpinę

Išplėstinės funkcijos

  • Vizualinis palyginimas: Įrankis suteikia vizualinę reprezentaciją, kaip kiekvieno vieneto dydžiai yra santykiniai
  • Tikslumo kontrolė: Visi skaičiavimai išlaiko 4 dešimtaines vietas tikslumui
  • Neigiamos reikšmės: Konverteris palaiko neigiamas reikšmes, kurios yra galimos CSS savybėms, tokioms kaip atstumai
  • Realaus laiko atnaujinimai: Bet koks įvedimo reikšmių ar šrifto dydžio nustatymų pakeitimas iš karto atnaujina visus skaičiavimus

Patarimai tiksliems konversijoms

  • Norint gauti tiksliausias REM konversijas, nustatykite šakninio šrifto dydį, kad atitiktų jūsų projekto <html> šrifto dydžio reikšmę
  • Norint gauti tikslias EM konversijas, nustatykite tėvų šrifto dydį, kad atitiktų tėvų elemento, su kuriuo dirbate, šrifto dydį
  • Atminkite, kad naršyklių numatytieji šrifto dydžiai gali skirtis, nors 16px yra labiausiai paplitęs numatytasis dydis

Praktiniai CSS vienetų konversijos naudojimo atvejai

Suprasti, kada naudoti kiekvieną CSS vienetą ir kaip konvertuoti tarp jų, yra svarbu efektyviai svetainių plėtrai. Štai keletas praktinių taikymo atvejų ir scenarijų, kur mūsų vienetų konverteris pasirodo neįkainojamas:

Reaguojantis svetainių dizainas

Konvertavimas tarp vienetų yra būtinas kuriant tikrai reaguojančius dizainus:

  • Mobilus pirmas požiūris: Pradėkite nuo pagrindinio dizaino pikseliais, tada konvertuokite į santykinius vienetus, kad užtikrintumėte skalavimą
  • Pertraukų valdymas: Naudokite REM, kad užtikrintumėte nuoseklų atstumą įvairiuose ekrano dydžiuose
  • Komponentų skalavimas: Užtikrinkite, kad UI elementai išlaikytų proporcingus santykius, kai keičiasi ekrano dydis
1/* Konvertuoti fiksuotas pikselių reikšmes į reaguojančius REM vienetus */
2.container {
3  /* Iš: padding: 20px; */
4  padding: 1.25rem; /* 20px ÷ 16px = 1.25rem */
5  
6  /* Iš: margin-bottom: 32px; */
7  margin-bottom: 2rem; /* 32px ÷ 16px = 2rem */
8}
9

Prieinamumo patobulinimai

Naudojant santykinius vienetus, pagerėja prieinamumas, gerbiant vartotojų pageidavimus:

  • Teksto dydžio keitimas: Kai vartotojai keičia naršyklės šrifto dydį, REM pagrindu sukurti išdėstymai tinkamai prisitaiko
  • Priartinimo funkcionalumas: Santykiniai vienetai užtikrina, kad dizainai išliktų proporcingi, kai vartotojai priartina
  • Vartotojo pageidavimų gerbimas: Išdėstymai, pagrįsti santykiniais vienetais, gerbia vartotojo numatytą šrifto dydžio nustatymą

Komponentų dizaino sistemos

Šiuolaikinės dizaino sistemos gauna naudos iš apgalvoto vienetų naudojimo:

  • Nuoseklūs komponentai: Naudokite REM globaliam atstumo ir dydžio nuoseklumui
  • Savarankiški moduliai: Naudokite EM elementams, kurie turėtų skalę su savo tėvų komponentais
  • Dizaino žetonai: Konvertuokite tarp vienetų, kai įgyvendinate dizaino žetonus skirtinguose kontekstuose

Tipografijos sistemos

Kuriant harmoningą tipografiją reikia atidžiai pasirinkti vienetus:

  • Tipografiniai skalės: Apibrėžkite tipografinę skalę REM vienetais, kad užtikrintumėte nuoseklų progresavimą
  • Eilučių aukščiai: Naudokite bevienetinius arba EM vienetus proporcingiems eilučių aukščiams
  • Reaguojantis tekstas: Koreguokite šrifto dydžius per pertraukas, išlaikydami proporcijas
1/* Tipografijos sistema naudojant REM vienetus */
2h1 { font-size: 2.5rem; }    /* 40px */
3h2 { font-size: 2rem; }      /* 32px */
4h3 { font-size: 1.5rem; }    /* 24px */
5h4 { font-size: 1.25rem; }   /* 20px */
6p { font-size: 1rem; }       /* 16px */
7small { font-size: 0.875rem; } /* 14px */
8

Pikselių tobulinimo dizainai

Įgyvendinant dizainus iš tokių įrankių kaip Figma ar Photoshop:

  • Dizaino perdavimas: Konvertuokite pikselių reikšmes iš dizaino failų į REM/EM, kad būtų galima plėtoti
  • Tikslumo išlaikymas: Užtikrinkite tikslią atstumą ir dydžius, naudodami santykinius vienetus
  • Dizaino sistemos integracija: Išversti pikseliais pagrįstus dizaino žetonus į santykinius vienetus

Alternatyvūs CSS vienetai

Nors PX, REM ir EM yra dažniausiai naudojami vienetai, yra alternatyvų, kuriuos verta apsvarstyti:

Vaizdo vienetai (VW, VH)

  • VW (vaizdo plotis): 1vw lygu 1% vaizdo pločio
  • VH (vaizdo aukštis): 1vh lygu 1% vaizdo aukščio
  • Naudojimo atvejis: Sukuriant elementus, kurie tiesiogiai skalė su vaizdo dydžiu

Procentai (%)

  • Santykiniai tėvų elemento matmenims
  • Naudojimo atvejis: Skysti išdėstymai ir reaguojančios pločio

CH vienetai

  • Remiasi "0" simbolio pločiu
  • Naudojimo atvejis: Sukuriant konteinerius su tam tikru simbolių skaičiumi per eilutę

EX vienetai

  • Remiasi mažosios "x" simbolio aukščiu
  • Naudojimo atvejis: Smulkiai koreguojant tipografiją, ypač x-aukščio koregavimams

CSS vienetų evoliucija svetainių plėtroje

CSS vienetų istorija atspindi platesnę svetainių dizaino evoliuciją, nuo statinių išdėstymų iki šiandieninių reaguojančių, prieinamų požiūrių.

Ankstyvas svetainių dizainas (1990-ųjų)

CSS ankstyvose dienose pikseliai buvo dominuojantys. Svetainių dizaineriai kūrė fiksuoto pločio išdėstymus, paprastai 640px arba 800px pločio, kad atitiktų įprastus ekrano sprendimus. Prieinamumas ir įrenginių įvairovė nebuvo dideli rūpesčiai, o pikselių tikslumas buvo pagrindinis tikslas.

Skystų išdėstymų kilimas (ankstyvi 2000-ųjų)

Kai ekrano dydžiai diversifikavosi, procentais pagrįsti išdėstymai tapo populiarūs. Dizaineriai pradėjo kurti lankstesnius dizainus, nors tipografija dažnai liko pikselių vienetuose. Šiame laikotarpyje CSS buvo įvesta EM vienetai, nors jų priėmimas buvo ribotas dėl sudėtingumo valdyti kaskadinius šrifto dydžius.

Mobilioji revoliucija (2007-2010)

iPhone pristatymas 2007 metais transformavo svetainių dizainą. Staiga svetainės turėjo veikti ekranuose, kurių plotis buvo vos 320px. Tai paskatino susidomėjimą reaguojančiais dizaino metodais ir santykiniais vienetais. EM vienetų apribojimai (ypač kaskadinio efekto) tapo akivaizdūs, kai dizainai tapo sudėtingesni.

Reaguojančio svetainių dizaino era (2010-2015)

Ethan Marcotte įtakingas straipsnis apie reaguojantį svetainių dizainą 2010 metais pakeitė, kaip kūrėjai žiūrėjo į CSS vienetus. REM vienetas buvo pristatytas CSS3, siūlantis santykinių skalavimo privalumus be EM vienetų kaskadinių komplikacijų. Naršyklių palaikymas REM vienetams nuosekliai augo per šį laikotarpį.

Šiuolaikiniai CSS požiūriai (2015-dabar)

Šiandieninė svetainių plėtra apima įvairių vienetų mišinį skirtingiems tikslams:

  • REM vienetai globaliam nuoseklumui ir prieinamumui
  • EM vienetai komponentų specifiniam skalavimui
  • Pikseliai riboms ir smulkiems detalėms
  • Vaizdo vienetai tikrai reaguojantiems elementams
  • CSS calc() funkcija, skirta derinti skirtingų tipų vienetus

Ši evoliucija atspindi svetainės perėjimą nuo dokumentų pagrįsto medio iki sudėtingos programų platformos, kuri turi veikti per daugybę įrenginių ir kontekstų.

Kodo pavyzdžiai vienetų konversijai

JavaScript vienetų konverterio funkcijos

1// Konvertuoti tarp PX, REM ir EM vienetų
2const pxToRem = (px, rootFontSize = 16) => {
3  return px / rootFontSize;
4};
5
6const pxToEm = (px, parentFontSize = 16) => {
7  return px / parentFontSize;
8};
9
10const remToPx = (rem, rootFontSize = 16) => {
11  return rem * rootFontSize;
12};
13
14const emToPx = (em, parentFontSize = 16) => {
15  return em * parentFontSize;
16};
17
18const remToEm = (rem, rootFontSize = 16, parentFontSize = 16) => {
19  return rem * (rootFontSize / parentFontSize);
20};
21
22const emToRem = (em, parentFontSize = 16, rootFontSize = 16) => {
23  return em * (parentFontSize / rootFontSize);
24};
25
26// Pavyzdžio naudojimas
27console.log(pxToRem(24));  // 1.5
28console.log(remToPx(1.5)); // 24
29console.log(pxToEm(24, 24)); // 1
30console.log(remToEm(2, 16, 32)); // 1
31

CSS kintamieji konversijai

1:root {
2  /* Pagrindiniai šrifto dydžiai */
3  --root-font-size: 16px;
4  --base-font-size: var(--root-font-size);
5  
6  /* Dažni pikselių dydžiai konvertuoti į REM */
7  --space-4px: 0.25rem;
8  --space-8px: 0.5rem;
9  --space-16px: 1rem;
10  --space-24px: 1.5rem;
11  --space-32px: 2rem;
12  --space-48px: 3rem;
13  
14  /* Tipografijos skalė */
15  --text-xs: 0.75rem;    /* 12px */
16  --text-sm: 0.875rem;   /* 14px */
17  --text-base: 1rem;     /* 16px */
18  --text-lg: 1.125rem;   /* 18px */
19  --text-xl: 1.25rem;    /* 20px */
20  --text-2xl: 1.5rem;    /* 24px */
21}
22
23/* Naudojimo pavyzdys */
24.card {
25  padding: var(--space-16px);
26  margin-bottom: var(--space-24px);
27  font-size: var(--text-base);
28}
29
30.card-title {
31  font-size: var(--text-xl);
32  margin-bottom: var(--space-8px);
33}
34

SCSS miksai vienetų konversijai

1// SCSS funkcijos vienetų konversijai
2@function px-to-rem($px, $root-font-size: 16) {
3  @return ($px / $root-font-size) * 1rem;
4}
5
6@function px-to-em($px, $parent-font-size: 16) {
7  @return ($px / $parent-font-size) * 1em;
8}
9
10@function rem-to-px($rem, $root-font-size: 16) {
11  @return $rem * $root-font-size * 1px;
12}
13
14// Naudojimo pavyzdys
15.element {
16  padding: px-to-rem(20);
17  margin: px-to-rem(32);
18  font-size: px-to-rem(18);
19  
20  .nested {
21    // Naudojant tėvų šrifto dydį (18px) EM konversijai
22    padding: px-to-em(16, 18);
23    margin-bottom: px-to-em(24, 18);
24  }
25}
26

Python vienetų konverteris

1def px_to_rem(px, root_font_size=16):
2    """Konvertuoti pikselius į REM vienetus"""
3    return px / root_font_size
4
5def rem_to_px(rem, root_font_size=16):
6    """Konvertuoti REM vienetus į pikselius"""
7    return rem * root_font_size
8
9def px_to_em(px, parent_font_size=16):
10    """Konvertuoti pikselius į EM vienetus"""
11    return px / parent_font_size
12
13def em_to_px(em, parent_font_size=16):
14    """Konvertuoti EM vienetus į pikselius"""
15    return em * parent_font_size
16
17# Pavyzdžio naudojimas
18print(f"16px = {px_to_rem(16)}rem")  # 16px = 1.0rem
19print(f"2rem = {rem_to_px(2)}px")    # 2rem = 32px
20print(f"24px = {px_to_em(24, 16)}em")  # 24px = 1.5em
21

Dažniausiai užduodami klausimai

Koks skirtumas tarp REM ir EM vienetų?

REM (šakninė em) vienetai yra santykiniai šakninio elemento šrifto dydžiui (paprastai <html> elementui), tuo tarpu EM vienetai yra santykiniai jų tėvų elemento šrifto dydžiui. Šis pagrindinis skirtumas reiškia, kad REM vienetai išlaiko nuoseklų dydį visame dokumente, nepriklausomai nuo įdėjimo, tuo tarpu EM vienetai gali sukurti kaupimo efektą, kai elementai yra įdėti.

Kuris CSS vienetas yra geriausias reaguojančiam dizainui?

Nėra vieno "geriausio" vieneto visoms situacijoms. Paprastai efektyviausia yra naudoti įvairių vienetų derinį:

  • REM vienetai tipografijai ir nuosekliam atstumui
  • EM vienetai komponentų specifiniam skalavimui
  • Procentai arba vaizdo vienetai išdėstymų pločiams
  • Pikseliai riboms ir smulkiems detalėms

Idealiu atveju požiūris yra naudoti kiekvieną vienetą tam, kam jis geriausiai tinka nuosekliame sistemoje.

Kodėl naršyklės numato 16px šrifto dydį?

16px numatytasis dydis buvo nustatytas kaip skaitymo standartas, kuris gerai veikia įvairiuose įrenginiuose. Tyrimai parodė, kad tekstas, esantis apie 16px, yra optimalus skaitymui ekranuose, esant įprastam žiūrėjimo atstumui. Šis numatytasis dydis taip pat suteikia gerą pagrindą prieinamumui, užtikrinant, kad tekstas nebūtų per mažas daugumai vartotojų.

Ar galiu naudoti neigiamas reikšmes su šiais vienetais?

Taip, CSS palaiko neigiamas reikšmes daugeliui savybių naudojant bet kokio tipo vienetus. Neigiami atstumai, transformacijos ir pozicijos yra dažni neigiamų reikšmių naudojimo atvejai. Mūsų konverteris teisingai tvarko neigiamas reikšmes visiems vienetų tipams.

Kaip EM vienetai veikia su įdėtais elementais?

EM vienetai kaupiasi, kai elementai yra įdėti. Pavyzdžiui:

1.parent {
2  font-size: 16px;
3}
4.child {
5  font-size: 1.5em; /* 24px (16px × 1.5) */
6}
7.grandchild {
8  font-size: 1.5em; /* 36px (24px × 1.5) */
9}
10

Šis kaupimo efektas gali būti naudingas kuriant proporcingus dizainus, tačiau reikalauja atidžiai valdyti, kad būtų išvengta nenorimo skalavimo.

Kaip naršyklės tvarko subpikselių atvaizdavimą su santykiniais vienetais?

Naršyklės skirtingai tvarko subpikselių reikšmes. Kai kurios naršyklės suapvalina iki artimiausio pikselio, tuo tarpu kitos palaiko subpikselių atvaizdavimą, kad užtikrintų sklandesnį skalavimą. Tai kartais gali sukelti nedidelius nesutarimus tarp naršyklių, ypač su mažomis REM/EM reikšmėmis arba naudojant transformacijas. Daugeliu atvejų šie skirtumai yra nereikšmingi.

Koks našumo poveikis naudojant skirtingus CSS vienetus?

Nėra reikšmingo našumo skirtumo tarp pikselių, REM ar EM vienetų moderniose naršyklėse. Vienetų pasirinkimas turėtų būti pagrįstas dizaino reikalavimais, reaguojančiu elgesiu ir prieinamumo poreikiais, o ne našumo apsvarstymais.

Nuorodos ir tolesnė literatūra

  1. "CSS Values and Units Module Level 3." W3C Recommendation. https://www.w3.org/TR/css-values-3/

  2. Marcotte, Ethan. "Responsive Web Design." A List Apart, May 25, 2010. https://alistapart.com/article/responsive-web-design/

  3. Rutter, Richard. "The Elements of Typographic Style Applied to the Web." http://webtypography.net/

  4. "CSS Units." MDN Web Docs. https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units

  5. "CSS Pixels vs. Physical Pixels." Stack Overflow Documentation. https://stackoverflow.com/questions/8785643/what-exactly-is-the-difference-between-css-pixels-and-device-pixels

  6. Coyier, Chris. "The Lengths of CSS." CSS-Tricks. https://css-tricks.com/the-lengths-of-css/

  7. "Using CSS custom properties (variables)." MDN Web Docs. https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties

  8. "Understanding and Using rem Units in CSS." SitePoint. https://www.sitepoint.com/understanding-and-using-rem-units-in-css/

Išbandykite mūsų vienetų konverterį šiandien

Nustokite kovoti su rankinėmis CSS vienetų konversijomis ir leiskite mūsų PX, REM ir EM vienetų konverteriui atlikti darbą už jus. Nesvarbu, ar kuriate reaguojančią svetainę, ar kurdami dizaino sistemą, ar tik mokydamiesi apie CSS vienetus, šis įrankis sutaupys jums laiko ir užtikrins tikslumą. Įveskite savo reikšmes dabar, kad pamatytumėte, kaip lengva gali būti vienetų konversija!