PX, REM ja EM Ühikute Muundur: Olulised CSS Ühikute Selgitused

CSS Ühikute Muundamise Sissejuhatus

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.

CSS Ühikute Mõistmine: PX, REM ja EM

Mis on Pikslid (PX)?

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}
6

Pikslite peamised omadused:

Fikseeritud suurusega ühikud, mis ei skaleeru automaatselt
Pakuvad täpset kontrolli elementide mõõtmete üle
Kergesti mõistetavad ja visualiseeritavad
Vähem ideaalsed reageeriva disaini ja ligipääsetavuse jaoks

Mis on REM Ühikute?

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}
10

REM-ühikute peamised omadused:

Skaleeruvad juureelemendi fondi suuruse suhtes
Säilitavad järjepidevad proportsioonid kogu dokumendis
Toetavad paremat ligipääsetavust globaalsete fondi suuruse kohandamiste kaudu
Ideaalsed reageerivate paigutuste ja tüpograafia jaoks

Mis on EM Ühikute?

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}
9

EM-ühikute peamised omadused:

Skaleeruvad nende vanemelemendi fondi suuruse suhtes
Loovad pesastatud elementide puhul kaskaadse efekti
Kasulikud komponentide sees proportsionaalsete kujunduste loomiseks
Võivad muutuda keeruliseks hallata sügavalt pesastatud elementide puhul

Muundamisvalemid ja Arvutused

PX, REM ja EM-ühikute vaheliste matemaatiliste suhete mõistmine on täpsete konversioonide jaoks hädavajalik. Siin on valemid, mida meie muunduris kasutatakse:

PX-st REM-i Muundamine

Pikslite konverteerimiseks REM-ühikutesse jagage pikslite väärtus juure fondi suurusega:

$REM = \frac{PX}{juureFondSuurus}$

Näiteks, kui juure fondi suurus on vaikimisi 16px:

16px = 1rem
24px = 1.5rem
8px = 0.5rem

PX-st EM-i Muundamine

Pikslite konverteerimiseks EM-ühikutesse jagage pikslite väärtus vanemelemendi fondi suurusega:

$EM = \frac{PX}{vanemFondSuurus}$

Näiteks, kui vanemfondi suurus on 16px:

16px = 1em
24px = 1.5em
8px = 0.5em

REM-ist PX-ks Muundamine

REM-ühikute konverteerimiseks piksliteks korrutage REM-i väärtus juure fondi suurusega:

$PX = REM \times juureFondSuurus$

Näiteks, kui juure fondi suurus on vaikimisi 16px:

1rem = 16px
1.5rem = 24px
0.5rem = 8px

EM-ist PX-ks Muundamine

EM-ühikute konverteerimiseks piksliteks korrutage EM-i väärtus vanemelemendi fondi suurusega:

$PX = EM \times vanemFondSuurus$

Näiteks, kui vanemfondi suurus on 16px:

1em = 16px
1.5em = 24px
0.5em = 8px

REM-ist EM-iks Muundamine

REM-ühikute konverteerimiseks EM-ühikutesse peate arvestama nii juure fondi suuruse kui ka vanemelemendi fondi suurusega:

$EM = REM \times \frac{juureFondSuurus}{vanemFondSuurus}$

Kui juure ja vanemfondi suurused on samad (nt 16px), siis 1rem = 1em.

EM-ist REM-iks Muundamine

EM-ühikute konverteerimiseks REM-ühikutesse kasutage järgmist valemit:

$REM = EM \times \frac{vanemFondSuurus}{juureFondSuurus}$

Jällegi, kui mõlemad fondi suurused on võrdsed, siis 1em = 1rem.

Kuidas Kasutada PX, REM ja EM Ühikute Muundurit

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:

Põhikasutus

Sisestage väärtus igasse sisendvälja (PX, REM või EM)
Muundur arvutab automaatselt ja kuvab vastavad väärtused teistes kahes ühikus
Kohandage juure fondi suurust (vaikimisi: 16px), et näha, kuidas see mõjutab REM-i konversioone
Kohandage vanemfondi suurust (vaikimisi: 16px), et näha, kuidas see mõjutab EM-i konversioone
Kasutage kopeerimisnuppu iga välja kõrval, et kopeerida väärtus oma lõikepuhvrisse

Täiendavad Funktsioonid

Visuaalne võrdlus: Tööriist pakub visuaalset esitamist iga ühiku suhtelisest suurusest
Täpsuse kontroll: Kõik arvutused säilitavad 4 kümnendkohta täpsuse
Negatiivsed väärtused: Muundur toetab negatiivseid väärtusi, mis on CSS-is kehtivad omaduste, nagu marginaalid
Reaalajas uuendused: Iga muudatus sisendväärtustes või fondi suuruse seadetes uuendab kõiki arvutusi koheselt

Täpsete Konversioonide Näpunäited

Kõige täpsemate REM-i konversioonide jaoks seadke juure fondi suurus vastama teie projekti <html> fondi suuruse väärtusele
Täpsete EM-i konversioonide jaoks seadke vanemfondi suurus vastama selle vanemelemendi fondi suurusele, millega te töötate
Pidage meeles, et brauserite vaikimisi fondi suurused võivad erineda, kuigi 16px on kõige levinum vaikimisi

Praktilised Kasutusalad CSS Ühikute Muundamiseks

Mõ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:

Reageeriv Veebidisain

Ühikute vahel konverteerimine on hädavajalik tõeliselt reageerivate kujunduste loomiseks:

Mobiilisõbralik lähenemine: Alustage aluskujundust pikslites, seejärel konverteerige suhtelisteks ühikuteks skaleeritavuse tagamiseks
Lõikepunktide haldamine: Kasutage REM-e, et tagada järjepidev vahemaa erinevates ekraanide suurustes
Komponentide skaleerimine: Veenduge, et kasutajaliidese elemendid säilitavad proportsionaalsed suhted, kui ekraan muutub

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}
9

Ligipääsetavuse Parandamine

Suhteliste ühikute kasutamine parandab ligipääsetavust, austades kasutaja eelistusi:

Teksti suuruse muutmine: Kui kasutajad muudavad oma brauseri fondi suurust, kohanduvad REM-põhised paigutused vastavalt
Suurendamise funktsionaalsus: Suhtelised ühikud tagavad, et kujundused jäävad proportsionaalseteks, kui kasutajad suurendavad
Kasutaja eelistuste austamine: Suhteliste ühikutega paigutused austavad kasutaja vaikimisi fondi suuruse seadeid

Komponentide Põhised Disainisüsteemid

Kaasaegsed disainisüsteemid saavad kasu läbimõeldud ühikute kasutamisest:

Järjepidevad komponendid: Kasutage REM-e globaalsete vahemaa ja mõõtmete järjepidevuse tagamiseks
Iseseisvad moodulid: Kasutage EM-e elementide jaoks, mis peaksid skaleeruma oma vanemkomponentide järgi
Disainitokenid: Konverteerige ühikud, kui rakendate disainitokene erinevates kontekstides

Tüpograafia Süsteemid

Harmoonilise tüpograafia loomine nõuab hoolikat ühiku valikut:

Tüüpi skaalad: Määrake tüpograafiline skaala REM-ides järjepideva progressiooni jaoks
Reavahed: Kasutage ühikuta väärtusi või EM-e proportsionaalsete reavahede jaoks
Reageeriv tekst: Kohandage fondi suurusi lõikepunktide vahel, säilitades proportsioonid

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 */
8

Pikslite Täpsed Kujundused

Kui rakendate kujundusi tööriistadest nagu Figma või Photoshop:

Kujunduse edastamine: Konverteerige disainifailidest saadud piksliväärtused REM/EM-ks arendamiseks
Täpsuse säilitamine: Veenduge, et vahemaa ja mõõtmed jäävad fikseeritud ühikutega täpseteks
Disainisüsteemi integreerimine: Tõlkige pikslipõhised disainitokenid suhtelisteks ühikuteks

Alternatiivsed CSS Ühikute

Kuigi PX, REM ja EM on kõige levinumad ühikud, on olemas ka alternatiive, mida tasub kaaluda:

Vaateühikud (VW, VH)

VW (vaate laius): 1vw võrdub 1% vaate laiusest
VH (vaate kõrgus): 1vh võrdub 1% vaate kõrgusest
Kasutusala: Looge elemendid, mis skaleeruvad otse vaate suurusega

Protsent (%)

Suhteline vanemelemendi mõõtmete suhtes
Kasutusala: Vedelad paigutused ja reageerivad laiused

CH Ühik

Põhineb "0" tähe laiusel
Kasutusala: Looge konteinerid, millel on kindel tähemärkide arv rea kohta

EX Ühik

Põhineb väikese "x" tähe kõrgusel
Kasutusala: Tüpograafia täpsustamine, eriti x-kõrguse kohandamine

CSS Ühikute Ajalugu Veebiarenduses

CSS-ühikute ajalugu peegeldab laiemat veebidisaini arengut, alates staatilistest paigutustest kuni tänapäevaste reageerivate, ligipääsetavate lähenemisteni.

Varane Veebidisain (1990ndad)

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.

Vedelate Paigutuste Tõus (Varased 2000ndad)

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.

Mobiilirevolutsioon (2007-2010)

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.

Reageeriva Veebidisaini Aeg (2010-2015)

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.

Kaasaegsed CSS Lähenemised (2015-Käesolev Aeg)

Tänapäeva veebiarendus hõlmab erinevate ühikute segu erinevate eesmärkide jaoks:

REM-ühikud globaalsete järjepidevuste ja ligipääsetavuse tagamiseks
EM-ühikud komponentide spetsiifilise skaleerimise jaoks
Pikslid piiride ja väikeste detailide jaoks
Vaateühikud tõeliselt reageerivate elementide jaoks
CSS calc() funktsioon erinevate ühikute tüüpide kombineerimiseks

See areng peegeldab veebis üleminekut dokumentide põhiselt meediumilt keerukate rakenduste platvormile, mis peab töötama lugematute seadmete ja kontekstide kaudu.

Koodinäited Ühikute Konversiooniks

JavaScript Ühikute Muunduri Funktsioonid

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
31

CSS Kohandatud Omadused Ühikute Muundamiseks

1: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}
34

SCSS Miksid Ühikute Muundamiseks

1// 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}
26

Python Ühikute Muundur

1def 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
21

Korduma Kippuvad Küsimused

Mis vahe on REM ja EM-ühikute vahel?

REM (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.

Milline CSS-ühik on parim reageeriva disaini jaoks?

Ühtegi "parimat" ühikut ei ole kõigi olukordade jaoks. Tüüpiliselt on kõige tõhusam ühikute kombinatsioon:

REM-ühikud tüpograafia ja järjepideva vahemaa jaoks
EM-ühikud komponentide spetsiifilise skaleerimise jaoks
Protsendid või vaateühikud paigutuse laiuste jaoks
Pikslid piiride ja väikeste detailide jaoks

Ideaalne lähenemine on kasutada iga ühikut selle parimate omaduste jaoks ühtses süsteemis.

Miks on brauserid vaikimisi 16px fondi suurus?

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.

Kas ma saan nende ühikutega kasutada negatiivseid väärtusi?

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.

Kuidas EM-ühikud töötavad pesastatud elementide 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}
10

See kumuleeriv efekt võib olla kasulik proportsionaalsete kujunduste loomisel, kuid nõuab hoolikat haldamist, et vältida soovimatut skaleerimist.

Kuidas ma käsitlen kõrge DPI (Retina) ekraane CSS-ühikutega?

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.

Kas ma peaksin kasutama REM või EM meedia päringutes?

Brauserite tugi REM- ja EM-ühikutele meedia päringutes on oluliselt paranenud. EM-ühikute kasutamine meedia päringutes on üldiselt soovitatav, kuna:

Need on suhtelised brauseri vaikimisi fondi suurusele
Need austavad kasutaja fondi suuruse eelistusi
Need pakuvad järjepidevaid lõikepunkte erinevates brauserites

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}
9

Kuidas ma konverteerin ühikuid disainitööriistades nagu Figma või Sketch?

Enamik disainitööriistu töötab peamiselt pikslitega. Kujunduste rakendamisel:

Pange tähele oma projekti juure fondi suurust (tavaliselt 16px)
Jagage piksliväärtused juure fondi suurusega, et saada REM-väärtused
EM-väärtuste jaoks jagage vanemelemendi fondi suurusega
Kaaluge disainitokenite või muude muutujate loomist levinud väärtuste jaoks

Mõned disainitööriistad omavad pluginaid, mis aitavad seda konversiooniprotsessi automaatselt.

Kuidas brauserid käsitlevad alampikslite renderdamist suhteliste ühikutega?

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.

Mis on erinevus erinevate CSS-ühikute vahel?

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.

Viidatud Materjalid ja Edasi Lugemine

"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/

Proovige Meie Ühikute Muundurit Täna

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!

PX-st REM-iks EM-i konverter: CSS-i ühikute kalkulaator

PX, REM ja EM ühikute konverter

Konversioonivalemid

Dokumentatsioon