Pārveidojiet starp pikseļiem (PX), saknes em (REM) un em (EM) CSS vienībām ar šo vienkāršo kalkulatoru. Nepieciešams responsīvai tīmekļa dizainam un izstrādei.
Pārveidojiet starp pikseļiem (PX), saknes em (REM) un em (EM) vienībām. Ievadiet vērtību jebkurā laukā, lai redzētu ekvivalentās vērtības citās vienībās.
Izpratne un pārveidošana starp CSS vienībām ir būtiska, lai nodrošinātu atsaucīgu tīmekļa dizainu un izstrādi. PX (pikselis), REM (saknes em) un EM vienības ir pamata būvelementi, kas nosaka, kā elementi tiek izmēri un novietoti dažādās ierīcēs un ekrāna izmēros. Šis visaptverošais vienību pārveidotāja rīks ļauj jums viegli tulkot vērtības starp šīm trim kritiskajām CSS vienībām, palīdzot jums izveidot elastīgākus un vieglāk uzturamus tīmekļa izkārtojumus.
Pikseļi (PX) ir fiksēta izmēra vienības, kas nodrošina precīzu kontroli, bet trūkst mērogojamības, kamēr REM vienības mērogojas attiecībā pret saknes elementa fonta izmēru, un EM vienības mērogojas attiecībā pret to vecāku elementa fonta izmēru. Pārveidošana starp šīm vienībām var būt sarežģīta, īpaši, strādājot ar sarežģītiem dizainiem vai atbalstot piekļuves funkcijas, piemēram, teksta palielināšanu. Mūsu PX, REM un EM pārveidotājs vienkāršo šo procesu, ļaujot jums koncentrēties uz skaistu, atsaucīgu dizainu veidošanu.
Pikseļi (PX) ir visvienkāršākā un visbiežāk izmantotā CSS vienība. Pikselis ir viens punkts digitālajā attēlu režģī un pārstāv mazāko kontrolējamo elementu uz ekrāna. CSS pikseļi nodrošina fiksēta izmēra mērījumu, kas paliek nemainīgs neatkarīgi no citiem stila faktoriem.
1.element {
2 width: 200px;
3 font-size: 16px;
4 margin: 10px;
5}
6
Galvenās pikseļu iezīmes:
REM (saknes em) vienības ir relatīvās vienības, kas skalojas, pamatojoties uz saknes elementa fonta izmēru (parasti <html>
elements). Noklusējuma iestatījumā lielākajā daļā pārlūkprogrammu saknes fonta izmērs ir 16px, padarot 1rem vienādu ar 16px, ja tas nav skaidri mainīts.
1html {
2 font-size: 16px; /* Noklusējums lielākajā daļā pārlūkprogrammu */
3}
4
5.element {
6 width: 12.5rem; /* Atbilst 200px ar noklusējuma saknes fonta izmēru */
7 font-size: 1rem; /* Atbilst 16px */
8 margin: 0.625rem; /* Atbilst 10px */
9}
10
Galvenās REM vienību iezīmes:
EM vienības ir relatīvās vienības, kas skalojas, pamatojoties uz to vecāku elementa fonta izmēru. Ja vecāku fonta izmērs nav noteikts, EM atsaucas uz mantojošo fonta izmēru.
1.parent {
2 font-size: 20px;
3}
4
5.child {
6 font-size: 0.8em; /* Atbilst 16px (20px × 0.8) */
7 margin: 0.5em; /* Atbilst 8px (16px × 0.5) */
8}
9
Galvenās EM vienību iezīmes:
Izpratne par matemātiskajām attiecībām starp PX, REM un EM vienībām ir būtiska precīzai pārveidošanai. Šeit ir formulas, kas izmantotas mūsu pārveidotājā:
Lai pārveidotu pikseļus uz REM vienībām, daliet pikseļu vērtību ar saknes fonta izmēru:
Piemēram, ar noklusējuma saknes fonta izmēru 16px:
Lai pārveidotu pikseļus uz EM vienībām, daliet pikseļu vērtību ar vecāku elementa fonta izmēru:
Piemēram, ar vecāku fonta izmēru 16px:
Lai pārveidotu REM vienības uz pikseļiem, reiziniet REM vērtību ar saknes fonta izmēru:
Piemēram, ar noklusējuma saknes fonta izmēru 16px:
Lai pārveidotu EM vienības uz pikseļiem, reiziniet EM vērtību ar vecāku elementa fonta izmēru:
Piemēram, ar vecāku fonta izmēru 16px:
Lai pārveidotu REM vienības uz EM vienībām, jums jāņem vērā gan saknes fonta izmērs, gan vecāku elementa fonta izmērs:
Ja gan saknes, gan vecāku fonta izmēri ir vienādi (piemēram, 16px), tad 1rem = 1em.
Lai pārveidotu EM vienības uz REM vienībām, izmantojiet šādu formulu:
Atkal, ja abi fonta izmēri ir vienādi, tad 1em = 1rem.
Mūsu vienību pārveidotāja rīks padara vieglu vērtību tulkošanu starp PX, REM un EM vienībām. Šeit ir soli pa solim ceļvedis, kā efektīvi izmantot pārveidotāju:
<html>
fonta izmēra vērtībaiIzpratne par to, kad izmantot katru CSS vienību un kā pārveidot starp tām, ir būtiska efektīvai tīmekļa izstrādei. Šeit ir daži praktiski pielietojumi un scenāriji, kur mūsu vienību pārveidotājs ir nenovērtējams:
Pārveidošana starp vienībām ir būtiska, lai izveidotu patiesi atsaucīgus dizainus:
1/* Pārveidojiet fiksētās pikseļu vērtības uz atsaucīgām REM vienībām */
2.container {
3 /* No: padding: 20px; */
4 padding: 1.25rem; /* 20px ÷ 16px = 1.25rem */
5
6 /* No: margin-bottom: 32px; */
7 margin-bottom: 2rem; /* 32px ÷ 16px = 2rem */
8}
9
Relatīvo vienību izmantošana uzlabo piekļuvi, ievērojot lietotāju preferences:
Mūsdienu dizaina sistēmas gūst labumu no pārdomātas vienību izmantošanas:
Skaistu tipogrāfiju izveidošanai ir nepieciešama rūpīga vienību izvēle:
1/* Tipogrāfijas sistēma, izmantojot REM vienības */
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
Kad īstenojat dizainus no rīkiem, piemēram, Figma vai Photoshop:
Lai gan PX, REM un EM ir visizplatītākās vienības, ir vērts apsvērt alternatīvas:
CSS vienību vēsture atspoguļo plašāku tīmekļa dizaina attīstību, sākot no statiskiem izkārtojumiem līdz mūsdienu atsaucīgajiem, pieejamajiem pieejas risinājumiem.
CSS agrīnajos posmos pikseļi valdīja. Tīmekļa dizaineri veidoja fiksēta platuma izkārtojumus, parasti 640px vai 800px platus, lai pielāgotos izplatītajiem ekrāna izšķirtspējām. Piekļuve un ierīču dažādība nebija galvenās bažas, un pikseļu precizitāte bija galvenais mērķis.
Kad ekrāna izmēri dažādās ierīcēs sāka atšķirties, procentu bāzēti izkārtojumi ieguva popularitāti. Dizaineri sāka veidot elastīgākus dizainus, lai gan tipogrāfija bieži palika pikseļu vienībās. Šajā laikā CSS tika ieviestas EM vienības, taču to pieņemšana bija ierobežota sakarā ar sarežģītību, pārvaldot kaskādiskos fonta izmērus.
iPhone ieviešana 2007. gadā mainīja tīmekļa dizainu. Pēkšņi tīmekļa vietnes bija jādarbojas uz ekrāniem, kas bija tik mazi kā 320px plati. Tas veicināja interesi par atsaucīgu dizaina tehniku un relatīvām vienībām. EM vienību ierobežojumi (īpaši kaskādiskā efekta dēļ) kļuva acīmredzami, kad dizaini kļuva sarežģītāki.
Eitans Mārkots ietekmīgajā rakstā par atsaucīgu tīmekļa dizainu 2010. gadā mainīja, kā izstrādātāji pievēršas CSS vienībām. REM vienība tika ieviesta CSS3, piedāvājot relatīvā mērogošana priekšrocības bez EM vienību kaskādiskajām komplikācijām. Pārlūkprogrammu atbalsts REM vienībām pieauga pakāpeniski šajā periodā.
Mūsdienu tīmekļa izstrāde pieņem vienību kombināciju dažādiem mērķiem:
Šī attīstība atspoguļo tīmekļa pāreju no dokumentu bāzēta medija uz sarežģītu lietojumprogrammu platformu, kas jādarbojas visdažādākajās ierīcēs un kontekstos.
1// Pārveidošana starp PX, REM un EM vienībām
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// Piemēra izmantošana
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 /* Pamata fonta izmēri */
3 --root-font-size: 16px;
4 --base-font-size: var(--root-font-size);
5
6 /* Bieži pikseļu vērtības, kas pārveidotas uz 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 /* Tipogrāfijas 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/* Lietošanas piemērs */
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 funkcijas vienību pārveidošanai
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// Lietošanas piemērs
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 // Izmantojot vecāku fonta izmēru (18px) EM pārveidošanai
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 """Pārveido pikseļus uz REM vienībām"""
3 return px / root_font_size
4
5def rem_to_px(rem, root_font_size=16):
6 """Pārveido REM vienības uz pikseļiem"""
7 return rem * root_font_size
8
9def px_to_em(px, parent_font_size=16):
10 """Pārveido pikseļus uz EM vienībām"""
11 return px / parent_font_size
12
13def em_to_px(em, parent_font_size=16):
14 """Pārveido EM vienības uz pikseļiem"""
15 return em * parent_font_size
16
17# Piemēra izmantošana
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 (saknes em) vienības ir relatīvas pret saknes elementa fonta izmēru (parasti <html>
elements), kamēr EM vienības ir relatīvas pret to vecāku elementa fonta izmēru. Šī galvenā atšķirība nozīmē, ka REM vienības saglabā konsekventu izmēru visā jūsu dokumentā neatkarīgi no ieliktas, kamēr EM vienības var radīt kumulatīvu efektu, kad elementi ir ieliktas.
Nav vienas "labākās" vienības visām situācijām. Parasti visefektīvākā ir vienību kombinācija:
Ideāls risinājums ir izmantot katru vienību tā, kas tai vislabāk der, veidojot saskaņotu sistēmu.
16px noklusējums tika noteikts kā lasāmības standarts, kas labi darbojas uz ekrāniem. Pētījumi ir parādījuši, ka teksts apmēram 16px ir optimāls lasīšanai uz ekrāniem tipiskos skatīšanās attālumos. Šis noklusējums arī nodrošina labu pamatu piekļuvei, nodrošinot, ka teksts nav pārāk mazs lielākajai daļai lietotāju.
Jā, CSS atbalsta negatīvās vērtības daudziem īpašību veidiem, izmantojot jebkura veida vienības. Negatīvas margas, pārvietojumi un pozīcijas ir bieži lietojami gadījumi negatīvajām vērtībām. Mūsu pārveidotājs pareizi apstrādā negatīvās vērtības visām vienību veidiem.
EM vienības kumulējas, kad elementi ir ieliktas. Piemēram:
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 kumulējošais efekts var būt noderīgs, lai radītu proporcionālus dizainus, taču tas prasa rūpīgu pārvaldību, lai izvairītos no neparedzētām mērogošanām.
Augstas DPI displeji tiek automātiski apstrādāti, izmantojot relatīvās vienības, piemēram, REM un EM. Tā kā šīs vienības balstās uz fonta izmēru, nevis fiziskajiem pikseļiem, tās skalojas atbilstoši augstas izšķirtspējas ekrāniem. Attēliem un robežām apsveriet iespēju izmantot mediju vaicājumus ar ierīces pikseļu attiecību vai izšķirtspēju.
Pārlūkprogrammu atbalsts REM un EM vienībām mediju vaicājumos ir ievērojami uzlabojies. EM vienību izmantošana mediju vaicājumos parasti ir ieteicama, jo:
1/* EM vienību izmantošana mediju vaicājumos */
2@media (min-width: 48em) { /* 768px ar 16px bāzi */
3 /* Planšetdatora stili */
4}
5
6@media (min-width: 64em) { /* 1024px ar 16px bāzi */
7 /* Datoru stili */
8}
9
Lielākā daļa dizaina rīku darbojas galvenokārt ar pikseļiem. Kad īstenojat dizainus:
Dažiem dizaina rīkiem ir paplašinājumi, kas var palīdzēt ar šo pārveidošanas procesu automātiski.
Pārlūkprogrammas apstrādā subpikseļu vērtības atšķirīgi. Dažas pārlūkprogrammas noapaļo līdz tuvākajam pikselim, kamēr citas atbalsta subpikseļu attēlošanu, lai nodrošinātu gludāku mērogošanu. Tas var radīt nelielas nesakritības starp pārlūkprogrammām, īpaši ar mazām REM/EM vērtībām vai kad izmanto pārvietojumus. Lielākajā daļā gadījumu šīs atšķirības ir nenozīmīgas.
Nav būtiskas veiktspējas atšķirības starp pikseļu, REM vai EM vienību izmantošanu mūsdienu pārlūkprogrammās. Vienību izvēle jābalsta uz dizaina prasībām, atsaucības uzvedību un piekļuves vajadzībām, nevis uz veiktspējas apsvērumiem.
"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, May 25, 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/
Pārtrauciet cīnīties ar manuālām CSS vienību pārveidošanām un ļaujiet mūsu PX, REM un EM vienību pārveidotājam paveikt darbu jūsu vietā. Neatkarīgi no tā, vai veidojat atsaucīgu tīmekļa vietni, izveidojat dizaina sistēmu vai vienkārši mācāties par CSS vienībām, šis rīks ietaupīs jums laiku un nodrošinās precizitāti. Ievadiet savas vērtības tagad, lai redzētu, cik viegli var būt vienību pārveidošana!
Atklājiet vairāk rīku, kas varētu būt noderīgi jūsu darbplūsmai