Pretvorite između piksela (PX), root em (REM) i em (EM) CSS jedinica s ovim jednostavnim kalkulatorom. Neophodno za responzivni web dizajn i razvoj.
Pretvorite između piksela (PX), root em (REM) i em (EM) jedinica. Unesite vrijednost u bilo kojem polju da biste vidjeli ekvivalentne vrijednosti u drugim jedinicama.
Razumijevanje i konvertiranje između CSS jedinica je ključno za responzivni web dizajn i razvoj. PX (piksel), REM (root em) i EM jedinice su osnovni građevni blokovi koji određuju kako su elementi veličinski i pozicionirani na različitim uređajima i veličinama ekrana. Ovaj sveobuhvatni alat za konverziju jedinica omogućava vam da lako prevodite vrijednosti između ove tri kritične CSS jedinice, pomažući vam da kreirate fleksibilnije i održivije web rasporede.
Pikseli (PX) su fiksne veličine jedinice koje pružaju preciznu kontrolu, ali im nedostaje skalabilnost, dok se REM jedinice skaliraju u odnosu na veličinu fonta korijenskog elementa, a EM jedinice se skaliraju u odnosu na veličinu fonta svog roditeljskog elementa. Konvertiranje između ovih jedinica može biti izazovno, posebno kada radite s kompleksnim dizajnima ili kada podržavate pristupačne funkcije poput promjene veličine teksta. Naš PX, REM i EM konverter pojednostavljuje ovaj proces, omogućavajući vam da se fokusirate na kreiranje prekrasnih, responzivnih dizajna.
Pikseli (PX) su najosnovnija i najčešće korištena CSS jedinica. Piksel je jedna tačka u mreži digitalne slike i predstavlja najmanji kontrolisani element na ekranu. U CSS-u, pikseli pružaju fiksnu veličinu mjere koja ostaje dosljedna bez obzira na druge stilizacijske faktore.
1.element {
2 width: 200px;
3 font-size: 16px;
4 margin: 10px;
5}
6
Ključne karakteristike piksela:
REM (root em) jedinice su relativne jedinice koje se skaliraju na osnovu veličine fonta korijenskog elementa (obično <html>
element). Po defaultu, većina pregledača postavlja veličinu fonta korijena na 16px, čineći 1rem jednakim 16px osim ako nije izričito promijenjeno.
1html {
2 font-size: 16px; /* Default u većini pregledača */
3}
4
5.element {
6 width: 12.5rem; /* Ekvivalentno 200px sa defaultnom veličinom fonta korijena */
7 font-size: 1rem; /* Ekvivalentno 16px */
8 margin: 0.625rem; /* Ekvivalentno 10px */
9}
10
Ključne karakteristike REM jedinica:
EM jedinice su relativne jedinice koje se skaliraju na osnovu veličine fonta svog roditeljskog elementa. Ako nije specificirana veličina fonta za roditelja, EM će referencirati naslijeđenu veličinu fonta.
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
Ključne karakteristike EM jedinica:
Razumijevanje matematičkih odnosa između PX, REM i EM jedinica je ključno za tačne konverzije. Evo formula koje se koriste u našem konverteru:
Da biste konvertovali piksele u REM jedinice, podijelite vrijednost u pikselima sa veličinom fonta korijena:
Na primjer, sa defaultnom veličinom fonta korijena od 16px:
Da biste konvertovali piksele u EM jedinice, podijelite vrijednost u pikselima sa veličinom fonta roditeljskog elementa:
Na primjer, sa veličinom fonta roditelja od 16px:
Da biste konvertovali REM jedinice u piksele, pomnožite vrijednost REM sa veličinom fonta korijena:
Na primjer, sa defaultnom veličinom fonta korijena od 16px:
Da biste konvertovali EM jedinice u piksele, pomnožite vrijednost EM sa veličinom fonta roditeljskog elementa:
Na primjer, sa veličinom fonta roditelja od 16px:
Da biste konvertovali REM jedinice u EM jedinice, trebate uzeti u obzir i veličinu fonta korijena i veličinu fonta roditeljskog elementa:
Ako su veličine fonta korijena i roditelja jednake (npr. 16px), tada 1rem = 1em.
Da biste konvertovali EM jedinice u REM jedinice, koristite sljedeću formulu:
Ponovo, ako su obje veličine fonta jednake, tada 1em = 1rem.
Naš alat za konverziju jedinica olakšava prevod vrijednosti između PX, REM i EM jedinica. Evo korak-po-korak vodiča za efikasno korištenje konvertera:
<html>
Razumijevanje kada koristiti svaku CSS jedinicu i kako konvertovati između njih je ključno za efikasan web razvoj. Evo nekoliko praktičnih aplikacija i scenarija gdje naš konverter pokazuje svoju neprocjenjivu vrijednost:
Konvertiranje između jedinica je ključno za kreiranje zaista responzivnih dizajna:
1/* Konvertujte fiksne piksel vrijednosti u responzivne REM jedinice */
2.container {
3 /* Od: padding: 20px; */
4 padding: 1.25rem; /* 20px ÷ 16px = 1.25rem */
5
6 /* Od: margin-bottom: 32px; */
7 margin-bottom: 2rem; /* 32px ÷ 16px = 2rem */
8}
9
Korištenje relativnih jedinica poboljšava pristupačnost poštujući korisničke preferencije:
Moderni dizajni sistemi koriste promišljeno korištenje jedinica:
Kreiranje harmonične tipografije zahtijeva pažljivo odabiranje jedinica:
1/* Tipografski sistem koristeći REM jedinice */
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
Kada implementirate dizajne iz alata poput Figma ili Photoshopa:
Dok su PX, REM i EM najčešće jedinice, postoje i alternativne jedinice koje vrijedi razmotriti:
Istorija CSS jedinica odražava širu evoluciju web dizajna, od statičnih rasporeda do današnjih responzivnih, pristupačnih pristupa.
U ranim danima CSS-a, pikseli su vladali. Web dizajneri su kreirali fiksne širine rasporeda, obično 640px ili 800px široke, kako bi se prilagodili uobičajenim rezolucijama ekrana. Pristupačnost i raznolikost uređaja nisu bili veliki problemi, a kontrola savršenih piksela bila je primarni cilj.
Kako su se veličine ekrana diverzificirale, rasporedi zasnovani na procentima postali su popularni. Dizajneri su počeli kreirati fleksibilnije dizajne, iako je tipografija često ostala u piksel jedinicama. Ova era je vidjela uvođenje EM jedinica u CSS, iako je njihova upotreba bila ograničena zbog kompleksnosti upravljanja kaskadnim veličinama fonta.
Uvođenje iPhone-a 2007. godine transformisalo je web dizajn. Odjednom, web stranice su trebale raditi na ekranima malim kao 320px širokim. Ovo je pokrenulo interes za responzivne dizajnerske tehnike i relativne jedinice. Ograničenja EM jedinica (posebno kaskadni efekat) postala su očiglednija dok su dizajni postajali kompleksniji.
Uticajni članak Ethana Marcottea o responzivnom web dizajnu iz 2010. godine promenio je način na koji su programeri pristupali CSS jedinicama. REM jedinica je uvedena u CSS3, nudeći prednosti relativnog skaliranja bez kaskadnih komplikacija EM jedinica. Podrška pregledača za REM jedinice je postepeno rasla tokom ovog perioda.
Danas web razvoj prihvata miks jedinica za različite svrhe:
Ova evolucija odražava tranziciju weba od dokument-baziranog medija do kompleksne aplikacijske platforme koja mora raditi na bezbroj uređaja i konteksta.
1// Konvertujte 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 korištenja
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
1:root {
2 /* Osnovne veličine fonta */
3 --root-font-size: 16px;
4 --base-font-size: var(--root-font-size);
5
6 /* Uobičajene piksel vrijednosti konvertovane 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 /* Tipografska skala */
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 korištenja */
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
1// SCSS funkcije za konverziju 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 korištenja
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 // Koristeći veličinu fonta roditelja (18px) za EM konverziju
22 padding: px-to-em(16, 18);
23 margin-bottom: px-to-em(24, 18);
24 }
25}
26
1def px_to_rem(px, root_font_size=16):
2 """Konvertujte piksele u REM jedinice"""
3 return px / root_font_size
4
5def rem_to_px(rem, root_font_size=16):
6 """Konvertujte REM jedinice u piksele"""
7 return rem * root_font_size
8
9def px_to_em(px, parent_font_size=16):
10 """Konvertujte piksele u EM jedinice"""
11 return px / parent_font_size
12
13def em_to_px(em, parent_font_size=16):
14 """Konvertujte EM jedinice u piksele"""
15 return em * parent_font_size
16
17# Primjer korištenja
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
REM (root em) jedinice su relativne prema veličini fonta korijena (obično <html>
element), dok su EM jedinice relativne prema veličini fonta svog roditeljskog elementa. Ova ključna razlika znači da REM jedinice održavaju dosljedno veličanje kroz vaš dokument bez obzira na ugniježdenost, dok EM jedinice mogu stvoriti efekat kumulacije kada su elementi ugniježdeni.
Ne postoji jedinstvena "najbolja" jedinica za sve situacije. Kombinacija jedinica je obično najefikasnija:
Idealni pristup je koristiti svaku jedinicu za ono što najbolje radi unutar kohezivnog sistema.
Podrazumijevani 16px je uspostavljen kao standard čitljivosti koji dobro funkcioniše na ekranima. Istraživanja su pokazala da je tekst oko 16px optimalan za čitanje na ekranima na tipičnim udaljenostima gledanja. Ovaj default također pruža dobru osnovu za pristupačnost, osiguravajući da tekst nije previše mali za većinu korisnika.
Da, CSS podržava negativne vrijednosti za mnoga svojstva koristeći bilo koju vrstu jedinice. Negativne margine, transformacije i pozicije su uobičajene upotrebe za negativne vrijednosti. Naš konverter ispravno obrađuje negativne vrijednosti za sve tipove jedinica.
EM jedinice se kumuliraju kada su elementi ugniježdeni. Na primjer:
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
Ovaj kumulativni efekat može biti koristan za stvaranje proporcionalnih dizajna, ali zahtijeva pažljivo upravljanje kako bi se izbjeglo nepredviđeno skaliranje.
Visoke DPI prikaze se automatski obrađuju kada koristite relativne jedinice poput REM i EM. Budući da su ove jedinice zasnovane na veličini fonta, a ne fizičkim pikselima, skaliraju se odgovarajuće na visoko-rezolutnim ekranima. Za slike i ivice, razmotrite korištenje medijskih upita s omjerom piksela uređaja ili rezolucijom.
Podrška pregledača za REM i EM jedinice u medijskim upitima se značajno poboljšala. Korištenje EM jedinica u medijskim upitima se obično preporučuje jer:
1/* Korištenje EM jedinica za medijske upite */
2@media (min-width: 48em) { /* 768px sa 16px osnovom */
3 /* Stilovi za tablete */
4}
5
6@media (min-width: 64em) { /* 1024px sa 16px osnovom */
7 /* Stilovi za desktop */
8}
9
Većina dizajnerskih alata radi prvenstveno s pikselima. Kada implementirate dizajne:
Neki dizajnerski alati imaju dodatke koji mogu pomoći u ovom procesu konverzije automatski.
Pregledači obrađuju subpikselne vrijednosti različito. Neki pregledači zaokružuju na najbliži piksel, dok drugi podržavaju subpikselno renderiranje za glađe skaliranje. Ovo može povremeno uzrokovati sitne nedosljednosti između pregledača, posebno s malim REM/EM vrijednostima ili kada se koriste transformacije. Za većinu upotreba, ove razlike su zanemarive.
Ne postoji značajna razlika u performansama između korištenja piksela, REM ili EM jedinica u modernim pregledačima. Izbor jedinica trebao bi biti zasnovan na dizajnerskim zahtjevima, responzivnom ponašanju i potrebama pristupačnosti, a ne na razmatranjima performansi.
"CSS Values and Units Module Level 3." W3C Recommendation. https://www.w3.org/TR/css-values-3/
Marcotte, Ethan. "Responsive Web Design." A List Apart, 25. maja 2010. https://alistapart.com/article/responsive-web-design/
Rutter, Richard. "The Elements of Typographic Style Applied to the Web." http://webtypography.net/
"CSS Units." MDN Web Docs. https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units
"CSS Pixels vs. Physical Pixels." Stack Overflow Documentation. https://stackoverflow.com/questions/8785643/what-exactly-is-the-difference-between-css-pixels-and-device-pixels
Coyier, Chris. "The Lengths of CSS." CSS-Tricks. https://css-tricks.com/the-lengths-of-css/
"Using CSS custom properties (variables)." MDN Web Docs. https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties
"Understanding and Using rem Units in CSS." SitePoint. https://www.sitepoint.com/understanding-and-using-rem-units-in-css/
Prestanite se boriti s ručnim konverzijama CSS jedinica i neka naš PX, REM i EM Konverter jedinica obavi posao umjesto vas. Bilo da gradite responzivnu web stranicu, kreirate dizajn sistem ili samo učite o CSS jedinicama, ovaj alat će vam uštedjeti vrijeme i osigurati tačnost. Unesite svoje vrijednosti sada da vidite koliko je lako konvertovati jedinice!
Otkrijte više alata koji bi mogli biti korisni za vaš radni proces