Paverskite pikselius (PX), šaknies em (REM) ir em (EM) CSS vienetus su šia paprasta skaičiuokle. Būtina atsakingam tinklalapių dizainui ir kūrimui.
Konvertuokite tarp pikselių (PX), šaknies em (REM) ir em (EM) vienetų. Įveskite vertę bet kuriame lauke, kad pamatytumėte atitinkamas vertes kituose vienetuose.
Suprasti ir konvertuoti CSS vienetus yra būtina, norint sukurti reaguojančius svetainių dizainus ir plėtrą. PX (pikselis), REM (šakninė em) ir EM vienetai yra pagrindiniai elementai, kurie nustato, kaip elementai yra dydžio ir pozicionuojami įvairiuose įrenginiuose ir ekrano dydžiuose. Šis išsamus vienetų konverterio įrankis leidžia jums lengvai versti reikšmes tarp šių trijų svarbių CSS vienetų, padedant sukurti lankstesnius ir lengviau prižiūrimus svetainių išdėstymus.
Pikseliai (PX) yra fiksuoto dydžio vienetai, kurie suteikia tikslų valdymą, tačiau trūksta skalavimo, tuo tarpu REM vienetai skalė priklauso nuo šakninio elemento šrifto dydžio, o EM vienetai skalė priklauso nuo jų tėvų elemento šrifto dydžio. Konvertuoti tarp šių vienetų gali būti sudėtinga, ypač dirbant su sudėtingais dizainais arba palaikant prieinamumo funkcijas, tokias kaip teksto dydžio keitimas. Mūsų PX, REM ir EM konverteris supaprastina šį procesą, leidžiant jums sutelkti dėmesį į gražių, reaguojančių dizainų kūrimą.
Pikseliai (PX) yra pagrindinis ir dažniausiai naudojamas CSS vienetas. Pikselis yra vienas taškas skaitmeniniame vaizdo tinkle ir atstovauja mažiausią valdomą elementą ekrane. CSS pikseliai suteikia fiksuoto dydžio matavimo vienetą, kuris išlieka nuoseklus, nepriklausomai nuo kitų stiliaus veiksnių.
1.element {
2 width: 200px;
3 font-size: 16px;
4 margin: 10px;
5}
6Pikselių pagrindinės savybės:
REM (šakninė em) vienetai yra santykiniai vienetai, kurie skalė priklauso nuo šakninio elemento šrifto dydžio (paprastai <html> elemento). Pagal numatytuosius nustatymus dauguma naršyklių nustato šakninio šrifto dydį 16px, todėl 1rem lygu 16px, nebent aiškiai pakeista.
1html {
2 font-size: 16px; /* Numatytoji daugumoje naršyklių */
3}
4
5.element {
6 width: 12.5rem; /* Atitinka 200px su numatytuoju šakninio šrifto dydžiu */
7 font-size: 1rem; /* Atitinka 16px */
8 margin: 0.625rem; /* Atitinka 10px */
9}
10REM vienetų pagrindinės savybės:
EM vienetai yra santykiniai vienetai, kurie skalė priklauso nuo jų tėvų elemento šrifto dydžio. Jei tėvui nenurodytas šrifto dydis, EM atsižvelgs į paveldėtą šrifto dydį.
1.parent {
2 font-size: 20px;
3}
4
5.child {
6 font-size: 0.8em; /* Atitinka 16px (20px × 0.8) */
7 margin: 0.5em; /* Atitinka 8px (16px × 0.5) */
8}
9EM vienetų pagrindinės savybės:
Suprasti matematinį ryšį tarp PX, REM ir EM vienetų yra svarbu tiksliai konvertuojant. Štai formulės, naudojamos mūsų konverteryje:
Norint konvertuoti pikselius į REM vienetus, padalinkite pikselių reikšmę iš šakninio šrifto dydžio:
Pavyzdžiui, su numatytuoju šakninio šrifto dydžiu 16px:
Norint konvertuoti pikselius į EM vienetus, padalinkite pikselių reikšmę iš tėvų elemento šrifto dydžio:
Pavyzdžiui, su tėvų šrifto dydžiu 16px:
Norint konvertuoti REM vienetus į pikselius, padauginkite REM reikšmę iš šakninio šrifto dydžio:
Pavyzdžiui, su numatytuoju šakninio šrifto dydžiu 16px:
Norint konvertuoti EM vienetus į pikselius, padauginkite EM reikšmę iš tėvų elemento šrifto dydžio:
Pavyzdžiui, su tėvų šrifto dydžiu 16px:
Norint konvertuoti REM vienetus į EM vienetus, reikia atsižvelgti tiek į šakninio šrifto dydį, tiek į tėvų elemento šrifto dydį:
Jei tiek šakniniai, tiek tėvų šrifto dydžiai yra vienodi (pvz., 16px), tada 1rem = 1em.
Norint konvertuoti EM vienetus į REM vienetus, naudokite šią formulę:
Dar kartą, jei abu šrifto dydžiai yra vienodi, tada 1em = 1rem.
Mūsų vienetų konverterio įrankis palengvina reikšmių vertimą tarp PX, REM ir EM vienetų. Štai žingsnis po žingsnio vadovas, kaip efektyviai naudoti konverterį:
<html> šrifto dydžio reikšmęSuprasti, kada naudoti kiekvieną CSS vienetą ir kaip konvertuoti tarp jų, yra svarbu efektyviai svetainių plėtrai. Štai keletas praktinių taikymo atvejų ir scenarijų, kur mūsų vienetų konverteris pasirodo neįkainojamas:
Konvertavimas tarp vienetų yra būtinas kuriant tikrai reaguojančius dizainus:
1/* Konvertuoti fiksuotas pikselių reikšmes į reaguojančius REM vienetus */
2.container {
3 /* Iš: padding: 20px; */
4 padding: 1.25rem; /* 20px ÷ 16px = 1.25rem */
5
6 /* Iš: margin-bottom: 32px; */
7 margin-bottom: 2rem; /* 32px ÷ 16px = 2rem */
8}
9Naudojant santykinius vienetus, pagerėja prieinamumas, gerbiant vartotojų pageidavimus:
Šiuolaikinės dizaino sistemos gauna naudos iš apgalvoto vienetų naudojimo:
Kuriant harmoningą tipografiją reikia atidžiai pasirinkti vienetus:
1/* Tipografijos sistema naudojant REM vienetus */
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Įgyvendinant dizainus iš tokių įrankių kaip Figma ar Photoshop:
Nors PX, REM ir EM yra dažniausiai naudojami vienetai, yra alternatyvų, kuriuos verta apsvarstyti:
CSS vienetų istorija atspindi platesnę svetainių dizaino evoliuciją, nuo statinių išdėstymų iki šiandieninių reaguojančių, prieinamų požiūrių.
CSS ankstyvose dienose pikseliai buvo dominuojantys. Svetainių dizaineriai kūrė fiksuoto pločio išdėstymus, paprastai 640px arba 800px pločio, kad atitiktų įprastus ekrano sprendimus. Prieinamumas ir įrenginių įvairovė nebuvo dideli rūpesčiai, o pikselių tikslumas buvo pagrindinis tikslas.
Kai ekrano dydžiai diversifikavosi, procentais pagrįsti išdėstymai tapo populiarūs. Dizaineriai pradėjo kurti lankstesnius dizainus, nors tipografija dažnai liko pikselių vienetuose. Šiame laikotarpyje CSS buvo įvesta EM vienetai, nors jų priėmimas buvo ribotas dėl sudėtingumo valdyti kaskadinius šrifto dydžius.
iPhone pristatymas 2007 metais transformavo svetainių dizainą. Staiga svetainės turėjo veikti ekranuose, kurių plotis buvo vos 320px. Tai paskatino susidomėjimą reaguojančiais dizaino metodais ir santykiniais vienetais. EM vienetų apribojimai (ypač kaskadinio efekto) tapo akivaizdūs, kai dizainai tapo sudėtingesni.
Ethan Marcotte įtakingas straipsnis apie reaguojantį svetainių dizainą 2010 metais pakeitė, kaip kūrėjai žiūrėjo į CSS vienetus. REM vienetas buvo pristatytas CSS3, siūlantis santykinių skalavimo privalumus be EM vienetų kaskadinių komplikacijų. Naršyklių palaikymas REM vienetams nuosekliai augo per šį laikotarpį.
Šiandieninė svetainių plėtra apima įvairių vienetų mišinį skirtingiems tikslams:
Ši evoliucija atspindi svetainės perėjimą nuo dokumentų pagrįsto medio iki sudėtingos programų platformos, kuri turi veikti per daugybę įrenginių ir kontekstų.
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// Pavyzdžio naudojimas
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
311:root {
2 /* Pagrindiniai šrifto dydžiai */
3 --root-font-size: 16px;
4 --base-font-size: var(--root-font-size);
5
6 /* Dažni 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}
341// SCSS funkcijos vienetų konversijai
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ėvų šrifto dydį (18px) EM konversijai
22 padding: px-to-em(16, 18);
23 margin-bottom: px-to-em(24, 18);
24 }
25}
261def 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# Pavyzdžio naudojimas
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
21REM (šakninė em) vienetai yra santykiniai šakninio elemento šrifto dydžiui (paprastai <html> elementui), tuo tarpu EM vienetai yra santykiniai jų tėvų elemento šrifto dydžiui. Šis pagrindinis skirtumas reiškia, kad REM vienetai išlaiko nuoseklų dydį visame dokumente, nepriklausomai nuo įdėjimo, tuo tarpu EM vienetai gali sukurti kaupimo efektą, kai elementai yra įdėti.
Nėra vieno "geriausio" vieneto visoms situacijoms. Paprastai efektyviausia yra naudoti įvairių vienetų derinį:
Idealiu atveju požiūris yra naudoti kiekvieną vienetą tam, kam jis geriausiai tinka nuosekliame sistemoje.
16px numatytasis dydis buvo nustatytas kaip skaitymo standartas, kuris gerai veikia įvairiuose įrenginiuose. Tyrimai parodė, kad tekstas, esantis apie 16px, yra optimalus skaitymui ekranuose, esant įprastam žiūrėjimo atstumui. Šis numatytasis dydis taip pat suteikia gerą pagrindą prieinamumui, užtikrinant, kad tekstas nebūtų per mažas daugumai vartotojų.
Taip, CSS palaiko neigiamas reikšmes daugeliui savybių naudojant bet kokio tipo vienetus. Neigiami atstumai, transformacijos ir pozicijos yra dažni neigiamų reikšmių naudojimo atvejai. Mūsų konverteris teisingai tvarko neigiamas reikšmes visiems vienetų tipams.
EM vienetai kaupiasi, kai elementai yra įdėti. Pavyzdžiui:
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 kaupimo efektas gali būti naudingas kuriant proporcingus dizainus, tačiau reikalauja atidžiai valdyti, kad būtų išvengta nenorimo skalavimo.
Naršyklės skirtingai tvarko subpikselių reikšmes. Kai kurios naršyklės suapvalina iki artimiausio pikselio, tuo tarpu kitos palaiko subpikselių atvaizdavimą, kad užtikrintų sklandesnį skalavimą. Tai kartais gali sukelti nedidelius nesutarimus tarp naršyklių, ypač su mažomis REM/EM reikšmėmis arba naudojant transformacijas. Daugeliu atvejų šie skirtumai yra nereikšmingi.
Nėra reikšmingo našumo skirtumo tarp pikselių, REM ar EM vienetų moderniose naršyklėse. Vienetų pasirinkimas turėtų būti pagrįstas dizaino reikalavimais, reaguojančiu elgesiu ir prieinamumo poreikiais, o ne našumo apsvarstymais.
"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/
Nustokite kovoti su rankinėmis CSS vienetų konversijomis ir leiskite mūsų PX, REM ir EM vienetų konverteriui atlikti darbą už jus. Nesvarbu, ar kuriate reaguojančią svetainę, ar kurdami dizaino sistemą, ar tik mokydamiesi apie CSS vienetus, šis įrankis sutaupys jums laiko ir užtikrins tikslumą. Įveskite savo reikšmes dabar, kad pamatytumėte, kaip lengva gali būti vienetų konversija!
Raskite daugiau įrankių, kurie gali būti naudingi jūsų darbo eiga.