Teisendage pikslitest REM-i ja EM-i ühikutesse koheselt. Tasuta CSS-i ühikute teisendaja responsiivseks veebikujunduseks. Toetab kohandatud fondi suurusi ja reaalajas arvutusi täpsete tulemuste saamiseks.
Teisendage pikslid (PX), root em (REM) ja em (EM) ühikud. Sisestage väärtus mistahes väljale, et näha samaväärset väärtust teistes ühikutes.
Kui sa ehitad reageerivaid veebisaite, siis üks levinumaid väljakutseid on disaini spetsifikatsioonide tõlkimine paindlikeks ja skaleeritavateks CSS-i ühikuteks. Sa oled tõenäoliselt näinud Figma disaini, kus on kirjas "padding: 24px" ja mõelnud, kas jätta see pikslitesse või teisendada rem-ühikuteks. See otsus mõjutab kõike alates ligipääsetavusest kuni selleni, kuidas paigutus reageerib, kui kasutajad muudavad oma brauseri fondi suurust.
See PX, REM ja EM ühikute teisendaja aitab sul kiiresti tõlkida nende kolme põhilise CSS-i ühiku vahel. Pikslid annavad täpse kontrolli - suurepärased äärejoonte ja peente detailide jaoks. REM-ühikud skaaluvad juurfondiga, muutes need ideaalseks ühtlaseks vahekauguseks ja tüpograafiaks kogu saidil. EM-ühikud skaaluvad suhteliselt oma vanemaelemendiga, mis on ideaalne iseseisvate komponentide loomiseks, mis säilitavad proportsioone.
Keeruline osa? Teisendamine nõuab arvesse võtmist fondisuurusi, mis varieeruvad juurelemendi ja individuaalsete komponentide vahel. Levinud viga, mida arendajad teevad, on kasutada piksleid igal pool, kuna see tundub lihtsam. Kuigi see alguses töötab, tekitab see ligipääsetavuse probleeme, kui kasutajad suurendavad oma brauseri vaikimisi fondi suurust - paigutus ei kohane proportsionaalselt.
Pikslid (PX) on kõige lihtsam CSS ühik — see, mida määrad, on see, mida saad. CSS piksel on võrdlusühik, mis ei pruugi alati vastata füüsilisele ekraanipikslile (eriti kõrge eraldusvõimega ekraanidel nagu Retina). Need pakuvad fikseeritud suurust, mis ei muutu sõltuvalt fondi suurusest või vanemelemendist.
1.element {
2 width: 200px;
3 font-size: 16px;
4 margin: 10px;
5}
6Millal pikslid hästi töötavad:
Probleem: Pikslid ei arvesta kasutaja eelistustega. Kui keegi suurendab oma brauseri vaikimisi fondi suurust 16px-lt 20px-ni parema loetavuse jaoks, jäävad pikslipõhised paigutused muutumatuks, mis võib põhjustada teksti ületäitmist konteinerites või kitsast ruumikasutust.
REM (root em) ühikud skaleeruvad vastavalt juurelemendi fondi suurusele — tavaliselt <html> element. Enamik brausereid kasutavad vaikimisi 16px, seega 1rem võrdub 16px-ga, kui te juure fondi suurust ei muuda. Siin on see, mis teeb REM-ühikud võimsaks: nad pakuvad järjepidevat, prognoositavat skaleerimist kogu teie veebisaidil.
1html {
2 font-size: 16px; /* Vaikimisi enamikus brauserites */
3}
4
5.element {
6 width: 12.5rem; /* Võrdne 200px-ga vaikimisi juure fondi suuruse korral */
7 font-size: 1rem; /* Võrdne 16px-ga */
8 margin: 0.625rem; /* Võrdne 10px-ga */
9}
10Miks arendajad eelistavad REM ühikuid:
Proovitud näpunäide: Seadke oma juure fondi suurus 62.5%-le (mis teeb 1rem = 10px vaikimisi 16px baasiga). See muudab arvutamise lihtsamaks — 1.6rem = 16px, 2.4rem = 24px. Lihtsalt pidage meeles seada oma keha fondi suurus tagasi 1.6rem-le, et tekst vaikimisi oleks 16px. Vastavalt W3C CSS väärtuste ja ühikute spetsifikatsioonile, viitavad REM ühikud alati juurelemendile, muutes nad keerukates paigutustes ennustatavaks.
EM ühikud skaleeruvad vastavalt oma vanema elemendi fondi suurusele, muutes nad kontekstitundlikuks. See käitumine erineb REM ühikutest, mis alati viitavad juurele. Nimi "em" pärineb trükikunstist — ajalooliselt see tähistas antud kirjatüübis suurtähe "M" laiust.
1.parent {
2 font-size: 20px;
3}
4
5.child {
6 font-size: 0.8em; /* Võrdne 16px-ga (20px × 0.8) */
7 margin: 0.5em; /* Võrdne 8px-ga (16px × 0.5) */
8}
9Millal EM ühikud säravad:
line-height: 1.5em)Kuhjumise lõks: Siin on koht, kus arendajad sageli kinni jäävad. EM ühikud kanduvad läbi sisestatud elementide, mis võib põhjustada ootamatuid tulemusi:
1.level-1 { font-size: 1.2em; } /* 19.2px kui vanem on 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) */
4Kolme taseme sisestamise järel on teie tekst kasvanud 73% asemel 20%. Seetõttu paljud arendajad läksid trükikunstis REM ühikutele üle, kui brauserite tugi paranes.
Arusaamine matemaatilistest suhetest PX, REM ja EM ühikute vahel on täpseteks teisendamisteks oluline. Siin on meie teisendajas kasutatavad valemid:
Pikslite teisendamiseks REM-ühikuteks jagage piksli väärtus juurfondisuurusega:
Näiteks vaikimisi juurfondisuurusega 16px:
Pikslite teisendamiseks EM-ühikuteks jagage piksli väärtus vanema elemendi fondisuurusega:
Näiteks vanema elemendi fondisuurusega 16px:
REM-ühikute teisendamiseks piksliteks korrutage REM-väärtus juurfondisuurusega:
Näiteks vaikimisi juurfondisuurusega 16px:
EM-ühikute teisendamiseks piksliteks korrutage EM-väärtus vanema elemendi fondisuurusega:
Näiteks vanema elemendi fondisuurusega 16px:
REM-ühikute teisendamiseks EM-ühikuteks peate arvestama nii juurfondisuurust kui ka vanema elemendi fondisuurust:
Kui nii juur- kui ka vanema elemendi fondisuurused on samad (nt 16px), siis 1rem = 1em.
EM-ühikute teisendamiseks REM-ühikuteks kasutage järgmist valemit:
Kui mõlemad fondisuurused on võrdsed, siis 1em = 1rem.
Täpsete teisenduste saamine on lihtne. Võti on mõista, millised fondisuurused sobivad teie konkreetsesse olukorda.
<html> elemendile (tavaliselt 16px)Teisendaja vaikeväärtused on 16px nii juuri kui vanema elemendi jaoks, kuna see on brauseri standard. Kuid oluline on: teie tegelik projekt võib kasutada erinevaid väärtusi.
Juurfondisuuruse leidmine: Avage brauseri arendaja tööriistad, kontrollige <html> elementi ja vaadake arvutatud fondisuurust. Kui olete seadnud html { font-size: 62.5%; }, on teie juurfondissuurus 10px (62,5% 16px-st).
Vanema elemendi fondisuuruse leidmine: EM-i teisenduste jaoks vajate konkreetse vanema elemendi fondisuurust, kuhu te stiili rakendada soovite. Kontrollige seda elementi arendaja tööriistades, et näha selle arvutatud fondisuurust. Kui vanemal elemendil on font-size: 1.2rem ja teie juur on 16px, seadke vanema elemendi fondissuurus 19,2px-ks täpsete EM-i arvutuste jaoks.
Disainilt koodi: Teie Figma fail näitab padding: 24px. Soovite kasutada REM-ühikuid parema ligipääsetavuse nimel. Sisestage 24 PX-väljale ja näete, et see võrdub 1,5 REM-iga (eeldades 16px juurt).
Nupu komponendi loomine: Soovite, et polsterdus skaleeruks nupu fondisuurusega. Kui nupul on font-size: 1.125rem (18px), seadke vanema elemendi fondissuurus 18-ks, sisestage soovitud pikslite polsterdus ja kasutage tulemuslikku EM-väärtust.
Reageeriv tüpograafia: Loote päise, mis on lauaarvutis 32px. Sisestage 32px, et näha, et see on 2 REM-i, mis skaleerub sobivalt, kui kasutajad muudavad oma brauseri fondisuurust.
Valemite tundmine on üks asi - nende tõhus rakendamine tootmiskoodis on teine. Siin on koht, kus ühiku teisendamine teeb märgatava erinevuse sinu projektides.
Sa saad Figma disaini, kus kõik on määratud pikslites. Kaardi komponent näitab:
Nende teisendamine REM-ühikutesse (eeldades 16px juurt) annab:
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}
13Mis on kasu? Kui kasutaja nägemispuudega suurendab oma brauseri vaikimisi fondi suurust 16px-lt 20px-ni, skaleerub sinu kaart proportsionaalselt. Polsterdus, marginaalid ja tekst suurenevad 25%, säilitades disaini visuaalse tasakaalu. Pikslite väärtustega kasvaks ainult tekst, rikkudes paigutust.
Komponentide teegid vajavad nuppe, mis töötavad mis tahes suuruses - väike, keskmine, suur. EM-ühikute kasutamine polsterduseks loob iseskaleeruva komponendi:
1.button {
2 /* Baas-nupp 16px fondi suurusega */
3 font-size: 1rem;
4 padding: 0.75em 1.5em; /* 12px 24px baas-suuruses */
5 border: 1px solid currentColor;
6 border-radius: 0.25em;
7}
8
9.button--large {
10 font-size: 1.25rem; /* 20px */
11 /* Polsterdus muutub automaatselt 15px 30px (0.75em × 20px) */
12}
13
14.button--small {
15 font-size: 0.875rem; /* 14px */
16 /* Polsterdus muutub automaatselt 10.5px 21px (0.75em × 14px) */
17}
18(Ülejäänud tekst jätkub samamoodi, täielikult tõlgituna eesti keelde)
Üleminek pikslitelt suhtelist üksustele peegeldab veebis toimunud muutust staatilisest dokumendist kuni reageerivate rakendusteni. Selle ajaloo mõistmine selgitab, miks me tänapäeval ühikuid teisendame.
Varajased veebilehed olid projekteeritud kindlatele ekraani laiustele - 640px, seejärel 800px, siis 1024px. CSS-paigutused kasutasid ainult piksleid, sest see oli trükiDisaineritele arusaadav. Veebilehed nägid välja täpselt ühesugused (kui nad üldse töötasid), kuid purunesid täielikult ootamatutel ekraani suurustel. Veebi käsitleti nagu trükist: fikseeritud, kontrollitud, ennustatav.
EM-ühikud olid CSS-i spetsifikatsioonis olemas, pärit trükikunstist, kuid enamik arendajaid neid vältigid. Kuhjuv käitumine oli segane ning mobiilseadmeid veel ei olnud, mis oleks sundinud paindlikult mõtlema.
iPhone muutis kõike. Äkki tuli märkimisväärne osa liiklusest 320px-laiustelt ekraanidelt. Pintseldades suurendamine aitas, kuid 1024px-laiustele lauaarvutitele loodud veebilehed olid mobiilil vaevaliselt kasutatavad.
Ethan Marcotte'i 2010. aasta artikkel reageeriva veebidisaini kohta kristalliseeris uue lähenemise: voolav paigutus, paindlikud pildid ja meediapäringud. Suhtelised ühikud muutusid hädavajalikuks, mitte valikuliseks. Kuid EM-ühikute kuhjuv käitumine põhjustas keerulistes paigutustes vigu.
CSS3 tutvustas REM-ühikuid umbes 2010. aastal, lahendades EM-ühikute suurima probleemi: kuhjumise. REM andis meile suhtelise skaleerimise ilma pärimise keerukuseta. Internet Explorer 9 lisas toe 2011. aastal ning 2015. aastaks olid REM-ühikud muutunud tavapäraseks.
Tänapäeval kombineeritakse parimad praktikad ühikuid strateegiliselt. REM tipograafiaks ja vahekaugusteks. EM komponendi sisesteks proportsioonideks. Pikslid detailideks. Kaasaegsed CSS-i funktsioonid nagu clamp() segunevad neid ühikuid dünaamiliselt, luues paigutusi, mis kohanevad igasuguse kontekstiga.
See areng - jäikadest pikslites fikseeritud üksustest paindlike suhtelist üksusteni - peegeldab kasutajate ootuste muutumist: "veebilehed peaksid igal pool ühtemoodi välja nägema" kuni "veebilehed peaksid igal pool hästi töötama".
1// Teisendamine PX, REM ja EM ühikute vahel
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// Kasutamise näide
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 /* Baasfondi suurused */
3 --root-font-size: 16px;
4 --base-font-size: var(--root-font-size);
5
6 /* Levinud piksliväärtused teisendatuna REM-iks */
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 /* Tüpograafia skaala */
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/* Kasutamise näide */
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 funktsioonid ühikute teisendamiseks
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// Kasutamise näide
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 // Kasutades vanema elemendi fondi suurust (18px) em teisendamiseks
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 """Teisenda pikslid REM-ühikuteks"""
3 return px / root_font_size
4
5def rem_to_px(rem, root_font_size=16):
6 """Teisenda REM-ühikud piksiteks"""
7 return rem * root_font_size
8
9def px_to_em(px, parent_font_size=16):
10 """Teisenda pikslid EM-ühikuteks"""
11 return px / parent_font_size
12
13def em_to_px(em, parent_font_size=16):
14 """Teisenda EM-ühikud piksiteks"""
15 return em * parent_font_size
16
17# Kasutamise näide
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
21Pärast sadu koodibaase läbi vaadanud olen märganud neid vigu korduvalt. Nende vältimine säästab teie silusmisaega.
Probleem: Te teisendate 24px 1.5rem-iks, eeldades vaikimisi 16px juurfondisuurust, kuid teie projekt kasutab html { font-size: 62.5%; }, mis muudab juuri 10px-iks. Teie element lõpeb 15px-ina 24px asemel.
Lahendus: Alati kontrollige oma projekti tegelikku juurfondisuurust enne teisendamist. Seadke teisendaja juurfondisuuruseks projekti tegelik suurus.
Probleem: Te loote kaardi komponendi font-size: 1.2em pealkirjadega. Töötab suurepäraselt. Siis sisestate kaardi teise kaardi sisse, ja äkki on sisemise kaardi pealkiri 1.44em (1.2 × 1.2), mitte 1.2em.
Lahendus: Kasutage tüpograafias REM-ühikuid, välja arvatud juhul, kui te spetsiaalselt ei soovi kaskadeeruvat käitumist. Hoidke EM-ühikud ruumivajaduse jaoks, mis peaks skaleeruma kohaliku fondisuurusega.
Probleem: Te teisendad border: 1px border: 0.0625rem-iks järjepidevuse nimel. Kui kasutajad suumivad või muudavad fondisuurust, muutuvad teie äärejooned paksudeks ja inetuteks.
Lahendus: Hoidke äärejooned pikslites. Alla-piksli äärejooned (0.5px) omavad ebaühtlast brauserituge, ja äärejooned harvemini vajavad teksti suurusega skaleerimist.
Probleem: Te kirjutate @media (min-width: 768px) tahvli murdepunkti jaoks. Kasutajad, kes on seadnud suurema vaikimisi fondisuuruse, ei saa tahvli paigutust, kui peaksid.
Lahendus: Kasutage EM- või REM-ühikuid meediapäringutes: @media (min-width: 48em). See austab kasutaja fondisuuruse eelistusi, nagu soovitab MDN-i reageeriv disaini dokumentatsioon.
Probleem: Teie Sass kasutab ühte arvutusmeetodit, teie JavaScript teist, ja teie vaimne matemaatika kolmandat. Tulemused ei kattu, põhjustades piksli lükkamise frustreerimist.
Lahendus: Kasutage seda teisendajat tõe allikana. Lisage see järjehoidjatesse, viidake seda koodiülevaadetes ja veenduge, et kogu teie meeskond kasutaks sama teisendamise metoodikat.
Viitepunkt erineb täielikult. REM ühikud vaatavad alati juursele <html> elemendi fondisuurusele - olenemata sellest, kui sügavale elemendid on pesastatud, 1rem võrdub alati sama arvutatud väärtusega. EM ühikud vaatavad oma vahetut vanemat fondi suurust, mis loob kaskaadse efekti.
Mõelge sellele nii: kui te pesastate kolm <div> elementi, millel igaühel on font-size: 1.2em, siis kõige sisemise div tekst on oluliselt suurem, kui te ootasite, sest iga tase suurendab korrutamist. font-size: 1.2rem puhul igal tasemel on kõigil kolmel divil identne fondsuurus, kuna nad kõik viitavad juurele.
Sellepärast sai REM populaarseks tüpograafias, kui brauserite tugi paranes - see kõrvaldab pärimisahelate jälgimise vaimse koormuse.
[Ülejäänud tõlge jätkub sama põhjalikkusega, säilitades täpselt sama struktuuri ja sisu nagu originaalis]
"CSS väärtused ja ühikud moodul tase 3." W3C soovitus. https://www.w3.org/TR/css-values-3/
Marcotte, Ethan. "Reageeriv veebidisain." A List Apart, 25. mai 2010. https://alistapart.com/article/responsive-web-design/
Rutter, Richard. "Typograafilise stiili elemendid rakendatuna veebis." http://webtypography.net/
"CSS ühikud." MDN veebidokumendid. https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units
"CSS pikslid vs füüsilised pikslid." Stack Overflow dokumentatsioon. https://stackoverflow.com/questions/8785643/what-exactly-is-the-difference-between-css-pixels-and-device-pixels
Coyier, Chris. "CSS pikkused." CSS-Tricks. https://css-tricks.com/the-lengths-of-css/
"CSS kohandatud omaduste (muutujate) kasutamine." MDN veebidokumendid. https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties
"rem ühikutest arusaamine ja nende kasutamine CSS-is." SitePoint. https://www.sitepoint.com/understanding-and-using-rem-units-in-css/
Käsitsi CSS-ühikute teisendamine on tüütu ja vigadele aldis. Sa teed vaimset matemaatikat, kahtled arvutustes ja loodad, et fondi suurused on õiged. See PX kuni REM kuni EM teisendaja kõrvaldab selle hõõrdumise.
Sisesta oma pikslid disainifailidest, kohanda fondi suurused vastavalt sinu projekti konfiguratsioonile ja saa koheselt täpsed REM ja EM väärtused. Kopeeri need otse oma koodi. Kas sa rakendad uut disainisüsteemi, kohandad olemasolevat koodibaasi relatiivsete ühikutega või lihtsalt püüad aru saada, kuidas need ühikud seotud on, teisendaja teeb matemaatika ära, nii et sa saad keskenduda ehitamisele.
Arendajatele, kes töötavad ligipääsetavate veebisaitidega, aitab see tööriist tagada, et paigutused skaaluvad õigesti, kui kasutajad muudavad oma fondi eelistusi - nõue WCAG 2.1 tase AA all. Komponentteekide loojatele aitab see selgitada, millised EM väärtused loovad soovitud proportsioonid. Igaühele, kes tõlgib Figma disaine tootmise CSS-iks, kiirendab see konverteerimise töövoogu märgatavalt.
Valemid põhinevad W3C CSS väärtuste ja ühikute mooduli spetsifikatsioonil, tagades, et teisendused vastaksid täpselt sellele, kuidas brauserid neid väärtusi tegelikult arvutavad.
Avasta rohkem tööriistu, mis võivad olla kasulikud teie töövoos