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: Esminiai CSS vienetai paaiškinti

Kodėl CSS vienetų konvertavimas svarbus šiuolaikiniame interneto kūrime

Kuriant atsakingąsias svetaines, vienas dažniausių iššūkių yra dizaino specifikacijų vertimas į lankstų ir plečiamą CSS. Tikriausiai esate matę Figma dizainą su "padding: 24px" ir svarstę, ar palikti pikselius, ar konvertuoti į rem vienetus. Šis sprendimas daro įtaką viskam - nuo prieinamumo iki to, kaip išdėstymas reaguoja, kai vartotojai keičia naršyklės šrifto dydį.

Šis PX, REM ir EM vienetų konverteris padeda greitai konvertuoti tarp šių trijų pagrindinių CSS vienetų. Pikseliai suteikia tikslią kontrolę - puikiai tinka rėmeliams ir smulkioms detalėms. REM vienetai masteliuojasi pagal šakninio šrifto dydį, todėl idealiai tinka nuosekliam tarpui ir tipografijai visoje svetainėje. EM vienetai masteliuojasi pagal savo tėvinį elementą, puikiai tinka kuriant savarankiškus komponentus, išlaikančius proporcijas.

Sudėtingiausia dalis? Konvertuojant tarp jų, reikia atsižvelgti į šriftų dydžius, kurie skiriasi tarp šakninio elemento ir atskirų komponentų. Dažna klaida, kurią matau kuriant programinę įrangą, yra naudoti pikselius visur, nes atrodo paprasčiau. Nors tai iš pradžių veikia, tai sukuria prieinamumo problemas, kai vartotojai padidina numatytąjį naršyklės šrifto dydį - išdėstymas neproporcingai neadaptuojamas.

CSS vienetų supratimas: PX, REM ir EM

Kas yra pikseliai (PX)?

Pikseliai (PX) yra paprasčiausias CSS vienetas — tai, ką nurodote, tą ir gausite. CSS pikselis yra etaloninė vienetas, nebūtinai atitinkantis fizinį ekrano pikselį (ypač aukštos raiškos ekranuose, pvz., „Retina" ekranuose). Jie suteikia fiksuotą dydį, kuris nesikeičia priklausomai nuo šrifto dydžio ar tėvinio elemento.

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

Kada pikseliai veikia gerai:

  • Rėmeliai ir skirstikliai (1px ar 2px rėmeliai išlieka ryškūs)
  • Maži, tikslūs detalės, kurios neturėtų keistis
  • Fiksuoto pločio konteineriai, kai reikia tikslių matmenų
  • Piktogramų dydžiai dirbant su pikselių tiksliais sprite rinkiniais

Problema: Pikseliai nepaiso vartotojo nuostatų. Jei kas nors padidina savo naršyklės numatytąjį šrifto dydį nuo 16px iki 20px geresniam įskaitomumui, pikseliais pagrįstos išdėstymų išlieka nepakitę, galimai sukeliant teksto perpildymą ar suglaudintą išdėstymą.

Kas yra REM vienetai?

REM (šakninis em) vienetai matuojami pagal šakninio elemento šrifto dydį — paprastai <html> elementą. Dauguma naršyklių numatytasis dydis yra 16px, todėl 1rem lygus 16px, jei nepakeičiate šakninio šrifto dydžio. Štai kas daro REM vienetus galingais: jie užtikrina nuoseklų, nuspėjamą masteliavimą visoje svetainėje.

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

Kodėl kūrėjai mėgsta REM vienetus:

  • Nuoseklus masteliavimas: Pakeitus šakninio šrifto dydį, viskas proporcingai keičiasi
  • Prieinamumo atitiktis: Kai vartotojai koreguoja naršyklės šrifto dydį, REM pagrįstos išdėstymai prisitaiko automatiškai
  • Lengvesnis palaikymas: Atnaujinkite tarpų reikšmes vienoje vietoje, o ne ieškokite pikselių reikšmių
  • Jokių kaupimo problemų: Kitaip nei EM vienetai, REM vienetai nesikaupia

Profesionalų patarimas: Nustatykite šakninio šrifto dydį į 62.5% (tai padaro 1rem = 10px su numatytuoju 16px pagrindu). Tai palengvina matematinius skaičiavimus — 1.6rem = 16px, 2.4rem = 24px. Tik nepamirškite nustatyti kūno šrifto dydžio atgal į 1.6rem, kad tekstas numatytai būtų 16px. Pagal W3C CSS verčių ir vienetų specifikaciją, REM vienetai visada nurodo šakninį elementą, todėl yra nuspėjami sudėtinguose išdėstymuose.

Kas yra EM vienetai?

EM vienetai matuojami pagal tėvinio elemento šrifto dydį, todėl jie yra konteksto sąmoningi. Šis elgesys skiriasi nuo REM vienetų, kurie visada nurodo šakninį elementą. Pavadinimas „em" kilęs iš tipografijos — istoriškai jis žymėjo didžiosios raidės „M" plotį tam tikrame šrifto rinkinyje.

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

Kada EM vienetai sužiba:

  • Komponentinis dizainas: Užpildas ir paraštės, kurios keičiasi kartu su šrifto dydžiu
  • Tipografija: Eilučių aukščiai gerai veikia su be vienetų arba em reikšmėmis (pvz., line-height: 1.5em)
  • Savarankiški moduliai: Mygtukai ar kortelės, išlaikančios proporcijas keičiantis šrifto dydžiui
  • Medijos užklausos: Pagal MDN žiniatinklio dokumentus, EM vienetai medijos užklausose nurodo naršyklės numatytąjį šrifto dydį, o ne tėvinį elementą

Kaupimo spąstai: Štai kur kūrėjai dažnai pakliūva. EM vienetai kaskadiškai veikia įdėtuosius elementus, kas gali sukelti netikėtus rezultatus:

1.level-1 { font-size: 1.2em; }  /* 19.2px, jei tėvinis yra 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ų įdėjimo lygių, jūsų tekstas išaugo 73% vietoj numatytų 20%. Būtent dėl šios priežasties daugelis kūrėjų perėjo prie REM vienetų tipografijai, kai pagerėjo naršyklių palaikymas.

Konversijos Formulės ir Skaičiavimai

Supratimas matematinių ryšių tarp PX, REM ir EM vienetų yra esminis tiksliam konvertavimui. Čia pateikiamos formulės naudojamos mūsų konvertuoklyje:

PX į REM Konvertavimas

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

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

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

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

PX į EM Konvertavimas

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

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

Pavyzdžiui, su tėvinio elemento šrifto dydžiu 16px:

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

REM į PX Konvertavimas

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

PX=REM×rootFontSizePX = REM \times rootFontSize

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

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

EM į PX Konvertavimas

Norint konvertuoti EM vienetus į pikselius, reikia padauginti EM reikšmę iš tėvinio elemento šrifto dydžio:

PX=EM×parentFontSizePX = EM \times parentFontSize

Pavyzdžiui, su tėvinio elemento šrifto dydžiu 16px:

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

REM į EM Konvertavimas

Norint konvertuoti REM vienetus į EM vienetus, reikia atsižvelgti į šakninio šrifto dydį ir tėvinio elemento šrifto dydį:

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

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

EM į REM Konvertavimas

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

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

Vėl gi, jei abu šrifto dydžiai yra lygūs, tada 1em = 1rem.

Kaip naudoti PX į REM į EM vienetų keitiklį

Tikslūs perskaičiavimai yra paprasti naudojant šį įrankį. Pagrindinis dalykas - suprasti, kokius šriftų dydžius naudoti konkrečioje situacijoje.

Greito pradėjimo vadovas

  1. Įveskite savo reikšmę bet kuriame lauke—pikseliuose, REM ar EM
  2. Patikrinkite rezultatus iš karto kituose dviejuose vienetuose
  3. Koreguokite šriftų dydžius pagal savo projektą:
    • Šakninis šrifto dydis: Tai, ką nustatėte <html> elemente (paprastai 16px)
    • Tėvinio elemento šrifto dydis: Specifinio elemento tėvinio elemento šrifto dydis (taip pat paprastai 16px)
  4. Nukopijuokite reikiamą reikšmę naudodami kopijavimo mygtuką

Tikslių rezultatų gavimas jūsų projektui

Keitiklis pagal numatytuosius nustatymus naudoja 16px tiek šakniniam, tiek tėviniam šrifto dydžiui, nes tai naršyklės standartas. Tačiau svarbu tai: jūsų konkretus projektas gali naudoti skirtingas reikšmes.

Šakninio šrifto dydžio radimas: Atidarykite naršyklės kūrėjų įrankius, patikrinkite <html> elementą ir peržiūrėkite apskaičiuotą šrifto dydį. Jei nustatėte html { font-size: 62.5%; }, jūsų šakninis šrifto dydis yra 10px (62,5% nuo 16px).

Tėvinio šrifto dydžio radimas: EM perskaičiavimams jums reikia specifinio tėvinio elemento, kur taikote stilių, šrifto dydžio. Patikrinkite tą elementą kūrėjų įrankiuose, kad pamatytumėte jo apskaičiuotą šrifto dydį. Jei tėvinis elementas turi font-size: 1.2rem ir jūsų šakninis yra 16px, nustatykite tėvinio elemento šrifto dydį 19,2px tiksliam EM skaičiavimui.

Įprasti perskaičiavimo scenarijai

Iš dizaino į kodą: Jūsų Figma faile rodoma padding: 24px. Norite naudoti REM vienetus geresniam prieinamumui. Įveskite 24 pikselius PX lauke, ir pamatysite, kad tai lygu 1,5 rem (darant prielaidą, kad šakninis 16px).

Mygtuko komponento kūrimas: Norite, kad užpildas keistųsi kartu su mygtuko šrifto dydžiu. Jei mygtukas turi font-size: 1.125rem (18px), nustatykite tėvinio elemento šrifto dydį į 18, įveskite norimą pikselių užpildą ir naudokite gautą EM reikšmę.

Adaptyvi tipografija: Kuriate antraštę, kuri yra 32px darbalaukyje. Įveskite 32px, kad pamatytumėte, jog tai 2 rem, kas tinkamai keisis, kai vartotojai koreguos naršyklės šrifto dydį.

Realūs CSS vienetų konvertavimo naudojimo atvejai

Žinoti formules - viena, o efektyviai jas taikyti gamybiniame kode - kita. Štai kur vienetų konvertavimas daro apčiuopiamą skirtumą jūsų projektuose.

Dizaino failų konvertavimas į adaptyviuosius CSS

Gausite Figma dizainą, kur viskas nurodyta pikseliais. Kortelės komponentas rodo:

  • Užpildas: 24px
  • Antraštės šrifto dydis: 28px
  • Teksto šrifto dydis: 16px
  • Apatinis paraštė: 40px

Konvertuojant į REM vienetus (darant prielaidą, kad šaknis yra 16px), gausite:

1.card {
2  padding: 1.5rem;        /* 24px → 1.5rem */
3  margin-bottom: 2.5rem;  /* 40px → 2.5rem */
4}
5
6.card__heading {
7  font-size: 1.75rem;     /* 28px → 1.75rem */
8}
9
10.card__body {
11  font-size: 1rem;        /* 16px → 1rem */
12}
13

Koks čia privalumas? Kai naudotojas su regėjimo negalia padidina savo naršyklės numatytąjį šrifto dydį nuo 16px iki 20px, jūsų kortelė proporcingai padidėja. Užpildas, paraštės ir tekstas padidėja 25%, išlaikydami dizaino vaizdinę pusiausvyrą. Naudojant pikselius, tik tekstas padidėtų, sugriaudamas išdėstymą.

Prieinamų komponentų bibliotekų kūrimas

Komponentų bibliotekoms reikia mygtukų, kurie veiktų bet kokio dydžio - maži, vidutiniai, dideli. Naudojant EM vienetus užpildui, sukuriamas savęs apribojantis keitimas:

1.button {
2  /* Bazinis mygtukas 16px šrifto dydžiu */
3  font-size: 1rem;
4  padding: 0.75em 1.5em;  /* 12px 24px baziniame dydyje */
5  border: 1px solid currentColor;
6  border-radius: 0.25em;
7}
8
9.button--large {
10  font-size: 1.25rem;  /* 20px */
11  /* Užpildas automatiškai tampa 15px 30px (0.75em × 20px) */
12}
13
14.button--small {
15  font-size: 0.875rem;  /* 14px */
16  /* Užpildas automatiškai tampa 10.5px 21px (0.75em × 14px) */
17}
18

Užpildas keičiasi automatiškai, nes apibrėžtas EM vienetais, santykiniais su mygtuko šrifto dydžiu. Jūs apibrėžiate proporcijas vieną kartą, ir jos veikia visuose dydžių variantuose. Šis metodas, rekomenduojamas šiuolaikinėse CSS architektūros schemose, sumažina kodą ir išlaiko vaizdinį nuoseklumą.

[Toliau tekstas tęsiasi tuo pačiu principu...]

Kaip CSS vienetai išsivystė: nuo fiksuotų iki lankstesnių

Perėjimas nuo pikselių prie santykinių vienetų atspindi žiniatinklio kelionę nuo statinių dokumentų iki interaktyvių programų. Šios istorijos supratimas paaiškina, kodėl šiandien konvertuojame tarp vienetų.

Pikselių tobulybės era (1990-2000)

Ankstyvosios svetainės buvo kuriamos konkrečiam ekrano pločiui — 640px, vėliau 800px, tada 1024px. CSS išdėstymai naudojo tik pikselius, nes tai buvo suprantama spaudos dizaineriams. Svetainės atrodė vienodai visuose naršyklėse (kai jos veikdavo), tačiau visiškai suirdavo netikėtuose ekrano dydžiuose. Žiniatinklis buvo traktuojamas kaip spauda: fiksuotas, valdomas, nuspėjamas.

EM vienetai egzistavo CSS specifikacijoje, paveldėti iš tipografijos, tačiau dauguma kūrėjų jų vengė. Kaupiamasis elgesys buvo painus, ir nebuvo mobiliųjų įrenginių, verčiančių mąstyti lanksčiai.

Mobilusis pažadinimo skambutis (2007-2010)

iPhone pakeitė viską. Staiga reikšminga dalies eismo atėjo iš 320px pločio ekranų. Priartinimas-atitolinimas padėjo, tačiau svetainės, sukurtos 1024px staliniams kompiuteriams, buvo skausmingos mobiliuosiuose.

Ethano Marcotte'o 2010 m. straipsnis apie responsinį žiniatinklio dizainą sukonkretino naują požiūrį: sklandžius tinklelius, lankstžius paveikslėlius ir medijos užklausas. Santykiniai vienetai tapo būtini, ne pasirinktiniai. Tačiau EM vienetų kaupiamasis elgesys sukėlė klaidų sudėtinguose išdėstymuose.

REM vienetai išgelbėja dieną (2010-Dabartis)

CSS3 apie 2010 m. pristatė REM vienetą, išsprendžiant pagrindinę EM problemą: kaupimąsi. REM suteikė santykinį masteliavimą be paveldėjimo sudėtingumo. Internet Explorer 9 pridėjo palaikymą 2011 m., ir iki 2015 m. REM vienetai tapo pagrindiniai.

Šiandien geriausios praktikos derina vienetus strategiškai. REM tipografijai ir tarpams. EM komponentų vidiniams santykiams. Pikseliai smulkioms detalėms. Šiuolaikinės CSS funkcijos, pvz., clamp(), dinamiškai maišo šiuos vienetus, kurdamos išdėstymus, pritaikomus bet kokiame kontekste.

Šis evoliucijos kelias — nuo standžių pikselių iki lankstesnių santykinių vienetų — atspindi vartotojų lūkesčių kaitą nuo „svetainės turi atrodyti vienodai visur" iki „svetainės turi gerai veikti visur".

Vienetų konvertavimo kodo pavyzdžiai

JavaScript vienetų konvertavimo 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// Naudojimo pavyzdys
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 pasirinktinės savybės vienetų konvertavimui

1:root {
2  /* Baziniai šriftų dydžiai */
3  --root-font-size: 16px;
4  --base-font-size: var(--root-font-size);
5  
6  /* Įprasti 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 maišymai vienetų konvertavimui

1// SCSS funkcijos vienetų konvertavimui
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ėvinio elemento šrifto dydį (18px) em konvertavimui
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# Naudojimo pavyzdys
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žniausios klaidos konvertuojant CSS vienetus

Peržiūrėjęs šimtus kodo bazių, pastebėjau, kad šios klaidos kartojasi nuolat. Jų vengimas sutaupys jums derinimo laiko.

1 klaida: Nepaisymas pasirinktinio šakninio šrifto dydžio

Problema: Konvertuojate 24px į 1,5rem, manydami, kad numatytasis šakninis šrifto dydis yra 16px, tačiau jūsų projekte naudojama html { font-size: 62.5%; }, kas padaro šaknį 10px. Jūsų elementas baigiasi 15px vietoj 24px.

Sprendimas: Visada patikrinkite faktinį projekto šakninio šrifto dydį prieš konvertuojant. Nustatykite konverterio šakninio šrifto dydį, kad jis atitiktų jūsų projekto realybę.

2 klaida: EM vienetų naudojimas tipografijai įdėtuose komponentuose

Problema: Sukuriate kortelės komponentą su font-size: 1.2em antraštėms. Veikia puikiai. Tada įdėsite kortelę į kitą kortelę, ir staiga vidinės kortelės antraštė tampa 1,44em (1,2 × 1,2), o ne 1,2em.

Sprendimas: Naudokite REM vienetus tipografijai, nebent specialiai norite pakopinio elgesio. Palikite EM vienetus tarpams, kurie turėtų keistis kartu su vietiniu šrifto dydžiu.

3 klaida: Rėmelių pločio konvertavimas į REM

Problema: Konvertuojate border: 1px į border: 0.0625rem dėl nuoseklumo. Kai vartotojai keičia mastelio keitimą ar šrifto dydį, jūsų rėmeliai tampa stori ir negražūs.

Sprendimas: Palikite rėmelius pikseliais. Sub-pikseliniai rėmeliai (0,5px) turi nesuderintą naršyklių palaikymą, o rėmeliai retai kada turi keistis kartu su tekstu.

4 klaida: Pamiršimas, kad medijos užklausų vienetai remiasi vartotojo nuostatomis

Problema: Rašote @media (min-width: 768px) planšetės lūžio taškui. Vartotojai, kurie nustatė didesnį numatytąjį šrifto dydį, negauna planšetės išdėstymo, kai turėtų.

Sprendimas: Naudokite EM arba REM vienetus medijos užklausose: @media (min-width: 48em). Tai gerbia vartotojo šrifto nuostatas, kaip rekomenduojama MDN atsakingojo dizaino dokumentacijoje.

5 klaida: Skirtingų skaičiavimo metodų maišymas

Problema: Jūsų Sass naudoja vieną skaičiavimo metodą, JavaScript - kitą, o jūsų protinis skaičiavimas - trečią. Rezultatai nesutampa, sukeliant pikselių stumdymo frustraciją.

Sprendimas: Naudokite šį konverterį kaip tiesos šaltinį. Įsidėmėkite jį, naudokite per kodo peržiūras ir užtikrinkite, kad visi jūsų komandos nariai naudotų tą patį konvertavimo metodą.

Dažniausiai užduodami klausimai

Koks skirtumas tarp REM ir EM vienetų?

Nuorodos taškas skiriasi visiškai. REM vienetai visada žiūri į šakninio <html> elemento šrifto dydį — nepriklausomai nuo to, kaip giliai įdėtas jūsų elementas, 1rem visada lygus tam pačiam apskaičiuotam dydžiui. EM vienetai žiūri į savo tiesioginio tėvinio elemento šrifto dydį, kas sukuria kaskadinio poveikio efektą.

Galvokite apie tai taip: jei įdėsite tris <div> elementus, kiekvieną su font-size: 1.2em, pačiame vidiniame div'e tekstas bus žymiai didesnis, nei tikėjotės, nes kiekvienas lygis dauginasi. Su font-size: 1.2rem kiekviename lygyje visi trys div'ai turės vienodą šrifto dydį, nes visi nukreipia į šakninį elementą.

Būtent dėl šios priežasties REM tapo populiarus tipografijoje, kai pagerėjo naršyklių palaikymas — tai panaikina sudėtingą paveldėjimo grandinių sekimą.

Koks CSS vienetas geriausias jautriajam interneto dizainui?

Nėra vieno vieneto, kuris laimėtų visose situacijose. Geriausi jautrieji dizainai derina vienetus strategiškai:

Naudokite REM: Globalūs atstumai, šrifto skalės, komponentų tarpai ir bet kokie matavimai, kurie turėtų keistis kartu su vartotojo šrifto nuostatomis

Naudokite EM: Komponentų vidiniai atstumai (mygtukų užpildas, kortelių tarpai), medijos užklausos (jos gerbia vartotojo nuostatas) ir elementai, kurie turėtų keistis pagal savo lokalų kontekstą

Naudokite pikselius: 1px rėmeliai (atrodo ryškūs), šešėliai (subtiliems šešėliams reikia tikslumo), SVG brūkšnių pločiai

Naudokite procentus ar vaizdo taško vienetus: Konteinerių pločiai, viso aukščio sekcijos

Esu matęs kodų bazes, kurios bandė naudoti vieną vienetą visur — tai visada sukuria priežiūros sunkumus. Naudokite kiekvieną vienetą ten, kur jis teikia didžiausią naudą.

(Vertimas tęsiasi toliau tuo pačiu principu)

Nuorodos ir papildoma literatūra

  1. „CSS reikšmių ir vienetų modulis, 3 lygis". W3C rekomendacija. https://www.w3.org/TR/css-values-3/

  2. Marcotte, Ethan. „Adaptyvioji interneto dizaino koncepcija". A List Apart, 2010 m. gegužės 25 d. https://alistapart.com/article/responsive-web-design/

  3. Rutter, Richard. „Tipografinės stilistikos elementai, taikomi internete". http://webtypography.net/

  4. „CSS vienetai". MDN interneto dokumentai. https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units

  5. „CSS pikseliai prieš fizinius pikselius". „Stack Overflow" dokumentacija. https://stackoverflow.com/questions/8785643/what-exactly-is-the-difference-between-css-pixels-and-device-pixels

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

  7. „CSS pasirinktinių savybių (kintamųjų) naudojimas". MDN interneto dokumentai. https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties

  8. „rem vienetų CSS supratimas ir naudojimas". SitePoint. https://www.sitepoint.com/understanding-and-using-rem-units-in-css/

Pradėkite tiksliai konvertuoti CSS vienetus

Rankinis CSS vienetų konvertavimas yra nuobodus ir linkęs į klaidas. Jūs atliekate matematinius skaičiavimus galvoje, abejojate skaičiavimais ir tikitės, kad nustatėte teisingus šriftų dydžius. Šis PX į REM į EM konverteris pašalina šį trukdį.

Įveskite pikselių reikšmes iš dizaino failų, sureguliuokite šriftų dydžius, kad jie atitiktų jūsų projekto konfigūraciją, ir iš karto gaukite tikslias REM ir EM reikšmes. Nukopijuokite jas tiesiai į savo kodą. Nesvarbu, ar jūs diegiate naują dizaino sistemą, pritaikote esamą kodų bazę su santykiniais vienetais, ar tiesiog bandote suprasti, kaip šie vienetai susiję, konverteris atlieka matematinius skaičiavimus, kad jūs galėtumėte sutelkti dėmesį į kūrimą.

Kūrėjams, dirbantiems prie prieinamų svetainių, šis įrankis padeda užtikrinti, kad jūsų išdėstymai tinkamai keistųsi, kai vartotojai koreguoja šriftų nuostatas - tai yra reikalavimas pagal WCAG 2.1 lygį AA. Tiems, kurie kuria komponentų bibliotekas, jis paaiškina, kokios EM reikšmės sukuria norimas proporcijas. Bet kam, kas verčia Figma dizainus į gamybinį CSS, jis žymiai pagreitina konvertavimo darbo eigą.

Formulės pagrįstos W3C CSS verčių ir vienetų modulio specifikacija, užtikrinant, kad konvertavimai atitiktų tikrąjį naršyklių skaičiavimo būdą.