Px vs. Em vs. Rem: millist CSS-i ühikut peaksite kasutama?

Õppite mõnda CSS-i ühikut teksti fondi suuruse kohandamiseks veebilehtede koostamisel. Seal on palju ühikuid, nagu pt, pc, ex jne, kuid enamikul juhtudel peaksite keskenduma kolmele kõige populaarsemale ühikule: px, em ja rem. Paljud arendajad ei saa tavaliselt aru, millised on nende üksuste erinevused; nii et allpool on nende üksuste üksikasjalik selgitus.

Enne jätkamist pange tähele, et ühiku pikkusi on kahte tüüpi: absoluutne ja sugulane.

Absoluutsed pikkused

Absoluutpikkuse ühikud on fikseeritud ja igas neist väljendatud pikkus kuvatakse täpselt selle suurusena.

Absoluutpikkuse mõõtühikuid ei soovitata ekraanil kasutada, kuna ekraani suurused on väga erinevad. Neid saab siiski kasutada, kui väljundkandja on teada, näiteks prinditud paigutuse jaoks.

Suhtelised pikkused

Suhtelise pikkuse ühikud määravad pikkuse teise pikkuse atribuudi suhtes. Suhtelise pikkuse ühikud skaleeruvad paremini erinevate renderduskandjate vahel.

1. Px (piksel)

Pixel on tõenäoliselt CSS-is enimkasutatav üksus ja see on veebilehtedel teksti fondi suuruse määramisel väga populaarne. Üks piksel (1px) on defineeritud kui 1/96 tolli prindikandjal.

Arvutiekraanidel ei ole need aga tavaliselt seotud tegelike mõõtudega, nagu sentimeetrid ja tollid, nagu arvate; need on lihtsalt määratletud kui väikesed, kuid nähtavad. See, mida peetakse nähtavaks, sõltub seadmest.

Erinevate seadmete ekraanidel on erinev pikslite arv tolli kohta, mida nimetatakse pikslitiheduseks. Kui kasutaksite selle seadme sisu suuruse määramiseks seadme ekraanil olevate füüsiliste pikslite arvu, tekiks probleem igas suuruses ekraanidel ühesuguseks muutmisel.

Siin tulebki sisse seadme pikslite suhe. Põhimõtteliselt on see lihtsalt viis arvutada, kui palju ruumi CSS-piksel (1 piksel) seadme ekraanil võtab, mis võimaldab sellel mõne teise seadmega võrreldes sama suur välja näha.

Allpool on näide: -

<div klass="konteiner">
<div>
<h1>See on lõik</h1>
<lk>
 Lorem ipsum, dolor sit amet consectetur adipisicing elit.
 Reprehenderit incidunt perferendis iure veritatis cupiditate delectus
 omnis juures! Officiis praesentium officia, nemo veniam consequatur
 nostrum sunt aliquid ipsam, corporis quas quaerat. Lorem ipsum dolor
 sit amet consectetur adipisicing elit. Hic quam beatae voluptatibus
 amet possimus iure impedit differentio aliquid debitis, autem
 vel ullam aut, quod corporis ratione atque ducimus dolorum.
</lk>
</div>
</div>

.konteiner {
 laius: 100%;
 kõrgus: 100vh;
 ekraan: flex;
 õigustama-sisu: keskpunkt;
 joonda-elemendid: keskel;
}
.konteinerdiv {
 maksimaalne laius: 500 pikslit;
 polsterdus: 5px 20px;
 ääris: 1px hall tahke;
 piiri raadius: 10 pikslit;
}
p {
 fondi suurus: 16 pikslit;
}

väljund

Ülemine kast näitab, kuidas see välja näeb, kui see kuvatakse suuremal ekraanil, näiteks sülearvuti, ja alumine kast on see, kuidas see välja näeb kui kuvatakse väiksemal ekraanil, näiteks telefonis.

Pange tähele, kuidas mõlemas kastis olev tekst on sama suurusega. Põhimõtteliselt toimib piksel nii. See aitab veebisisul (mitte ainult tekstil) kõigis seadmetes sama suurusega välja näha.

2. Em (M)

Üksus em sai oma nime suurest M-tähest (em), kuna enamik CSS-i ühikuid on pärit tüpograafiast. See kasutab oma alusena vanemelemendi praegust fondi suurust. Seda saab kasutada elemendi fondi suuruse suurendamiseks või vähendamiseks vanemalt päritud fondi suuruse alusel.

Oletame, et teil on ülem-div, mille fondi suurus on 16 pikslit. Kui loote selles jaotises lõigu elemendi ja määrate sellele fondi suuruseks 1 em, on lõigu fondi suurus 16 pikslit.

Kui aga annate mõnele teisele lõigule fondi suuruseks 2em, tõlgitakse 32 pikslit. Kaaluge allolevat näidet:

<div klass="div-one">
<p klass="üks-em">1 em 10 piksli põhjal</lk>
<p klass="kahe-em">2 em 10 piksli põhjal</lk>
</div>
<div klass="div-kaks">
<p klass="üks-em">1 em 10 piksli põhjal</lk>
<p klass="kahe-em">2 em 10 piksli põhjal</lk>
</div>
</div>

.div-one {
 fondi suurus: 15 pikslit;
}
.div-kaks {
 fondi suurus: 20 pikslit;
}
.üks-em {
 fondi suurus: 1 em;
}
.kaks-em {
 fondi suurus: 2 em;
}

väljund

Näete, kuidas need saavad teksti suurust suurendada ja kuidas seda mõjutab ülemkonteinerist päritud praegune fondi suurus. Neid ei ole soovitatav kasutada, eriti keerulise struktuuriga lehtedel.

Kui seda ei kasutata õigesti, võivad tekkida skaleerimisprobleemid, mille puhul ei pruugita DOM-puu suuruste keerulise pärilikkuse tõttu elementide suurust õigesti määrata.

3. Rem (Root Em)

Rem töötab peaaegu samamoodi nagu em, kuid peamine erinevus seisneb selles, et rem viitab ainult lehe juurelemendi fondi suurusele, mitte vanema fondi suurusele. Juurfondi suurus on vaikefondi suurus, mille on määranud kasutaja oma brauseri seadetes või teie, arendaja.

Veebibrauseri vaikimisi fondi suurus on tavaliselt 16 pikslit, seega 1 rem on 16 pikslit ja 2 rem 32 pikslit. Kuid juhul, kui juurfondi suuruseks muudetakse näiteks 10 pikslit; 1 rem on 10 pikslit ja 2 rem on 20 pikslit.

Siin on näide asja selgemaks muutmiseks:

<div klass="div-one">
<!-- EM -->
<p klass="üks-em">1 em konteineri põhjal (40 pikslit)</lk>
<p klass="kahe-em">2 em konteineri põhjal (40 pikslit)</lk>
<!-- REM -->
<p klass="ühe-rem">1 rem juurpõhiselt (16 pikslit)</lk>
<p klass="kahe-rem">2 rem juurte põhjal (16 pikslit)</lk>
</div>

.div-one {
 fondi suurus: 40 pikslit;
}
.üks-em {
 fondi suurus: 1 em;
}
.kaks-em {
 fondi suurus: 2 em;
}
.üks-rem {
 fondi suurus: 1rem;
}
.kahe-rem {
 fondi suurus: 2rem;
}

väljund

Nagu näete, on REM-ühikutega määratletud lõigud täielikult meie konteineris deklareeritud fondi suurusest häiritud ja need renderdatakse rangelt vastavalt HTML-i elementide valijas määratletud juurfondi suurus.

Px vs. Em vs. Rem: milline seade on parim?

Em pole soovitatav, kuna pesastatud elementide hierarhia võib olla keeruline. REM-i skaleeritakse tavaliselt vastavalt brauseri sätetes määratud uue vaike-/baasfondi suurusega, mitte PX-ile. See selgitab, miks peaksite oma veebilehtedel tekstisisuga töötades kasutama REM-i. REM võidab võistluse. Sisu parem stiil ja skaleerimine REM-iga lisab teie saidile elegantsi, kuna see sobib ideaalselt veebisaitide loojatele. Teie sisu täpsed mõõtmised määravad teie veebisaidi välimuse ja tunnetuse, kuid peate olema loominguline.