Muunna pikseleitä (PX), juurta em (REM) ja em (EM) CSS-yksiköitä tämän yksinkertaisen laskurin avulla. Olennaista responsiivisessa verkkosuunnittelussa ja -kehityksessä.
Muunnat pikselien (PX), juurtemin (REM) ja em (EM) yksiköiden välillä. Syötä arvo mihin tahansa kenttään nähdäksesi vastaavat arvot muissa yksiköissä.
CSS-yksiköiden ymmärtäminen ja muuntaminen on olennaista responsiivisessa verkkosuunnittelussa ja -kehityksessä. PX (pikseli), REM (juurim) ja EM-yksiköt ovat peruspalikoita, jotka määrittävät, kuinka elementit koetaan ja sijoitetaan eri laitteilla ja näyttökokoilla. Tämä kattava yksikkömuunnin työkalu mahdollistaa arvojen helpon kääntämisen näiden kolmen tärkeän CSS-yksikön välillä, auttaen sinua luomaan joustavampia ja helpommin ylläpidettäviä verkkosivustoja.
Pikselit (PX) ovat kiinteän koon yksiköitä, jotka tarjoavat tarkkaa hallintaa mutta eivät skaalaudu, kun taas REM-yksiköt skaalaavat suhteessa juurielementin fonttikokoon ja EM-yksiköt suhteessa niiden vanhempien elementtien fonttikokoon. Muuntaminen näiden yksiköiden välillä voi olla haastavaa, erityisesti työskenneltäessä monimutkaisissa suunnitelmissa tai tuettaessa esteettömyysominaisuuksia, kuten tekstin koon muuttamista. PX, REM ja EM muunnin yksinkertaistaa tätä prosessia, jolloin voit keskittyä kauniiden, responsiivisten suunnitelmien luomiseen.
Pikselit (PX) ovat perus- ja yleisimmin käytetty CSS-yksikkö. Pikseli on yksi piste digitaalisessa kuvagrafiikassa ja edustaa pienintä hallittavaa elementtiä näytöllä. CSS:ssä pikselit tarjoavat kiinteän koon mittayksikön, joka pysyy johdonmukaisena riippumatta muista tyylitekijöistä.
1.element {
2 width: 200px;
3 font-size: 16px;
4 margin: 10px;
5}
6Pikselien keskeiset ominaisuudet:
REM (juurim) yksiköt ovat suhteellisia yksiköitä, jotka skaalaavat juurielementin fonttikoon (yleensä <html>-elementti). Oletuksena useimmat selaimet asettavat juurifonttikoon 16px, jolloin 1rem on yhtä kuin 16px, ellei sitä ole erikseen muutettu.
1html {
2 font-size: 16px; /* Oletus useimmissa selaimissa */
3}
4
5.element {
6 width: 12.5rem; /* Vastaa 200px oletusjuurifonttikoolla */
7 font-size: 1rem; /* Vastaa 16px */
8 margin: 0.625rem; /* Vastaa 10px */
9}
10REM-yksiköiden keskeiset ominaisuudet:
EM-yksiköt ovat suhteellisia yksiköitä, jotka skaalaavat suhteessa niiden vanhempien elementtien fonttikokoon. Jos vanhemmalle ei ole määritetty fonttikokoa, EM-yksiköt viittaavat perityn fonttikokoon.
1.parent {
2 font-size: 20px;
3}
4
5.child {
6 font-size: 0.8em; /* Vastaa 16px (20px × 0.8) */
7 margin: 0.5em; /* Vastaa 8px (16px × 0.5) */
8}
9EM-yksiköiden keskeiset ominaisuudet:
Ymmärtäminen matemaattisista suhteista PX, REM ja EM-yksiköiden välillä on ratkaisevan tärkeää tarkkojen muunnosten kannalta. Tässä ovat kaavat, joita käytetään muuntimessamme:
Muuntamiseksi pikselit REM-yksiköiksi, jaa pikseliarvo juurifonttikoolla:
Esimerkiksi oletusjuurifonttikoolla 16px:
Muuntamiseksi pikselit EM-yksiköiksi, jaa pikseliarvo vanhemman elementin fonttikoolla:
Esimerkiksi vanhemman fonttikoolla 16px:
Muuntamiseksi REM-yksiköt pikseleiksi, kerro REM-arvo juurifonttikoolla:
Esimerkiksi oletusjuurifonttikoolla 16px:
Muuntamiseksi EM-yksiköt pikseleiksi, kerro EM-arvo vanhemman elementin fonttikoolla:
Esimerkiksi vanhemman fonttikoolla 16px:
Muuntamiseksi REM-yksiköt EM-yksiköiksi, sinun on otettava huomioon sekä juurifonttikoko että vanhemman elementin fonttikoko:
Jos sekä juuri- että vanhempien fonttikoot ovat samat (esim. 16px), silloin 1rem = 1em.
Muuntamiseksi EM-yksiköt REM-yksiköiksi, käytä seuraavaa kaavaa:
Taaskin, jos molemmat fonttikoot ovat yhtä suuret, silloin 1em = 1rem.
Yksikkömuunnin työkalumme tekee arvojen kääntämisestä PX, REM ja EM-yksiköiden välillä helppoa. Tässä on vaiheittainen opas muuntimen tehokkaaseen käyttöön:
<html> fonttikoon arvoaYmmärtäminen, milloin käyttää kutakin CSS-yksikköä ja kuinka muuntaa niiden välillä, on ratkaisevaa tehokkaassa verkkokehityksessä. Tässä on joitakin käytännön sovelluksia ja skenaarioita, joissa yksikkömuunnin osoittautuu arvokkaaksi:
Yksiköiden muuntaminen on olennaista todella responsiivisten suunnitelmien luomiseksi:
1/* Muunna kiinteät pikseliarvot responsiivisiksi REM-yksiköiksi */
2.container {
3 /* Alkuperäisestä: padding: 20px; */
4 padding: 1.25rem; /* 20px ÷ 16px = 1.25rem */
5
6 /* Alkuperäisestä: margin-bottom: 32px; */
7 margin-bottom: 2rem; /* 32px ÷ 16px = 2rem */
8}
9Suhteellisten yksiköiden käyttö parantaa esteettömyyttä kunnioittamalla käyttäjien mieltymyksiä:
Modernit suunnittelujärjestelmät hyötyvät harkitusta yksiköiden käytöstä:
Harmonisen typografian luominen vaatii huolellista yksikkövalintaa:
1/* Typografiajärjestelmä, joka käyttää REM-yksiköitä */
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 */
8Kun toteutat suunnitelmia työkaluista kuten Figma tai Photoshop:
Vaikka PX, REM ja EM ovat yleisimmät yksiköt, on olemassa vaihtoehtoja, joita kannattaa harkita:
CSS-yksiköiden historia heijastaa laajempaa verkkosuunnittelun kehitystä, staattisista asetteluista nykypäivän responsiivisiin, esteettömiin lähestymistapoihin.
CSS:n varhaisina päivinä pikselit hallitsivat. Verkkosuunnittelijat loivat kiinteäleveysasetteluja, tyypillisesti 640px tai 800px leveitä, jotta ne mahtuisivat yleisiin näyttöresoluutioihin. Esteettömyys ja laitteiden monimuotoisuus eivät olleet suuria huolenaiheita, ja pikselitarkka hallinta oli ensisijainen tavoite.
Kun näyttökoot monimuotoistuivat, prosenttipohjaiset asettelut saivat suosiota. Suunnittelijat alkoivat luoda joustavampia suunnitelmia, vaikka typografia pysyi usein pikseliyksiköissä. Tänä aikana EM-yksiköiden käyttöönotto CSS:ssä tapahtui, vaikka niiden käyttöönotto oli rajallista johtuen kaskadien fonttikokojen hallinnan monimutkaisuudesta.
iPhonen lanseeraus vuonna 2007 muutti verkkosuunnittelua. Yhtäkkiä verkkosivustojen piti toimia niin pienillä näytöillä kuin 320px leveitä. Tämä katalysoi kiinnostusta responsiivisiin suunnittelutekniikoihin ja suhteellisiin yksiköihin. EM-yksiköiden rajoitukset (erityisesti kaskadivaikutus) tulivat ilmi, kun suunnitelmat monimutkaistuivat.
Ethan Marcotten vaikuttava artikkeli responsiivisesta verkkosuunnittelusta vuonna 2010 muutti kehittäjien lähestymistapaa CSS-yksiköihin. REM-yksikkö otettiin käyttöön CSS3:ssa, tarjoten suhteellisen skaalaamisen edut ilman EM-yksiköiden kaskadivaikutuksia. Selainten tuki REM-yksiköille kasvoi tasaisesti tämän ajanjakson aikana.
Nykyinen verkkokehitys omaksuu sekoituksen yksiköitä eri tarkoituksiin:
Tämä kehitys heijastaa verkkosivustojen siirtymistä asiakirjapohjaisesta mediasta monimutkaiseksi sovellusplatformiksi, joka on toimittava lukemattomilla laitteilla ja konteksteissa.
1// Muunna PX, REM ja EM-yksiköiden välillä
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// Esimerkkikäyttö
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 /* Perusfonttikoot */
3 --juuri-fonttikoko: 16px;
4 --perus-fonttikoko: var(--juuri-fonttikoko);
5
6 /* Yhteiset pikseliarvot muunnettuna REM-yksiköiksi */
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 /* Typografiasuunnitelma */
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/* Käyttöesimerkki */
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-funktiot yksiköiden muuntamiseen
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// Käyttöesimerkki
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 // Käyttäen vanhemman fonttikokoa (18px) EM-muunnokseen
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 """Muuta pikselit REM-yksiköiksi"""
3 return px / root_font_size
4
5def rem_to_px(rem, root_font_size=16):
6 """Muuta REM-yksiköt pikseleiksi"""
7 return rem * root_font_size
8
9def px_to_em(px, parent_font_size=16):
10 """Muuta pikselit EM-yksiköiksi"""
11 return px / parent_font_size
12
13def em_to_px(em, parent_font_size=16):
14 """Muuta EM-yksiköt pikseleiksi"""
15 return em * parent_font_size
16
17# Esimerkkikäyttö
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 (juurim) yksiköt ovat suhteellisia juurielementin fonttikoolle (yleensä <html>-elementti), kun taas EM-yksiköt ovat suhteellisia niiden vanhempien elementtien fonttikoolle. Tämä keskeinen ero tarkoittaa, että REM-yksiköt säilyttävät johdonmukaisen koon koko asiakirjassa riippumatta sisäkkäisyydestä, kun taas EM-yksiköt voivat luoda kumuloivan vaikutuksen, kun elementit ovat sisäkkäin.
Yhtä "parasta" yksikköä ei ole kaikissa tilanteissa. Yhdistelmä yksiköitä on yleensä tehokkain:
Ihanteellinen lähestymistapa on käyttää kutakin yksikköä sen parhaiten soveltuvissa konteksteissa.
16px oletus on asetettu luettavuuden standardiksi, joka toimii hyvin eri laitteilla. Tutkimukset ovat osoittaneet, että noin 16px:n kokoinen teksti on optimaalinen lukemiseen näytöillä tyypillisiltä katseluetäisyyksiltä. Tämä oletus tarjoaa myös hyvän perustan esteettömyydelle, varmistaen, että teksti ei ole liian pientä useimmille käyttäjille.
Kyllä, CSS tukee negatiivisia arvoja monille ominaisuuksille käyttäen mitä tahansa yksikkötyyppiä. Negatiiviset marginaalit, siirrot ja sijainnit ovat yleisiä käyttötapauksia negatiivisille arvoille. Muunnin käsittelee negatiivisia arvoja oikein kaikille yksikkötyypeille.
EM-yksiköt kumuloituvat, kun elementit ovat sisäkkäin. Esimerkiksi:
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}
10Tämä kumuloiva vaikutus voi olla hyödyllinen suhteellisten suunnitelmien luomisessa, mutta se vaatii huolellista hallintaa, jotta vältetään ei-toivottua skaalausta.
Korkearesoluutioiset näytöt käsitellään automaattisesti, kun käytetään suhteellisia yksiköitä kuten REM ja EM. Koska nämä yksiköt perustuvat fonttikokoon eivätkä fyysisiin pikseleihin, ne skaalaavat asianmukaisesti korkearesoluutioisilla näytöillä. Kuvien ja rajojen osalta harkitse media kyselyjen käyttöä laite-pikseli-suhteen tai resoluution kanssa.
Selainten tuki REM- ja EM-yksiköille media kyselyissä on parantunut huomattavasti. EM-yksiköiden käyttö media kyselyissä on yleensä suositeltavaa, koska:
1/* Käyttäen EM-yksiköitä media kyselyissä */
2@media (min-width: 48em) { /* 768px 16px perusfontilla */
3 /* Tabletin tyylit */
4}
5
6@media (min-width: 64em) { /* 1024px 16px perusfontilla */
7 /* Työpöydän tyylit */
8}
9Useimmat suunnittelutyökalut toimivat ensisijaisesti pikseleissä. Toteuttaessasi suunnitelmia:
Joissakin suunnittelutyökaluissa on laajennuksia, jotka voivat auttaa tässä muuntamisprosessissa automaattisesti.
Selaimet käsittelevät alipikseliarvoja eri tavoin. Jotkut selaimet pyöristävät lähimmälle pikselille, kun taas toiset tukevat alipikselin renderointia sujuvammalle skaalaamiselle. Tämä voi toisinaan aiheuttaa pieniä eroja eri selaimissa, erityisesti pienillä REM/EM-arvoilla tai käytettäessä muunnoksia. Useimmissa käyttötapauksissa nämä erot ovat vähäisiä.
Eri yksikkötyyppien, kuten pikselien, REM- ja EM-yksiköiden käytön välillä ei ole merkittävää suorituskykyeroa moderneissa selaimissa. Yksiköiden valinta tulisi perustua suunnittelutarpeisiin, responsiiviseen käyttäytymiseen ja esteettömyysvaatimuksiin, eikä suorituskykyhuoliin.
"CSS Values and Units Module Level 3." W3C Suositus. https://www.w3.org/TR/css-values-3/
Marcotte, Ethan. "Responsiivinen Verkkosuunnittelu." A List Apart, 25. toukokuuta 2010. https://alistapart.com/article/responsive-web-design/
Rutter, Richard. "Typografian Tyylin Elementit Sovellettuna Verkkosivuille." http://webtypography.net/
"CSS-yksiköt." MDN Web Docs. https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units
"CSS Pikselit vs. Fyysiset Pikselit." Stack Overflow Dokumentaatio. https://stackoverflow.com/questions/8785643/what-exactly-is-the-difference-between-css-pixels-and-device-pixels
Coyier, Chris. "CSS:n Pituudet." CSS-Tricks. https://css-tricks.com/the-lengths-of-css/
"CSS Mukautettujen Ominaisuuksien (Muuttujien) Käyttö." MDN Web Docs. https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties
"REM-yksiköiden Ymmärtäminen ja Käyttö CSS:ssä." SitePoint. https://www.sitepoint.com/understanding-and-using-rem-units-in-css/
Lopeta manuaalinen CSS-yksikkömuunnos ja anna PX, REM ja EM Yksikkömuunnin tehdä työ puolestasi. Olitpa rakentamassa responsiivista verkkosivustoa, luomassa suunnittelujärjestelmää tai vain oppimassa CSS-yksiköistä, tämä työkalu säästää aikaa ja varmistaa tarkkuuden. Syötä arvosi nyt nähdäksesi, kuinka helppoa yksikkömuunnos voi olla!
Löydä lisää työkaluja, jotka saattavat olla hyödyllisiä työnkulullesi