Px vs. Em vs. Rem: kurį CSS vienetą turėtumėte naudoti?

Išmoksite keletą CSS vienetų, kaip tinkinti teksto šrifto dydį kuriant tinklalapius. Yra daug vienetų, pvz., pt, pc, ex ir kt., tačiau daugeliu atvejų turėtumėte sutelkti dėmesį į tris populiariausius vienetus: px, em ir rem. Daugelis kūrėjų paprastai nesupranta, kuo skiriasi šie įrenginiai; taigi, toliau pateikiamas išsamus šių vienetų paaiškinimas.

Prieš tęsdami atminkite, kad yra dviejų tipų vienetų ilgiai: absoliutus ir giminaitis.

Absoliutūs ilgiai

Absoliutaus ilgio vienetai yra fiksuoti, o ilgis, išreikštas bet kuriuo iš jų, bus rodomas kaip tiksliai tokio dydžio.

Absoliutaus ilgio vienetų nerekomenduojama naudoti ekrane, nes ekrano dydžiai labai skiriasi. Tačiau juos galima naudoti, jei žinoma išvesties laikmena, pvz., spausdintam maketui.

Santykiniai ilgiai

Santykinio ilgio vienetai nurodo ilgį, palyginti su kita ilgio ypatybe. Santykinio ilgio vienetai geriau pritaikyti skirtingoms atvaizdavimo terpėms.

1. Px (pikselių)

„Pixel“ yra tikriausiai dažniausiai naudojamas CSS vienetas ir yra labai populiarus nustatant teksto šrifto dydį tinklalapiuose. Vienas pikselis (1 pikselis) apibrėžiamas kaip 1/96 colio spausdinimo laikmenoje.

Tačiau kompiuterių ekranuose jie paprastai nesusiję su faktiniais matmenimis, pvz., centimetrais ir coliais, kaip jūs manote; jie tiesiog apibrėžiami kaip maži, bet matomi. Tai, kas laikoma matoma, priklauso nuo įrenginio.

Skirtingų įrenginių ekranuose yra skirtingas pikselių skaičius colyje, kuris vadinamas pikselių tankiu. Jei tame įrenginyje esančio turinio dydžiui nustatyti naudotumėte fizinių pikselių skaičių įrenginio ekrane, kiltų problemų, kad viskas atrodytų vienodai visų dydžių ekranuose.

Čia atsiranda įrenginio pikselių santykis. Iš esmės tai tik būdas apskaičiuoti, kiek vietos CSS pikselis (1 pikselis) užims įrenginio ekrane, todėl jis atrodys tokio paties dydžio, palyginti su kitu įrenginiu.

Žemiau yra pavyzdys: -

<div klasė ="konteineris">
<div>
<h1>Tai pastraipa</h1>
<p>
 Lorem ipsum, dolor sit amet consectetur adipisicing elit.
 Reprehenderit incidunt perferendis iure veritatis cupiditate delectus
 omnis at! 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.
</p>
</div>
</div>

.konteineris {
 plotis: 100%;
 aukštis: 100vh;
 ekranas: lankstus;
 pateisinti-turinys: centras;
 lygiuoti elementus: centre;
}
.konteinerisdiv {
 maksimalus plotis: 500 pikselių;
 paminkštinimas: 5px 20px;
 kraštinė: 1px pilka kieta;
 kraštinės spindulys: 10 pikselių;
}
p {
 šrifto dydis: 16 pikselių;
}

išvestis

Viršutinis langelis rodo, kaip jis atrodo rodomas didesniame ekrane, pavyzdžiui, nešiojamajame kompiuteryje, o apatinis langelis – kaip jis atrodo kai rodomas mažesniame ekrane, pavyzdžiui, telefone.

Atkreipkite dėmesį, kaip tekstas abiejuose laukeliuose yra tokio pat dydžio. Iš esmės taip veikia pikselis. Tai padeda žiniatinklio turiniui (ne tik tekstui) atrodyti vienodo dydžio visuose įrenginiuose.

2. Em (M)

em vienetas gavo savo pavadinimą iš didžiosios raidės „M“ (em), nes dauguma CSS vienetų kilę iš tipografijos. Jis naudoja dabartinį pagrindinio elemento šrifto dydį kaip pagrindą. Jis gali būti naudojamas norint padidinti arba sumažinti elemento šrifto dydį pagal šrifto dydį, paveldėtą iš pirminio.

Tarkime, kad turite pirminį div, kurio šrifto dydis yra 16 pikselių. Jei tame div sukuriate pastraipos elementą ir suteikiate jam 1 em šrifto dydį, pastraipos šrifto dydis bus 16 pikselių.

Tačiau, jei nurodysite kitą pastraipą, šrifto dydis yra 2em, kuris bus išverstas į 32 pikselius. Apsvarstykite toliau pateiktą pavyzdį:

<div klasė ="div-one">
<p klasė ="vienas-em">1 em pagal 10 piks</p>
<p klasė ="du-em">2 em pagal 10 piks</p>
</div>
<div klasė ="div-du">
<p klasė ="vienas-em">1 em pagal 10 piks</p>
<p klasė ="du-em">2 em pagal 10 piks</p>
</div>
</div>

.div-one {
 šrifto dydis: 15 pikselių;
}
.div-du {
 šrifto dydis: 20 pikselių;
}
.vienas {
 šrifto dydis: 1 em;
}
.du-em {
 šrifto dydis: 2em;
}

išvestis

Galite pamatyti, kaip jie gali padidinti teksto dydį ir kaip jį veikia dabartinis šrifto dydis, paveldėtas iš pirminio sudėtinio rodinio. Nepatartina jų naudoti, ypač sudėtingos struktūros puslapiuose.

Jei jie naudojami netinkamai, galite susidurti su mastelio keitimo problemomis, kai dėl sudėtingo DOM medžio dydžių paveldėjimo elementų dydis gali būti netinkamas.

3. Rem (Root Em)

Rem veikia beveik taip pat kaip em, tačiau pagrindinis skirtumas yra tas, kad rem nurodo tik pagrindinio puslapio elemento šrifto dydį, o ne pirminio šrifto dydį. Šakninis šrifto dydis yra numatytasis šrifto dydis, kurį nurodo vartotojas savo naršyklės nustatymuose arba jūs, kūrėjas.

Numatytasis interneto naršyklės šrifto dydis paprastai yra 16 pikselių, todėl 1 rem bus 16 pikselių, o 2 rem – 32 pikselių. Tačiau tuo atveju, kai, pavyzdžiui, šakninio šrifto dydis pakeičiamas į 10 pikselių; 1 rem bus 10 pikselių, o 2 rem – 20 pikselių.

Štai pavyzdys, kad viskas būtų aiškiau:

<div klasė ="div-one">
<! -- EM -->
<p klasė ="vienas-em">1 em pagal sudėtinį rodinį (40 piks.)</p>
<p klasė ="du-em">2 em pagal konteinerį (40 piks.)</p>
<! -- REM -->
<p klasė ="viena-rem">1 rem pagal šaknį (16 pikselių)</p>
<p klasė ="dviejų rem">2 rem pagal šaknį (16 pikselių)</p>
</div>

.div-one {
 šrifto dydis: 40 pikselių;
}
.vienas {
 šrifto dydis: 1 em;
}
.du-em {
 šrifto dydis: 2em;
}
.vienas-rem {
 šrifto dydis: 1 rem;
}
.dviejų rem {
 šrifto dydis: 2rem;
}

išvestis

Kaip matote, pastraipos, apibrėžtos naudojant REM vienetus, visiškai nepažeidžiamos dėl šrifto dydžio, nurodyto mūsų konteineryje ir yra pateikiamos griežtai atsižvelgiant į šakninio šrifto dydis, apibrėžtas HTML elementų parinkiklyje.

Px vs. Em vs. Rem: Kuris įrenginys yra geriausias?

Em nerekomenduojama, nes gali būti sudėtinga įdėtųjų elementų hierarchija. REM paprastai yra atitinkamai keičiamas naudojant naują numatytąjį / pagrindinį šrifto dydį, nurodytą naršyklės nustatymuose, o ne PX. Tai paaiškina, kodėl turėtumėte naudoti REM, kai dirbate su tekstiniu turiniu savo tinklalapiuose. REM laimi lenktynes. Geresnis turinio stilius ir mastelio keitimas naudojant REM suteikia jūsų svetainei nuotaiką, nes ji idealiai tinka svetainių kūrėjams. Tiksliai įvertinus turinį, priklausys jūsų svetainės išvaizda ir pojūtis, tačiau turėsite būti kūrybingi.