Muuda pikslite (PX), juure em (REM) ja em (EM) CSS-i ühikute vahel selle lihtsa kalkulaatori abil. Oluline reageeriva veebidisaini ja arenduse jaoks.
Muutke pikslid (PX), juure em (REM) ja em (EM) ühikute vahel. Sisestage väärtus ükskõik millisesse väljasse, et näha vastavaid väärtusi teistes ühikutes.
CSS-ühikute mõistmine ja nende vahel konverteerimine on hädavajalik reageeriva veebidisaini ja -arenduse jaoks. PX (piksel), REM (juure em) ja EM-ühikud on põhielemendid, mis määravad, kuidas elemendid on erinevates seadmetes ja ekraanisuurustes mõõdetud ja paigutatud. See põhjalik ühikute muundur võimaldab teil hõlpsasti tõlkida väärtusi nende kolme olulise CSS-ühiku vahel, aidates teil luua paindlikumaid ja hooldatavamaid veebikujundusi.
Piksli (PX) puhul on tegemist fikseeritud suurusega ühikutega, mis pakuvad täpset kontrolli, kuid puudub skaleeritavus, samas kui REM-ühikud skaleeruvad juureelemendi fondi suuruse suhtes ning EM-ühikud skaleeruvad nende vanemelemendi fondi suuruse suhtes. Nende ühikute vahel konverteerimine võib olla keeruline, eriti keerukate kujunduste puhul või kui toetatakse ligipääsetavuse funktsioone nagu teksti suuruse muutmine. Meie PX, REM ja EM muundur lihtsustab seda protsessi, võimaldades teil keskenduda kaunite, reageerivate kujunduste loomisele.
Pikslid (PX) on kõige põhilisem ja laialdasemalt kasutatav CSS-ühik. Piksel on digitaalsete piltide ruudustiku üksik punkt ja esindab ekraanil kõige väiksemat kontrollitavat elementi. CSS-is pakuvad pikslid fikseeritud suurusega mõõtühikut, mis jääb järjepidevaks sõltumata muudest stiilifaktoritest.
1.element {
2 width: 200px;
3 font-size: 16px;
4 margin: 10px;
5}
6Pikslite peamised omadused:
REM (juure em) ühikud on suhtelised ühikud, mis skaleeruvad juureelemendi fondi suuruse (tavaliselt <html> elemendi) järgi. Vaikimisi määravad enamik brausereid juure fondi suuruseks 16px, mistõttu 1rem on võrdne 16px, kui seda ei muudeta.
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}
10REM-ühikute peamised omadused:
EM-ühikud on suhtelised ühikud, mis skaleeruvad nende vanemelemendi fondi suuruse järgi. Kui vanemelemendi fondi suurust ei ole määratud, viitavad EM-id pärandatud fondi suurusele.
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}
9EM-ühikute peamised omadused:
PX, REM ja EM-ühikute vaheliste matemaatiliste suhete mõistmine on täpsete konversioonide jaoks hädavajalik. Siin on valemid, mida meie muunduris kasutatakse:
Pikslite konverteerimiseks REM-ühikutesse jagage pikslite väärtus juure fondi suurusega:
Näiteks, kui juure fondi suurus on vaikimisi 16px:
Pikslite konverteerimiseks EM-ühikutesse jagage pikslite väärtus vanemelemendi fondi suurusega:
Näiteks, kui vanemfondi suurus on 16px:
REM-ühikute konverteerimiseks piksliteks korrutage REM-i väärtus juure fondi suurusega:
Näiteks, kui juure fondi suurus on vaikimisi 16px:
EM-ühikute konverteerimiseks piksliteks korrutage EM-i väärtus vanemelemendi fondi suurusega:
Näiteks, kui vanemfondi suurus on 16px:
REM-ühikute konverteerimiseks EM-ühikutesse peate arvestama nii juure fondi suuruse kui ka vanemelemendi fondi suurusega:
Kui juure ja vanemfondi suurused on samad (nt 16px), siis 1rem = 1em.
EM-ühikute konverteerimiseks REM-ühikutesse kasutage järgmist valemit:
Jällegi, kui mõlemad fondi suurused on võrdsed, siis 1em = 1rem.
Meie ühikute muundur võimaldab hõlpsasti tõlkida väärtusi PX, REM ja EM-ühikute vahel. Siin on samm-sammuline juhend muunduri tõhusaks kasutamiseks:
<html> fondi suuruse väärtuseleMõistmine, millal kasutada iga CSS-ühikut ja kuidas nende vahel konverteerida, on tõhusaks veebiarenduseks hädavajalik. Siin on mõned praktilised rakendused ja stsenaariumid, kus meie ühikute muundur osutub hindamatuks:
Ühikute vahel konverteerimine on hädavajalik tõeliselt reageerivate kujunduste loomiseks:
1/* Muutke fikseeritud piksliväärtused reageerivateks REM-ühikuteks */
2.container {
3 /* Algselt: padding: 20px; */
4 padding: 1.25rem; /* 20px ÷ 16px = 1.25rem */
5
6 /* Algselt: margin-bottom: 32px; */
7 margin-bottom: 2rem; /* 32px ÷ 16px = 2rem */
8}
9Suhteliste ühikute kasutamine parandab ligipääsetavust, austades kasutaja eelistusi:
Kaasaegsed disainisüsteemid saavad kasu läbimõeldud ühikute kasutamisest:
Harmoonilise tüpograafia loomine nõuab hoolikat ühiku valikut:
1/* Tüpograafia süsteem, kasutades REM-ühikuid */
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 */
8Kui rakendate kujundusi tööriistadest nagu Figma või Photoshop:
Kuigi PX, REM ja EM on kõige levinumad ühikud, on olemas ka alternatiive, mida tasub kaaluda:
CSS-ühikute ajalugu peegeldab laiemat veebidisaini arengut, alates staatilistest paigutustest kuni tänapäevaste reageerivate, ligipääsetavate lähenemisteni.
CSS-i varajastes päevades valitsesid pikslid. Veebidisainerid lõid fikseeritud laiusega paigutusi, tavaliselt 640px või 800px laiad, et mahutada levinud ekraanisuurusi. Ligipääsetavus ja seadmete mitmekesisus ei olnud suured mured ning täpne kontroll oli peamine eesmärk.
Kuna ekraanisuurused mitmekesistusid, hakkasid protsentuaalsed paigutused populaarsust koguma. Disainerid hakkasid looma paindlikumaid kujundusi, kuigi tüpograafia jäi sageli pikslitesse. Selle ajastu jooksul tutvustati EM-ühikuid CSS-is, kuigi nende vastuvõtt oli piiratud, kuna pesastatud fondi suuruste haldamine oli keeruline.
iPhone'i tutvustamine 2007. aastal muutis veebidisaini. Ühtäkki pidid veebisaidid töötama ekraanidel, mis olid nii väikesed kui 320px laiad. See kiirendas huvi reageeriva disaini tehnikate ja suhteliste ühikute vastu. EM-ühikute piirangud (eriti kaskaadne efekt) muutusid keerukate kujunduste puhul ilmsemaks.
Ethan Marcotte'i mõjukas artikkel reageerivast veebidisainist 2010. aastal muutis, kuidas arendajad CSS-ühikutele lähenesid. REM-ühik tutvustati CSS3-s, pakkudes suhtelise skaleerimise eeliseid ilma EM-ühikute kaskaadsete komplikatsioonideta. Brauserite tugi REM-ühikutele kasvas järk-järgult selle perioodi jooksul.
Tänapäeva veebiarendus hõlmab erinevate ühikute segu erinevate eesmärkide jaoks:
See areng peegeldab veebis üleminekut dokumentide põhiselt meediumilt keerukate rakenduste platvormile, mis peab töötama lugematute seadmete ja kontekstide kaudu.
1// Konverteerige 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// Näide kasutamisest
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 /* Põhi fondi suurused */
3 --juure-fondi-suurus: 16px;
4 --põhi-fondi-suurus: var(--juure-fondi-suurus);
5
6 /* Ühised piksliväärtused, mis on muundatud REM-idesse */
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/* Näide kasutamisest */
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 konversiooniks
2@function px-to-rem($px, $juure-fondi-suurus: 16) {
3 @return ($px / $juure-fondi-suurus) * 1rem;
4}
5
6@function px-to-em($px, $vanem-fondi-suurus: 16) {
7 @return ($px / $vanem-fondi-suurus) * 1em;
8}
9
10@function rem-to-px($rem, $juure-fondi-suurus: 16) {
11 @return $rem * $juure-fondi-suurus * 1px;
12}
13
14// Näide kasutamisest
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 vanemfondi suurust (18px) EM-i konversiooniks
22 padding: px-to-em(16, 18);
23 margin-bottom: px-to-em(24, 18);
24 }
25}
261def px_to_rem(px, juure_fondi_suurus=16):
2 """Konverteerige pikslid REM-ühikutesse"""
3 return px / juure_fondi_suurus
4
5def rem_to_px(rem, juure_fondi_suurus=16):
6 """Konverteerige REM-ühikud piksliteks"""
7 return rem * juure_fondi_suurus
8
9def px_to_em(px, vanem_fondi_suurus=16):
10 """Konverteerige pikslid EM-ühikutesse"""
11 return px / vanem_fondi_suurus
12
13def em_to_px(em, vanem_fondi_suurus=16):
14 """Konverteerige EM-ühikud piksliteks"""
15 return em * vanem_fondi_suurus
16
17# Näide kasutamisest
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 (juure em) ühikud on suhtelised juureelemendi fondi suurusele (tavaliselt <html> elemendile), samas kui EM-ühikud on suhtelised nende vanemelemendi fondi suurusele. See peamine erinevus tähendab, et REM-ühikud säilitavad järjepideva mõõtmise kogu dokumendis, sõltumata pesastamisest, samas kui EM-ühikud võivad pesastatud elementide puhul tekitada kumulatiivse efekti.
Ühtegi "parimat" ühikut ei ole kõigi olukordade jaoks. Tüüpiliselt on kõige tõhusam ühikute kombinatsioon:
Ideaalne lähenemine on kasutada iga ühikut selle parimate omaduste jaoks ühtses süsteemis.
16px vaikimisi on kehtestatud lugemisstandardina, mis töötab hästi erinevates seadmetes. Uuringud on näidanud, et umbes 16px suurune tekst on optimaalseks lugemiseks ekraanidel, mis on tüüpilise vaatamisdistantsi juures. See vaikimisi suurus pakub ka head alust ligipääsetavuse tagamiseks, tagades, et tekst ei oleks enamikule kasutajatest liiga väike.
Jah, CSS toetab negatiivseid väärtusi paljude omaduste puhul, kasutades mis tahes tüüpi ühikuid. Negatiivsed marginaalid, tõuked ja positsioonid on levinud kasutusjuhtumid. Meie muundur käsitleb negatiivseid väärtusi õigesti kõigi ühikute tüüpide puhul.
EM-ühikud kumuleeruvad, kui elemendid on pesastatud. Näiteks:
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}
10See kumuleeriv efekt võib olla kasulik proportsionaalsete kujunduste loomisel, kuid nõuab hoolikat haldamist, et vältida soovimatut skaleerimist.
Kõrge DPI ekraanid käsitletakse automaatselt, kui kasutatakse suhtelisi ühikuid nagu REM ja EM. Kuna need ühikud põhinevad fondi suurusel, mitte füüsilistel pikslitel, skaleeruvad nad vastavalt kõrge eraldusvõimega ekraanidel. Piltide ja piiride puhul kaaluge seadistuste tegemist meedia päringute kaudu seadme pikslite suhte või eraldusvõime jaoks.
Brauserite tugi REM- ja EM-ühikutele meedia päringutes on oluliselt paranenud. EM-ühikute kasutamine meedia päringutes on üldiselt soovitatav, kuna:
1/* EM-ühikute kasutamine meedia päringutes */
2@media (min-width: 48em) { /* 768px 16px baasil */
3 /* Tahvelarvuti stiilid */
4}
5
6@media (min-width: 64em) { /* 1024px 16px baasil */
7 /* Lauaarvuti stiilid */
8}
9Enamik disainitööriistu töötab peamiselt pikslitega. Kujunduste rakendamisel:
Mõned disainitööriistad omavad pluginaid, mis aitavad seda konversiooniprotsessi automaatselt.
Brauserid käsitlevad alampikslite väärtusi erinevalt. Mõned brauserid ümardavad lähima pikslini, samas kui teised toetavad alampikslite renderdamist sujuvama skaleerimise jaoks. See võib mõnikord põhjustada väikeseid erinevusi brauserite vahel, eriti väikeste REM/EM väärtuste puhul või kui kasutatakse muundamisi. Enamiku kasutusjuhtumite puhul on need erinevused ebaolulised.
Erinevate CSS-ühikute vahel ei ole olulist jõudluse erinevust. Ühikute valik peaks põhinema disaini nõudmistel, reageerival käitumisel ja ligipääsetavuse vajadustel, mitte jõudluse kaalutlustel.
"CSS Values and Units Module Level 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. "Tüpograafia Stiili Elemendid Rakendatud Veebis." http://webtypography.net/
"CSS Ühikute Kasutamine." MDN Veeb Docs. 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-i Pikkused." CSS-Tricks. https://css-tricks.com/the-lengths-of-css/
"Kohandatud Omaduste (Muutuja) Kasutamine CSS-is." MDN Veeb Docs. https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties
"REM Ühikute Mõistmine ja Kasutamine CSS-is." SitePoint. https://www.sitepoint.com/understanding-and-using-rem-units-in-css/
Lõpetage käsitsi CSS-ühikute konversioonide tegemine ja laske meie PX, REM ja EM Ühikute Muunduril töö ära teha. Olgu te ehitamas reageerivat veebisaiti, loomas disainisüsteemi või lihtsalt õppimas CSS-ühikute kohta, see tööriist säästab teie aega ja tagab täpsuse. Sisestage oma väärtused nüüd, et näha, kui lihtne on ühikute konversioon!
Avasta rohkem tööriistu, mis võivad olla kasulikud teie töövoos