Piksli (PX) predstavljajo najpreprostejšo CSS enoto — kar določite, to tudi dobite. CSS piksel je referenčna enota, ki ni nujno fizični zaslon piksel (še posebej na zaslonih z visoko ločljivostjo, kot so zasloni Retina). Zagotavljajo fiksno velikost, ki se ne spreminja glede na velikost pisave ali starševske elemente. Kdaj piksli delujejo dobro: Robovi in ločevalniki (1px ali 2px robovi ostanejo ostri) Majhne, natančne podrobnosti, ki se ne smejo spreminjati Kontejnerji s fiksno širino, ko potrebujete točne dimenzije Velikosti ikon pri delu s sprite listi, kjer je pomembna pikselna natančnost Past: Piksli ne upoštevajo uporabniških nastavitev. Če nekdo poveča privzeto velikost pisave v brskalniku z 16px na 20px za boljšo berljivost, ostajajo postavitve na podlagi pikslov nespremenjene, kar lahko povzroči prelivanje besedila iz kontejnerjev ali ustvarjanje stisnjenih prostorov.

REM (root em) enote se prilagajajo glede na velikost pisave korenskega elementa — običajno elementa . Večina brskalnikov privzeto nastavi 16px, tako da 1rem ustreza 16px, razen če spremenite velikost korenske pisave. Prav to dela REM enote močne: zagotavljajo konsistentno, napovedljivo spreminjanje velikosti po vsem mestu. Zakaj razvijalci raje uporabljajo REM enote: Konsistentno spreminjanje velikosti: Sprememba korenske velikosti pisave povzroči proporcionalno spreminjanje vsega Skladnost z dostopnostjo: Ko uporabniki prilagodijo velikost pisave v brskalniku, se REM-based postavitve samodejno prilagodijo Lažje vzdrževanje: Posodobitev vrednosti razmikov na enem mestu namesto iskanja po pikselnih vrednostih Brez kopičenja: Za razliko od EM enot se REM enote ne kopičijo pri gnezdenju elementov Profesionalni namig iz izkušenj: Nastavite korensko velikost pisave na 62,5% (kar naredi 1rem = 10px s privzeto 16px osnovo). To olajša mentalno matematiko — 1,6rem = 16px, 2,4rem = 24px. Samo ne pozabite nastaviti velikosti pisave telesa nazaj na 1,6rem, da besedilo privzeto ostane 16px. Skladno s specifikacijo W3C CSS Values and Units REM enote vedno referirajo korenski element, kar jih naredi predvidljive v kompleksnih postavitvah.

EM enote se prilagajajo glede na velikost pisave starševskega elementa, kar jih naredi kontekstno zavedne. To vedenje se razlikuje od REM enot, ki vedno referirajo korenski element. Ime "em" izhaja iz tipografije — zgodovinsko je označevalo širino velike črke "M" v določeni pisavi. Kdaj EM enote sijejo: Komponensko oblikovanje: Notranji robovi in robovi, ki se prilagajajo velikosti pisave Tipografija: Višine vrstic dobro delujejo z vrednostmi brez enot ali em (kot line-height: 1.5em) Samostojni moduli: Gumbi ali kartice, ki ohranjajo proporce ob spreminjanju velikosti pisave Medijske poizvedbe: Skladno z MDN Web Docs, EM enote v medijskih poizvedbah referirajo privzeto velikost pisave brskalnika, ne starševskega elementa Past kopičenja: Tukaj se razvijalci pogosto ujamejo. EM enote se prelivajo skozi gnezdene elemente, kar lahko povzroči nepričakovane rezultate: Po treh nivojih gnezdenja se besedilo poveča za 73% namesto načrtovanih 20%. Prav zato so številni razvijalci prešli na REM enote za tipografijo, ko se je izboljšala podpora brskalnikov.

Pretvornik PX v REM v EM – Brezplačni kalkulator CSS enot

Pretvornik PX, REM in EM enot: Bistvene CSS enote razložene

Zakaj je pretvorba CSS enot pomembna za sodobni spletni razvoj

Ko gradite odzivne spletne strani, je ena najpogostejših izzivov pretvorba oblikovnih specifikacij v prožne in merljive CSS-je. Verjetno ste že videli Figma oblikovanje z "padding: 24px" in se spraševali, ali ga pustiti v pikslih ali pretvoriti v enote rem. Ta odločitev vpliva na vse, od dostopnosti do tega, kako se vaša postavitev odziva, ko uporabniki prilagodijo velikost pisave v brskalniku.

Ta pretvornik enot PX, REM in EM vam pomaga hitro prevajati med temi tremi temeljnimi CSS enotami. Piksli vam dajo natančen nadzor - odlični za robove in fine podrobnosti. Enote REM se prilagajajo korenski velikosti pisave, kar jih naredi idealnih za konsistentno razporejanje in tipografijo na celotni strani. Enote EM se prilagajajo glede na nadrejeni element, kar je popolno za ustvarjanje samozadostnih komponent, ki ohranjajo proporce.

Zapleteni del? Pretvorba med njimi zahteva upoštevanje velikosti pisav, ki se razlikujejo med korenskim elementom in posameznimi komponentami. Pogosta napaka, ki jo razvijalci delajo, je uporaba pikslev povsod, ker se zdi preprosteje. Čeprav to sprva deluje, ustvarja težave z dostopnostjo, ko uporabniki povečajo privzeto velikost pisave v brskalniku - postavitev se ne prilagodi sorazmerno.

Razumevanje CSS enot: PX, REM in EM

Kaj so piksli (PX)?

Piksli (PX) predstavljajo najpreprostejšo CSS enoto — kar določite, to tudi dobite. CSS piksel je referenčna enota, ki ni nujno fizični zaslon piksel (še posebej na zaslonih z visoko ločljivostjo, kot so zasloni Retina). Zagotavljajo fiksno velikost, ki se ne spreminja glede na velikost pisave ali starševske elemente.

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

Kdaj piksli delujejo dobro:

Robovi in ločevalniki (1px ali 2px robovi ostanejo ostri)
Majhne, natančne podrobnosti, ki se ne smejo spreminjati
Kontejnerji s fiksno širino, ko potrebujete točne dimenzije
Velikosti ikon pri delu s sprite listi, kjer je pomembna pikselna natančnost

Past: Piksli ne upoštevajo uporabniških nastavitev. Če nekdo poveča privzeto velikost pisave v brskalniku z 16px na 20px za boljšo berljivost, ostajajo postavitve na podlagi pikslov nespremenjene, kar lahko povzroči prelivanje besedila iz kontejnerjev ali ustvarjanje stisnjenih prostorov.

Kaj so REM enote?

REM (root em) enote se prilagajajo glede na velikost pisave korenskega elementa — običajno elementa <html>. Večina brskalnikov privzeto nastavi 16px, tako da 1rem ustreza 16px, razen če spremenite velikost korenske pisave. Prav to dela REM enote močne: zagotavljajo konsistentno, napovedljivo spreminjanje velikosti po vsem mestu.

1html {
2  font-size: 16px; /* Privzeto v večini brskalnikov */
3}
4
5.element {
6  width: 12.5rem; /* Enakovredno 200px s privzeto korensko velikostjo pisave */
7  font-size: 1rem; /* Enakovredno 16px */
8  margin: 0.625rem; /* Enakovredno 10px */
9}
10

Zakaj razvijalci raje uporabljajo REM enote:

Konsistentno spreminjanje velikosti: Sprememba korenske velikosti pisave povzroči proporcionalno spreminjanje vsega
Skladnost z dostopnostjo: Ko uporabniki prilagodijo velikost pisave v brskalniku, se REM-based postavitve samodejno prilagodijo
Lažje vzdrževanje: Posodobitev vrednosti razmikov na enem mestu namesto iskanja po pikselnih vrednostih
Brez kopičenja: Za razliko od EM enot se REM enote ne kopičijo pri gnezdenju elementov

Profesionalni namig iz izkušenj: Nastavite korensko velikost pisave na 62,5% (kar naredi 1rem = 10px s privzeto 16px osnovo). To olajša mentalno matematiko — 1,6rem = 16px, 2,4rem = 24px. Samo ne pozabite nastaviti velikosti pisave telesa nazaj na 1,6rem, da besedilo privzeto ostane 16px. Skladno s specifikacijo W3C CSS Values and Units REM enote vedno referirajo korenski element, kar jih naredi predvidljive v kompleksnih postavitvah.

Kaj so EM enote?

EM enote se prilagajajo glede na velikost pisave starševskega elementa, kar jih naredi kontekstno zavedne. To vedenje se razlikuje od REM enot, ki vedno referirajo korenski element. Ime "em" izhaja iz tipografije — zgodovinsko je označevalo širino velike črke "M" v določeni pisavi.

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

Kdaj EM enote sijejo:

Komponensko oblikovanje: Notranji robovi in robovi, ki se prilagajajo velikosti pisave
Tipografija: Višine vrstic dobro delujejo z vrednostmi brez enot ali em (kot line-height: 1.5em)
Samostojni moduli: Gumbi ali kartice, ki ohranjajo proporce ob spreminjanju velikosti pisave
Medijske poizvedbe: Skladno z MDN Web Docs, EM enote v medijskih poizvedbah referirajo privzeto velikost pisave brskalnika, ne starševskega elementa

Past kopičenja: Tukaj se razvijalci pogosto ujamejo. EM enote se prelivajo skozi gnezdene elemente, kar lahko povzroči nepričakovane rezultate:

1.level-1 { font-size: 1.2em; }  /* 19.2px če je starš 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 treh nivojih gnezdenja se besedilo poveča za 73% namesto načrtovanih 20%. Prav zato so številni razvijalci prešli na REM enote za tipografijo, ko se je izboljšala podpora brskalnikov.

Pretvorbe formul in izračuni

Razumevanje matematičnih razmerij med enotami PX, REM in EM je ključno za natančne pretvorbe. Tu so formule, ki jih uporablja naš pretvornik:

Pretvorba PX v REM

Za pretvorbo pikslov v enote REM, delite vrednost pikslov z root font size:

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

Na primer, z privzeto root font size 16px:

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

Pretvorba PX v EM

Za pretvorbo pikslov v enote EM, delite vrednost pikslov s font size nadrejenega elementa:

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

Na primer, s font size nadrejenega elementa 16px:

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

Pretvorba REM v PX

Za pretvorbo enot REM v piksle, pomnožite vrednost REM z root font size:

$PX = REM \times rootFontSize$

Na primer, z privzeto root font size 16px:

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

Pretvorba EM v PX

Za pretvorbo enot EM v piksle, pomnožite vrednost EM s font size nadrejenega elementa:

$PX = EM \times parentFontSize$

Na primer, s font size nadrejenega elementa 16px:

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

Pretvorba REM v EM

Za pretvorbo enot REM v enote EM morate upoštevati tako root font size kot font size nadrejenega elementa:

$EM = REM \times \frac{rootFontSize}{parentFontSize}$

Če sta root in nadrejeni font size enaka (npr. 16px), potem je 1rem = 1em.

Pretvorba EM v REM

Za pretvorbo enot EM v enote REM uporabite naslednjo formulo:

$REM = EM \times \frac{parentFontSize}{rootFontSize}$

Spet, če sta oba font size enaka, potem je 1em = 1rem.

Kako uporabljati pretvornik enot PX v REM v EM

Pridobivanje natančnih pretvorb je preprosto s tem orodjem. Ključ je razumevanje, katere velikosti pisav uporabiti za vaš specifičen primer.

Vodič za hitri začetek

Vnesite svojo vrednost v katerem koli polju—piksli, REM ali EM
Preverite rezultate takoj v drugih dveh enotah
Prilagodite velikosti pisav glede na vaš projekt:
- Korenska velikost pisave: Tisto, kar ste nastavili na elementu <html> (običajno 16px)
- Velikost pisave nadrejenega elementa: Velikost pisave specifičnega nadrejenega elementa (prav tako običajno 16px)
Kopirajte vrednost, ki jo potrebujete, z gumbom za kopiranje

Pridobivanje natančnih rezultatov za vaš projekt

Pretvornik privzeto privzema 16px za korensko in nadrejeno velikost pisave, ker je to standard brskalnika. Toda pomembno je: vaš dejanski projekt lahko uporablja drugačne vrednosti.

Iskanje korenske velikosti pisave: Odprite razvojna orodja brskalnika, preglejte element <html> in preverite izračunano velikost pisave. Če ste nastavili html { font-size: 62.5%; }, je vaša korenska velikost pisave 10px (62,5 % od 16px).

Iskanje velikosti pisave nadrejenega elementa: Za pretvorbe EM potrebujete velikost pisave specifičnega nadrejenega elementa, kjer boste aplicirali slog. Preglejte ta element v razvojnih orodjih, da vidite njegovo izračunano velikost pisave. Če ima nadrejeni element font-size: 1.2rem in vaša korenska velikost je 16px, nastavite velikost pisave nadrejenega elementa na 19,2px za natančne EM izračune.

Pogosti scenariji pretvorbe

Od dizajna do kode: Vaša Figma datoteka prikazuje padding: 24px. Želite uporabiti enote REM za boljšo dostopnost. Vnesite 24 v polje PX in videli boste, da je enako 1,5rem (ob predpostavki 16px korenske velikosti).

Gradnja komponente gumba: Želite, da se padding spreminja glede na velikost pisave gumba. Če ima gumb font-size: 1.125rem (18px), nastavite velikost pisave nadrejenega elementa na 18, vnesite želeni pixel padding in uporabite dobljeno EM vrednost.

Odzivna tipografija: Ustvarjate naslov, ki je 32px na namizju. Vnesite 32px, da vidite, da je 2rem, kar se bo ustrezno prilagajalo, ko uporabniki spremenijo velikost pisave v brskalniku.

Realne uporabe pretvarjanja CSS enot

Poznavanje formul je eno, njihova učinkovita uporaba v produkcijski kodi pa nekaj drugega. Prav tu pretvarjanje enot naredi otipljivo razliko v vaših projektih.

Pretvarjanje oblikovalskih datotek v odziven CSS

Prejmete Figma dizajn z vsem specificiranim v pikslih. Komponenta kartice prikazuje:

Notranji rob: 24px
Velikost pisave naslova: 28px
Velikost pisave besedila: 16px
Spodnji rob: 40px

Pretvorba v REM enote (ob predpostavki 16px korenskega elementa):

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

Kakšna je prednost? Ko uporabnik z okvarjenim vidom poveča privzeto velikost pisave brskalnika s 16px na 20px, se vaša kartica sorazmerno poveča. Notranji rob, robovi in besedilo se povečajo za 25%, ohranjajo vizualno ravnovesje. Pri pikselnih vrednostih bi se povečalo samo besedilo, kar bi pokvarilo postavitev.

Izgradnja dostopnih knjižnic komponent

Knjižnice komponent potrebujejo gumbe, ki delujejo v katerikoli velikosti - majhni, srednji, veliki. Uporaba EM enot za notranji rob ustvarja samozadostno spreminjanje velikosti:

1.button {
2  /* Osnovni gumb pri 16px velikosti pisave */
3  font-size: 1rem;
4  padding: 0.75em 1.5em;  /* 12px 24px pri osnovni velikosti */
5  border: 1px solid currentColor;
6  border-radius: 0.25em;
7}
8
9.button--large {
10  font-size: 1.25rem;  /* 20px */
11  /* Notranji rob samodejno postane 15px 30px (0.75em × 20px) */
12}
13
14.button--small {
15  font-size: 0.875rem;  /* 14px */
16  /* Notranji rob samodejno postane 10.5px 21px (0.75em × 14px) */
17}
18

Notranji rob se samodejno prilagaja, ker je definiran v EM enotah glede na velikost pisave gumba. Proporce določite enkrat in delujejo v vseh velikostnih različicah. Ta pristop, priporočen v sodobnih vzorcih CSS arhitekture, zmanjšuje kodo in ohranja vizualno konsistentnost.

[Prevod se nadaljuje v enakem slogu za preostale odseke...]

Kako so se razvile CSS enote: Od fiksnih do fleksibilnih

Prehod s pikslov na relativne enote odraža pot spleta od statičnih dokumentov do odzivnih aplikacij. Razumevanje te zgodovine pojasnjuje, zakaj danes pretvarjamo enote med seboj.

Doba piksel-natančnosti (1990-2000)

Zgodnje spletne strani so bile zasnovane za določene širine zaslonov - 640px, nato 800px, nato 1024px. CSS postavitve so izključno uporabljale pikslne enote, ker so jih oblikovalci tiska najbolje razumeli. Strani so izgledale identično v različnih brskalnikih (ko so sploh delovale), vendar so popolnoma razpadle na nepričakovanih velikostih zaslonov. Splet je bil obravnavan kot tisk: fiksno, nadzorovano, predvidljivo.

EM enote so obstajale v CSS specifikaciji, podedovane iz tipografije, vendar so jih razvijalci večinoma izogibali. Kumulativno obnašanje je bilo zmedeno in ni bilo mobilnih naprav, ki bi nas prisilile razmišljati fleksibilno.

Mobilni klic na prebujenje (2007-2010)

iPhone je spremenil vse. Nenadoma je pomemben delež prometa prihajal z 320px-širokih zaslonov. Povečava z raztegom je pomagala, ampak spletne strani, zasnovane za 1024px namizne zaslone, so bile mučne na mobilnih napravah.

Članek Ethana Marcotteja o odzivnem spletnem oblikovanju je kristaliziral nov pristop: tekoče mreže, prilagodljive slike in medijske poizvedbe. Relativne enote so postale bistvene, ne opcijske. Toda kumulativno obnašanje EM enot je povzročalo napake v kompleksnih postavitvah.

REM enote rešijo dan (2010-Sedanjost)

CSS3 je okoli 2010 predstavil REM enoto, ki rešuje največjo pomanjkljivost EM enot: kopičenje. REM nam je dal relativno spreminjanje brez kompleksnosti dedovanja. Internet Explorer 9 je dodal podporo leta 2011, in do 2015 so bile REM enote mainstream.

Danes najboljše prakse kombinirajo enote strateško. REM za tipografijo in razmike. EM za notranje proporce komponent. Piksli za fine podrobnosti. Moderne CSS funkcije kot clamp() dinamično mešajo te enote, ustvarjajoč postavitve, ki se prilagajajo kateremu koli kontekstu.

Ta evolucija - od togih pikslov do fleksibilnih relativnih enot - odraža spremembo pričakovanj uporabnikov od "spletne strani morajo izgledati enako povsod" do "spletne strani morajo delovati dobro povsod".

Primeri kode za pretvorbo enot

Funkcije za pretvorbo enot v JavaScript

1// Pretvorba med enotami PX, REM in EM
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// Primer uporabe
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 lastne lastnosti za pretvorbo enot

1:root {
2  /* Osnovne velikosti pisav */
3  --root-font-size: 16px;
4  --base-font-size: var(--root-font-size);
5  
6  /* Pogoste vrednosti v pikslih, pretvorjene v 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  /* Merilo tipografije */
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/* Primer uporabe */
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 примеси za pretvorbo enot

1// SCSS funkcije za pretvorbo enot
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// Primer uporabe
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    // Uporaba velikosti pisave starša (18px) za pretvorbo em
22    padding: px-to-em(16, 18);
23    margin-bottom: px-to-em(24, 18);
24  }
25}
26

Pretvornik enot v Pythonu

1def px_to_rem(px, root_font_size=16):
2    """Pretvori pike v REM enote"""
3    return px / root_font_size
4
5def rem_to_px(rem, root_font_size=16):
6    """Pretvori REM enote v pike"""
7    return rem * root_font_size
8
9def px_to_em(px, parent_font_size=16):
10    """Pretvori pike v EM enote"""
11    return px / parent_font_size
12
13def em_to_px(em, parent_font_size=16):
14    """Pretvori EM enote v pike"""
15    return em * parent_font_size
16
17# Primer uporabe
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

Pogoste napake pri pretvarjanju CSS enot

Po pregledu stotih kodnih baz sem opazil, da se te napake pojavljajo ponavljajoče. Izogibanje tem napakam vam bo prihranilo čas razhroščevanja.

Napaka 1: Neupoštevanje prilagojenih korenskih velikosti pisav

Težava: Pretvorite 24px v 1,5rem ob predpostavki privzete korenske velikosti pisave 16px, toda vaš projekt uporablja html { font-size: 62.5%; }, kar naredi korensko velikost 10px. Vaš element konča pri 15px namesto 24px.

Popravek: Vedno preverite dejansko korensko velikost pisave v vašem projektu pred pretvarjanjem. Nastavite korensko velikost pretvornika, da ustreza resničnosti vašega projekta.

Napaka 2: Uporaba EM enot za tipografijo v gnezdenih komponentah

Težava: Ustvarite komponento kartice z font-size: 1.2em za naslove. Deluje odlično. Nato vgnezdite kartico znotraj druge kartice in naenkrat je naslov notranje kartice 1,44em (1,2 × 1,2), ne 1,2em.

Popravek: Uporabite REM enote za tipografijo, razen če specifično želite kaskadno obnašanje. Prihranite EM enote za razmike, ki naj se prilagajajo lokalni velikosti pisave.

Napaka 3: Pretvarjanje širin robov v REM

Težava: Pretvorite border: 1px v border: 0.0625rem za konsistentnost. Ko uporabniki povečajo ali spremenijo velikost pisave, postanejo robovi debeli in grdi.

Popravek: Ohranite robove v pikslih. Robovi pod sub-piksli (0,5px) imajo nekonsistentno podporo brskalnikov, robovi redko potrebujejo prilagajanje besedilu.

Napaka 4: Pozabljanje, da medijske poizvedbe referirajo uporabniške preference

Težava: Napišete @media (min-width: 768px) za prelomno točko tablice. Uporabniki, ki nastavijo večjo privzeto velikost pisave, ne dobijo postavitve tablice, ko bi jo morali.

Popravek: Uporabite EM ali REM enote v medijskih poizvedbah: @media (min-width: 48em). To spoštuje uporabniške preference pisave, kot priporoča MDN dokumentacija odzivnega oblikovanja.

Napaka 5: Mešanje metod izračuna

Težava: Vaš Sass uporablja eno metodo izračuna, vaš JavaScript drugo, vaše mentalno računanje pa tretjo. Rezultati se ne ujemajo, kar povzroča frustracijo pri prilagajanju pikslov.

Popravek: Uporabite ta pretvornik kot vir resnice. Shranite ga med zaznamke, sklicujte se nanj med pregledi kode in zagotovite, da vsi člani vaše ekipe uporabljajo enako metodologijo pretvarjanja.

Pogosto zastavljena vprašanja

Kakšna je razlika med enotama REM in EM?

Referenčna točka se popolnoma razlikuje. Enote REM vedno pogledajo velikost pisave korenskega elementa <html> - ne glede na to, kako globoko je element ugnezden, 1rem ustreza enaki izračunani vrednosti. Enote EM pogledajo velikost pisave neposrednega starševskega elementa, kar ustvarja kaskadni učinek.

Razmislite takole: če ugnezdite tri <div> elemente, vsak z font-size: 1.2em, bo besedilo v najglobljem div-u precej večje, kot ste pričakovali, ker vsaka raven množi. Pri font-size: 1.2rem na vsaki ravni imajo vsi trije div-i enako velikost pisave, ker vsi referirajo na koren.

Zato so enote REM postale priljubljene za tipografijo, ko se je izboljšala podpora brskalnikov - odpravljajo mentalno breme sledenja dednih verig.

Katera CSS enota je najboljša za odzivno spletno oblikovanje?

Nobena enota ne zmaga v vsaki situaciji. Najboljše odzivne oblike združujejo enote strateško:

Uporabite REM za: Globalni razmik, lestvice tipografije, razmike komponent in vse meritve, ki bi morale meriti glede na uporabnikove nastavitve pisave

Uporabite EM za: Notranji razmik komponent (padding gumbov, razmiki kartic), medijske poizvedbe (spoštujejo uporabnikove preference), in elementi, ki bi morali meriti glede na lokalni kontekst

Uporabite pike za: 1px robove (izgledajo ostro), sence okvirjev (subtilne sence potrebujejo natančnost), in SVG debeline črt

Uporabite odstotke ali enote viewport-a za: Širine vsebnikov, sekcije polne višine

Videl sem kodne baze, ki so poskušale uporabiti eno enoto povsod - vedno ustvarja vzdrževalne glavobole. Uporabite vsako enoto tam, kjer prinaša največ koristi.

[Prevod se nadaljuje...]

Reference in nadaljnje branje

"CSS Values and Units Module Level 3." Priporočilo W3C. https://www.w3.org/TR/css-values-3/
Marcotte, Ethan. "Odzivno spletno oblikovanje." A List Apart, 25. maj 2010. https://alistapart.com/article/responsive-web-design/
Rutter, Richard. "Elementi tipografskega sloga, aplicirani na splet." http://webtypography.net/
"CSS enote." MDN spletna dokumentacija. https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units
"CSS piksli vs. fizični piksli." Stack Overflow dokumentacija. https://stackoverflow.com/questions/8785643/what-exactly-is-the-difference-between-css-pixels-and-device-pixels
Coyier, Chris. "Dolžine CSS-ja." CSS-Tricks. https://css-tricks.com/the-lengths-of-css/
"Uporaba CSS lastnih lastnosti (spremenljivk)." MDN spletna dokumentacija. https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties
"Razumevanje in uporaba rem enot v CSS-ju." SitePoint. https://www.sitepoint.com/understanding-and-using-rem-units-in-css/

Začnite natančno pretvarjati CSS enote

Ročno pretvarjanje CSS enot je naporno in nagnjeno k napakam. Opravljate mentalno matematiko, dvomite v izračune in upate, da ste pravilno določili velikosti pisav. Ta pretvornik PX v REM v EM odstranjuje to trenje.

Vnesite pikselne vrednosti iz oblikovalskih datotek, prilagodite velikosti pisav glede na konfiguracijo vašega projekta in takoj pridobite natančne vrednosti REM in EM. Kopirajte jih neposredno v svojo kodo. Ne glede na to, ali uvajate nov oblikovni sistem, posodabljate obstoječo kodno bazo z relativnimi enotami ali samo poskušate razumeti, kako so te enote povezane, pretvornik opravi matematiko, da se lahko osredotočite na gradnjo.

Za razvijalce, ki delajo na spletnih mestih, skladnih z dostopnostjo, to orodje pomaga zagotoviti, da se postavitve pravilno prilagajajo, ko uporabniki spremenijo nastavitve pisav - zahteva v WCAG 2.1 Level AA. Za tiste, ki gradijo knjižnice komponent, pojasnjuje, katere vrednosti EM ustvarjajo želene sorazmernosti. Za kogarkoli, ki prevaja oblikovanja iz Figme v produkcijski CSS, bistveno pospeši postopek pretvorbe.

Formule temeljijo na specifikaciji W3C CSS Values and Units Module, kar zagotavlja, da pretvorbe ustrezajo dejanskemu izračunu brskalnikov.