Preskoči na sadržaj
🛠️
Whiz Tools

PX u REM u EM Pretvarač – Besplatni CSS Kalkulator Jedinica

Trenutno pretvorite piksel u REM i EM jedinice. Besplatni pretvarač CSS jedinica za responzivni web dizajn. Podržava prilagođene veličine fonta i izračune u stvarnom vremenu za precizne rezultate.

Pretvarač PX, REM i EM jedinica

Pretvorite između piksela (PX), root em (REM) i em (EM) jedinica. Unesite vrijednost u bilo koje polje da biste vidjeli ekvivalentne vrijednosti u ostalim jedinicama.

px
px
px
rem
em
Vizualizacija nije dostupna za negativne ili nulte vrijednosti

Formule pretvaranja

  • PX u REM: vrijednost u px ÷ veličina korijenskog fonta
  • PX u EM: vrijednost u px ÷ veličina fonta roditeljskog elementa
  • REM u PX: vrijednost u rem × veličina korijenskog fonta
  • EM u PX: vrijednost u em × veličina fonta roditeljskog elementa
Kalkulator učitavanja...
📚

Dokumentacija

PX, REM i EM Pretvarač jedinica: Objašnjenje ključnih CSS jedinica

Zašto je pretvaranje CSS jedinica važno za moderni web razvoj

Kada gradite responzivne web stranice, jedan od najčešćih izazova je prevođenje dizajnerskih specifikacija u fleksibilne, skalabilne CSS-ove. Vjerojatno ste vidjeli Figma dizajn s "padding: 24px" i pitali se želite li ga zadržati kao piksele ili pretvoriti u rem jedinice. Ta odluka utječe na sve, od pristupačnosti do toga kako se vaš raspored prilagođava kada korisnici promijene veličinu fonta u svom pregledniku.

Ovaj pretvarač PX, REM i EM jedinica pomaže vam brzo prevoditi između ove tri temeljne CSS jedinice. Pikseli vam daju preciznu kontrolu - odlični za okvire i fine detalje. REM jedinice skaliraju se s veličinom korijenskog fonta, čineći ih idealnim za dosljedne razmake i tipografiju na cijeloj stranici. EM jedinice skaliraju se u odnosu na nadređeni element, savršene za stvaranje samostalnih komponenti koje zadržavaju proporcije.

Teški dio? Pretvaranje između njih zahtijeva uzimanje u obzir veličina fontova, koje variraju između vašeg korijenskog elementa i pojedinačnih komponenti. Uobičajena pogreška koju viđam kod developera jest korištenje piksela svugdje jer se čini jednostavnijim. Dok to inicijalno funkcionira, stvara probleme pristupačnosti kada korisnici povećaju zadanu veličinu fonta u svom pregledniku - raspored se ne prilagođava proporcionalno.

Razumijevanje CSS jedinica: PX, REM i EM

Što su pikseli (PX)?

Pikseli (PX) predstavljaju najjednostavniju CSS jedinicu — ono što odredite je ono što dobijete. CSS piksel je referentna jedinica, ne nužno fizički piksel zaslona (posebno na zaslonima visoke gustoće poput Retina zaslona). Oni pružaju fiksnu veličinu koja se ne mijenja ovisno o veličini fonta ili roditeljskim elementima.

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

Kada pikseli dobro funkcioniraju:

  • Obrubi i razdjelnici (1px ili 2px obrubi ostaju oštar)
  • Male, precizne detalje koji ne bi trebali mijenjati veličinu
  • Kontejneri fiksne širine kada su potrebne točne dimenzije
  • Veličine ikona pri radu s listama sprite-ova preciznim do piksela

Problem: Pikseli ne poštuju korisničke preferencije. Ako netko poveća zadanu veličinu fonta preglednika s 16px na 20px radi bolje čitljivosti, izgledi bazirani na pikselima ostaju nepromijenjeni, potencijalno uzrokujući prekoračenje teksta ili gusto prostorno slaganje.

Što su REM jedinice?

REM (root em) jedinice skaliraju se na temelju veličine fonta korijenskog elementa — obično <html> elementa. Većina preglednika zadano postavlja 16px, tako da 1rem odgovara 16px osim ako ne promijenite veličinu korijenskog fonta. Evo što REM jedinice čini moćnima: pružaju dosljedan, predvidljiv skaliranje kroz cijelu stranicu.

1html {
2  font-size: 16px; /* Zadano u većini preglednika */
3}
4
5.element {
6  width: 12.5rem; /* Ekvivalentno 200px sa zadanom veličinom korijenskog fonta */
7  font-size: 1rem; /* Ekvivalentno 16px */
8  margin: 0.625rem; /* Ekvivalentno 10px */
9}
10

Zašto programeri preferiraju REM jedinice:

  • Dosljedan skaliranje: Promjena veličine korijenskog fonta proporcionalno mijenja sve
  • Sukladnost pristupačnosti: Kada korisnici prilagode veličinu fonta preglednika, REM izgledi se automatski prilagođavaju
  • Lakše održavanje: Ažuriranje vrijednosti razmaka na jednom mjestu umjesto traženja po piksel vrijednostima
  • Bez problema nagomilavanja: Za razliku od EM jedinica, REM jedinice se ne nagomilavaju

Profesionalni savjet iz iskustva: Postavite veličinu korijenskog fonta na 62.5% (što čini 1rem = 10px sa zadanih 16px). Ovo olakšava mentalno računanje — 1.6rem = 16px, 2.4rem = 24px. Samo se sjetite postaviti font-size tijela natrag na 1.6rem kako bi tekst zadano bio 16px. Prema W3C CSS Values and Units specifikaciji, REM jedinice uvijek referiraju korijenski element, čineći ih predvidljivima u složenim izlomcima.

Što su EM jedinice?

EM jedinice skaliraju se u odnosu na veličinu fonta roditeljskog elementa, čineći ih svjesnim konteksta. Ovo ponašanje razlikuje se od REM jedinica koje uvijek referiraju korijenski element. Naziv "em" potječe iz tipografije — povijesno je označavao širinu velikog slova "M" u određenom pismu.

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

Kada EM jedinice sjaje:

  • Dizajn komponenata: Padding i margine koje skaliraju s veličinom fonta
  • Tipografija: Visine linija dobro funkcioniraju s vrijednostima bez jedinica ili em-ovima (poput line-height: 1.5em)
  • Samostalni moduli: Gumbi ili kartice koje zadržavaju proporcije kada se mijenja veličina fonta
  • Medijski upiti: Prema MDN Web Docs, EM jedinice u medijskim upitima referiraju zadanu veličinu fonta preglednika, a ne roditeljskog elementa

Zamka nagomilavanja: Evo gdje se programeri često zapetljavaju. EM jedinice se kaskadno provlače kroz ugnježđene elemente, što može stvoriti neočekivane rezultate:

1.level-1 { font-size: 1.2em; }  /* 19.2px ako je roditelj 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

Nakon tri razine ugnježđivanja, vaš tekst je porastao za 73% umjesto namijenjenih 20%. Zbog toga su se mnogi programeri prebacili na REM jedinice za tipografiju čim se poboljšala podrška preglednika.

Formule i izračuni pretvorbe

Razumijevanje matematičkih odnosa između PX, REM i EM jedinica ključno je za precizne pretvorbe. Evo formula korištenih u našem konvertoru:

Pretvorba PX u REM

Za pretvorbu piksela u REM jedinice, podijelite vrijednost piksela s veličinom korijenskog fonta:

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

Na primjer, s zadanom veličinom korijenskog fonta od 16px:

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

Pretvorba PX u EM

Za pretvorbu piksela u EM jedinice, podijelite vrijednost piksela s veličinom fonta roditeljskog elementa:

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

Na primjer, s veličinom fonta roditeljskog elementa od 16px:

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

Pretvorba REM u PX

Za pretvorbu REM jedinica u piksele, pomnožite REM vrijednost s veličinom korijenskog fonta:

PX=REM×rootFontSizePX = REM \times rootFontSize

Na primjer, s zadanom veličinom korijenskog fonta od 16px:

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

Pretvorba EM u PX

Za pretvorbu EM jedinica u piksele, pomnožite EM vrijednost s veličinom fonta roditeljskog elementa:

PX=EM×parentFontSizePX = EM \times parentFontSize

Na primjer, s veličinom fonta roditeljskog elementa od 16px:

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

Pretvorba REM u EM

Za pretvorbu REM jedinica u EM jedinice, potrebno je uzeti u obzir veličinu korijenskog fonta i veličinu fonta roditeljskog elementa:

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

Ako su veličine korijenskog i roditeljskog fonta iste (npr. 16px), tada je 1rem = 1em.

Pretvorba EM u REM

Za pretvorbu EM jedinica u REM jedinice, koristite sljedeću formulu:

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

Ponovno, ako su obje veličine fonta jednake, tada je 1em = 1rem.

Kako koristiti pretvarač PX u REM i EM jedinice

Dobivanje preciznih pretvorbi je jednostavno uz ovaj alat. Ključ je razumjeti koje veličine fonta koristiti za vaš specifičan slučaj.

Vodič za brzi početak

  1. Unesite svoju vrijednost u bilo koje polje—pikseli, REM ili EM
  2. Provjerite rezultate trenutačno u druge dvije jedinice
  3. Prilagodite veličine fonta kako biste odgovarali vašem projektu:
    • Korijenska veličina fonta: Ono što ste postavili na <html> element (obično 16px)
    • Veličina fonta roditelja: Veličina fonta specifičnog roditeljskog elementa (također tipično 16px)
  4. Kopirajte vrijednost koju trebate pomoću gumba za kopiranje

Dobivanje preciznih rezultata za vaš projekt

Pretvarač zadano koristi 16px za korijenske i roditeljske veličine fonta jer je to standard preglednika. No, bitno je: vaš stvarni projekt može koristiti različite vrijednosti.

Pronalaženje korijenske veličine fonta: Otvorite razvojne alate preglednika, pregledajte <html> element i provjerite izračunatu veličinu fonta. Ako ste postavili html { font-size: 62.5%; }, vaša korijenska veličina fonta je 10px (62.5% od 16px).

Pronalaženje veličine fonta roditelja: Za EM pretvorbe, trebate veličinu fonta specifičnog roditeljskog elementa gdje primjenjujete stil. Pregledajte taj element u razvojnim alatima da biste vidjeli njegovu izračunatu veličinu fonta. Ako roditelj ima font-size: 1.2rem i vaš korijenski je 16px, postavite veličinu fonta roditelja na 19.2px za precizne EM izračune.

Uobičajeni scenariji pretvorbe

Od dizajna do koda: Vaša Figma datoteka prikazuje padding: 24px. Želite koristiti REM jedinice za bolju pristupačnost. Unesite 24 u polje PX i vidjeti ćete da je to 1.5rem (pretpostavljajući 16px korijenski).

Izrada komponente gumba: Želite da padding skalira s veličinom fonta gumba. Ako gumb ima font-size: 1.125rem (18px), postavite veličinu fonta roditelja na 18, unesite željeni pixel padding i koristite dobivenu EM vrijednost.

Responzivna tipografija: Stvarate naslov koji je 32px na desktop računalu. Unesite 32px da biste vidjeli da je to 2rem, što će se proporcionalno skalirati kada korisnici prilagode veličinu fonta preglednika.

Praktični primjeri pretvorbe CSS jedinica u stvarnom svijetu

Poznavanje formula je jedna stvar — učinkovita primjena u produkcijskom kodu je druga. Evo gdje pretvorba jedinica čini opipljivu razliku u vašim projektima.

Pretvaranje dizajnerskih datoteka u responzivni CSS

Primate Figma dizajn gdje je sve navedeno u pikselima. Komponenta kartice prikazuje:

  • Padding: 24px
  • Veličina fonta naslova: 28px
  • Veličina fonta tijela: 16px
  • Donji margina: 40px

Pretvaranje ovih u REM jedinice (pretpostavljajući 16px root) daje vam:

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

Koja je prednost? Kada korisnik s oštećenjem vida poveća zadanu veličinu fonta preglednika s 16px na 20px, vaša kartica se proporcionalno skalira. Padding, margine i tekst svi porastu za 25%, zadržavajući vizualni balans dizajna. Kod piksel vrijednosti, samo bi se tekst povećao, narušavajući izgled.

Izgradnja pristupačnih biblioteka komponenata

Biblioteke komponenata trebaju gumbe koji rade u bilo kojoj veličini — mali, srednji, veliki. Korištenjem EM jedinica za padding stvara se samostalno skaliranje:

1.button {
2  /* Osnovni gumb pri veličini fonta 16px */
3  font-size: 1rem;
4  padding: 0.75em 1.5em;  /* 12px 24px pri osnovnoj veličini */
5  border: 1px solid currentColor;
6  border-radius: 0.25em;
7}
8
9.button--large {
10  font-size: 1.25rem;  /* 20px */
11  /* Padding automatski postaje 15px 30px (0.75em × 20px) */
12}
13
14.button--small {
15  font-size: 0.875rem;  /* 14px */
16  /* Padding automatski postaje 10.5px 21px (0.75em × 14px) */
17}
18

Padding se automatski skalira jer je definiran u EM jedinicama relativno prema veličini fonta gumba. Definirate proporcije jednom, a one rade kroz sve varijante veličine. Ovaj pristup, preporučen u modernim obrascima CSS arhitekture, smanjuje kod i zadržava vizualnu konzistentnost.

[Prijevod se nastavlja...]

Kako su se CSS jedinice razvijale: Od fiksnih do fleksibilnih

Prelazak s piksela na relativne jedinice odražava put weba od statičkih dokumenata do responzivnih aplikacija. Razumijevanje ove povijesti objašnjava zašto danas pretvaramo jedinice između sebe.

Era savršenih piksela (1990-ih-2000-ih)

Rane web stranice bile su dizajnirane za specifične širine zaslona—640px, zatim 800px, zatim 1024px. CSS layouti koristili su isključivo piksel jer su dizajneri tiska to razumjeli. Stranice su izgledale identično kroz preglednike (kada bi uopće radile), ali su se potpuno kvarile na neočekivanim veličinama zaslona. Web je tretiran poput tiska: fiksno, kontrolirano, predvidljivo.

EM jedinice postojale su u CSS specifikaciji, naslijeđene iz tipografije, ali su ih većina developera izbjegavala. Ponašanje nagomilavanja bilo je zbunjujuće, i nije bilo mobilnih uređaja koji bi nas prisilili na fleksibilno razmišljanje.

Mobilni alarm za buđenje (2007-2010)

iPhone je promijenio sve. Odjednom, značajan dio prometa dolazio je s 320px-širokih zaslona. Pinch-to-zoom je pomogao, ali web stranice dizajnirane za 1024px desktop bile su mučne na mobilnim uređajima.

Članak Ethana Marcottea o responzivnom web dizajnu iz 2010. kristalizirao je novi pristup: fluidne mreže, fleksibilne slike i media upiti. Relativne jedinice postale su nužne, a ne opcijske. Ali ponašanje EM jedinica uzrokovalo je greške u složenim layoutima.

REM jedinice spašavaju dan (2010-Sadašnjost)

CSS3 je oko 2010. uveo REM jedinice, rješavajući najveći problem EM jedinica: nagomilavanje. REM nam je dao relativno skaliranje bez kompleksnosti naslijeđivanja. Internet Explorer 9 dodao je podršku 2011., i do 2015. REM jedinice postale su mainstream.

Danas najbolje prakse kombiniraju jedinice strateški. REM za tipografiju i razmake. EM za proporcionalne odnose komponenti. Pikseli za fine detalje. Moderne CSS funkcije poput clamp() dinamički miješaju ove jedinice, stvarajući layoute koji se prilagođavaju bilo kojem kontekstu.

Ova evolucija—od krutih piksela do fleksibilnih relativnih jedinica—odražava promjenu korisničkih očekivanja od "web stranice trebaju izgledati isto svugdje" do "web stranice trebaju dobro raditi svugdje".

Primjeri koda za pretvorbu jedinica

JavaScript funkcije za pretvorbu jedinica

1// Pretvorba između PX, REM i EM jedinica
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// Primjer upotrebe
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 prilagođene svojstva za pretvorbu jedinica

1:root {
2  /* Osnovne veličine fonta */
3  --root-font-size: 16px;
4  --base-font-size: var(--root-font-size);
5  
6  /* Uobičajene vrijednosti piksela pretvorene u 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  /* Ljestvica 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/* Primjer upotrebe */
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 miksi za pretvorbu jedinica

1// SCSS funkcije za pretvorbu jedinica
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// Primjer upotrebe
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    // Korištenje font veličine roditelja (18px) za em pretvorbu
22    padding: px-to-em(16, 18);
23    margin-bottom: px-to-em(24, 18);
24  }
25}
26

Python pretvarač jedinica

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

Uobičajene pogreške prilikom pretvaranja CSS jedinica

Nakon pregleda stotina kodnih baza, primijetio sam da se ove pogreške ponavljaju. Izbjegavanje istih uštedit će vam vrijeme za ispravljanje grešaka.

Pogreška 1: Nepridržavanje prilagođene veličine korijenskog fonta

Problem: Pretvarate 24px u 1.5rem pretpostavljajući zadanu veličinu korijenskog fonta od 16px, ali vaš projekt koristi html { font-size: 62.5%; }, što čini korijenski font 10px. Vaš element završava na 15px umjesto 24px.

Rješenje: Uvijek provjerite stvarnu veličinu korijenskog fonta svog projekta prije pretvaranja. Postavite veličinu korijenskog fonta u pretvaraču tako da odgovara stvarnosti vašeg projekta.

Pogreška 2: Korištenje EM jedinica za tipografiju u ugniježđenim komponentama

Problem: Izrađujete komponentu kartice s font-size: 1.2em za naslove. Radi odlično. Zatim ugniježđujete karticu unutar druge kartice, i odjednom je naslov unutarnje kartice 1.44em (1.2 × 1.2), a ne 1.2em.

Rješenje: Koristite REM jedinice za tipografiju osim ako specifično ne želite kaskadni učinak. Rezervirajte EM jedinice za razmake koji trebaju skalirati s lokalnom veličinom fonta.

Pogreška 3: Pretvaranje širina obruba u REM

Problem: Pretvarate border: 1px u border: 0.0625rem radi konzistentnosti. Kada korisnici zumiraju ili mijenjaju veličinu fonta, vaši obrubi postaju debeli i ružni.

Rješenje: Zadržite obrube u pikselima. Podobrubi (0.5px) imaju nekonzistentnu podršku preglednika, a obrubi rijetko trebaju skalirati s tekstom.

Pogreška 4: Zaboravljanje da medijske upite referiraju korisničke postavke

Problem: Pišete @media (min-width: 768px) za tablet prijelomnu točku. Korisnici koji postave veću zadanu veličinu fonta ne dobivaju izgled tableta kada bi trebali.

Rješenje: Koristite EM ili REM jedinice u medijskim upitima: @media (min-width: 48em). Ovo poštuje korisničke postavke fonta, kao što preporučuje MDN dokumentacija o responzivnom dizajnu.

Pogreška 5: Miješanje metoda izračuna

Problem: Vaš Sass koristi jednu metodu izračuna, JavaScript drugu, a vaše mentalno računanje treću. Rezultati se ne podudaraju, uzrokujući frustraciju oko piksela.

Rješenje: Koristite ovaj pretvarač kao izvor istine. Spremite ga u bookmarks, pozivajte se na njega tijekom pregleda koda i osigurajte da svi u vašem timu koriste istu metodologiju pretvaranja.

Često postavljana pitanja

Koja je razlika između REM i EM jedinica?

Referentna točka se potpuno razlikuje. REM jedinice uvijek gledaju veličinu fonta korijenskog <html> elementa — bez obzira koliko je element ugniježđen, 1rem uvijek predstavlja istu izračunatu vrijednost. EM jedinice gledaju veličinu fonta njihovog izravnog roditeljskog elementa, što stvara kaskadni učinak.

Razmislite ovako: ako ugnijezdite tri <div> elementa, svaki s font-size: 1.2em, tekst unutarnjeg diva bit će znatno veći nego što ste očekivali jer se svaka razina množi. S font-size: 1.2rem na svakoj razini, sva tri diva imaju identičnu veličinu fonta jer svi referiraju na korijen.

Upravo zbog toga su REM jedinice postale popularne za tipografiju kada se podrška preglednika poboljšala — eliminiraju mentalni napor praćenja lanaca naslijeđivanja.

Koja CSS jedinica je najbolja za responzivni web dizajn?

Nijedna jedinica ne pobjeđuje u svakoj situaciji. Najbolji responzivni dizajni kombiniraju jedinice strateški:

Koristite REM za: Globalne razmake, ljestvice tipografije, razmake komponenata i bilo koje mjerenje koje treba skalirati prema korisničkim postavkama fonta

Koristite EM za: Unutarnje razmake komponenata (padding gumba, razmake kartica), medijske upite (poštuju korisničke preference) i elemente koji trebaju skalirati prema lokalnom kontekstu

Koristite piksele za: 1px rubove (izgledaju oštrije), sjene okvira (suptilne sjene zahtijevaju preciznost), širine SVG obruba

Koristite postotke ili viewport jedinice za: Širine kontejnera, sekcije pune visine

Vidio sam baze koda koje pokušavaju koristiti jedinstvenu jedinicu svugdje — uvijek stvaraju probleme održavanja. Koristite svaku jedinicu tamo gdje pruža najveću korist.

[Prijevod se nastavlja...]

Reference i daljnje čitanje

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

  2. Marcotte, Ethan. "Responsive Web Design." A List Apart, 25. svibnja 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 jedinice." MDN Web Dokumentacija. https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units

  5. "CSS pikseli vs. fizički pikseli." Stack Overflow Dokumentacija. https://stackoverflow.com/questions/8785643/what-exactly-is-the-difference-between-css-pixels-and-device-pixels

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

  7. "Korištenje CSS prilagođenih svojstava (varijabli)." MDN Web Dokumentacija. https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties

  8. "Razumijevanje i korištenje rem jedinica u CSS-u." SitePoint. https://www.sitepoint.com/understanding-and-using-rem-units-in-css/

Počnite precizno pretvarati CSS jedinice

Ručno pretvaranje CSS jedinica dosadno je i sklono pogreškama. Radite mentalne matematičke operacije, sumnjate u izračune i nadate se da ste dobro postavili veličine fonta. Ovaj PX u REM u EM pretvarač uklanja tu trenje.

Unesite svoje piksel vrijednosti iz dizajnerskih datoteka, prilagodite veličine fonta kako biste odgovarali konfiguraciji vašeg projekta i trenutno dobijte točne REM i EM vrijednosti. Izravno ih kopirajte u svoj kod. Bez obzira radite li na novom dizajn sustavu, prilagođavate postojeći kod relativnim jedinicama ili samo pokušavate razumjeti kako se ove jedinice odnose, pretvarač obavlja matematiku tako da se vi možete fokusirati na izgradnju.

Za developere koji rade na web stranicama sukladnima pristupačnosti, ovaj alat pomaže osigurati da se vaši izgledi pravilno skaliraju kada korisnici prilagode svoje postavke fonta — zahtjev prema WCAG 2.1 razini AA. Za one koji izrađuju knjižnice komponenata, on razjašnjava koje EM vrijednosti stvaraju željene proporcije. Za bilo koga tko prevodi Figma dizajne u produkcijski CSS, znatno ubrzava workflow pretvaranja.

Formule su temeljene na W3C CSS Values and Units Module specifikaciji, čime se osigurava da pretvaranja odgovaraju načinu na koji preglednici zapravo izračunavaju ove vrijednosti.