Px vs. Em vs. Rem: kuru CSS vienību vajadzētu izmantot?

Jūs apgūsit dažas CSS vienības teksta fonta lieluma pielāgošanai, veidojot tīmekļa lapas. Ir daudz vienību, piemēram, pt, pc, ex utt., taču vairumā gadījumu jums vajadzētu koncentrēties uz trim populārākajām vienībām: px, em un rem. Daudzi izstrādātāji parasti nesaprot, kādas ir atšķirības starp šīm vienībām; tāpēc tālāk ir sniegts detalizēts šo vienību skaidrojums.

Pirms turpināt, ņemiet vērā, ka ir divu veidu vienības garumi: absolūts un radinieks.

Absolūtie garumi

Absolūtā garuma mērvienības ir fiksētas, un garums, kas izteikts jebkurā no tām, tiks parādīts kā tieši šis izmērs.

Absolūtā garuma mērvienības nav ieteicamas lietošanai uz ekrāna, jo ekrāna izmēri ir ļoti atšķirīgi. Tomēr tos var izmantot, ja ir zināms izvades datu nesējs, piemēram, drukātam izkārtojumam.

Relatīvie garumi

Relatīvā garuma vienības norāda garumu attiecībā pret citu garuma rekvizītu. Relatīvā garuma vienības labāk mērogojas dažādās renderēšanas vidēs.

1. pikseļi (pikseļi)

Pixel, iespējams, ir visvairāk izmantotā vienība CSS, un tā ir ļoti populāra, ja runa ir par teksta fonta lieluma iestatīšanu tīmekļa lapās. Viens pikselis (1 pikselis) ir definēts kā 1/96 collas drukas materiālā.

Tomēr datoru ekrānos tie parasti nav saistīti ar faktiskajiem mērījumiem, piemēram, centimetriem un collām, kā jūs varētu domāt; tie ir tikai definēti kā mazi, bet redzami. Tas, kas tiek uzskatīts par redzamu, ir atkarīgs no ierīces.

Dažādu ierīču ekrānos ir atšķirīgs pikseļu skaits collā, ko sauc par pikseļu blīvumu. Ja izmantotu fizisko pikseļu skaitu ierīces ekrānā, lai noteiktu šīs ierīces satura lielumu, jums varētu rasties problēma, lai visu izmēru ekrānos izskatītos vienādi.

Šeit tiek izmantota ierīces pikseļu attiecība. Būtībā tas ir tikai veids, kā aprēķināt, cik daudz vietas ierīces ekrānā aizņems CSS pikseļi (1 pikseļi), kas ļaus tam izskatīties tāda paša izmēra salīdzinājumā ar citu ierīci.

Zemāk ir piemērs: -

<div klase="konteiners">
<div>
<h1>Šī ir rindkopa</h1>
<lpp>
 Lorem ipsum, dolor sit amet consectetur adipisicing elit.
 Reprehenderit incidunt perferendis iure veritatis cupiditate delectus
 omnis pie! 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 uzņemties atšķirības aliquid debitis, autem
 vel ullam aut, quod corporis ratione atque ducimus dolorum.
</lpp>
</div>
</div>

.konteiners {
 platums: 100%;
 augstums: 100vh;
 displejs: flex;
 attaisnot-saturs: centrs;
 izlīdzināt vienumus: centrs;
}
.konteinersdiv {
 maksimālais platums: 500 pikseļi;
 polsterējums: 5 pikseļi 20 pikseļi;
 apmale: 1 px pelēka cieta krāsa;
 apmales rādiuss: 10 pikseļi;
}
p {
 fonta izmērs: 16 pikseļi;
}

izvade

Augšējā lodziņā ir redzams, kā tas izskatās, kad tas tiek rādīts lielākā ekrānā, piemēram, klēpjdatorā, un apakšējā lodziņā kad tas tiek rādīts mazākā ekrānā, piemēram, tālrunī.

Ņemiet vērā, kā teksts abos lodziņos ir vienāda izmēra. Pamatā pikseļi darbojas. Tas palīdz tīmekļa saturam (ne tikai tekstam) visās ierīcēs izskatīties vienāda izmēra.

2. Em (M)

em vienība savu nosaukumu ieguvusi no lielā burta “M” (em), jo lielākā daļa CSS vienību nāk no tipogrāfijas. Par pamatu tas izmanto vecākelementa pašreizējo fonta lielumu. To var izmantot, lai palielinātu vai samazinātu elementa fonta lielumu, pamatojoties uz fonta lielumu, kas mantots no vecāka.

Pieņemsim, ka jums ir vecākais div, kura fonta lielums ir 16 pikseļi. Ja izveidojat rindkopas elementu šajā div un piešķirat tam fonta lielumu 1 em, rindkopas fonta lielums būs 16 pikseļi.

Tomēr, ja piešķirat citai rindkopai fonta lielumu 2em, kas nozīmē 32 pikseļus. Apsveriet tālāk sniegto piemēru:

<div klase="div-one">
<p klase="viens-em">1 em, pamatojoties uz 10 pikseļiem</lpp>
<p klase="divi-em">2 em, pamatojoties uz 10 pikseļiem</lpp>
</div>
<div klase="div-divi">
<p klase="viens-em">1 em, pamatojoties uz 10 pikseļiem</lpp>
<p klase="divi-em">2 em, pamatojoties uz 10 pikseļiem</lpp>
</div>
</div>

.div-one {
 fonta izmērs: 15 pikseļi;
}
.div-two {
 fonta izmērs: 20 pikseļi;
}
.viens-em {
 fonta izmērs: 1em;
}
.divi-em {
 fonta izmērs: 2em;
}

izvade

Varat redzēt, kā em var palielināt teksta lielumu un kā to ietekmē pašreizējais fonta lielums, kas mantots no vecākkonteinera. Nav ieteicams tos izmantot, jo īpaši sarežģītās strukturētās lapās.

Ja tos neizmanto pareizi, var rasties mērogošanas problēmas, kuru dēļ elementi var nebūt pareizi izmērīti, pamatojoties uz sarežģītu izmēru pārmantošanu DOM kokā.

3. Rem (Root Em)

Rem darbojas gandrīz tāpat kā em, taču galvenā atšķirība ir tā, ka rem atsaucas tikai uz lapas saknes elementa fonta lielumu, nevis uz vecākfonta lielumu. Saknes fonta lielums ir noklusējuma fonta lielums, ko norādījis lietotājs pārlūkprogrammas iestatījumos vai jūs, izstrādātājs.

Tīmekļa pārlūkprogrammas noklusējuma fonta lielums parasti ir 16 pikseļi, tāpēc 1 rem būs 16 pikseļi un 2 rem — 32 pikseļi. Tomēr gadījumā, ja saknes fonta lielums tiek mainīts, piemēram, uz 10 pikseļiem; 1 rem būs 10 pikseļi un 2 rem būs 20 pikseļi.

Šeit ir piemērs, lai lietas būtu skaidrākas:

<div klase="div-one">
<! -- EM -->
<p klase="viens-em">1 em, pamatojoties uz konteineru (40 pikseļi)</lpp>
<p klase="divi-em">2 em, pamatojoties uz konteineru (40 pikseļi)</lpp>
<!-- REM -->
<p klase="viens-rem">1 rem, pamatojoties uz sakni (16 pikseļi)</lpp>
<p klase="divu rem">2 rem, pamatojoties uz sakni (16 pikseļi)</lpp>
</div>

.div-one {
 fonta izmērs: 40 pikseļi;
}
.viens-em {
 fonta izmērs: 1em;
}
.divi-em {
 fonta izmērs: 2em;
}
.viens-rem {
 fonta izmērs: 1 rem;
}
.divu-rem {
 fonta izmērs: 2rem;
}

izvade

Kā redzat, rindkopas, kas definētas ar REM vienībām, pilnībā neietekmē mūsu konteinerā norādītais fonta lielums, un tās ir stingri atveidotas attiecībā pret saknes fonta lielums, kas definēts HTML elementu atlasītājā.

Px vs. Em vs. Rem: Kura vienība ir labākā?

Em nav ieteicams, jo var būt sarežģīta ligzdotu elementu hierarhija. REM parasti tiek atbilstoši mērogots ar jauno noklusējuma/pamata fonta lielumu, kas norādīts pārlūkprogrammas iestatījumos, nevis PX. Tas izskaidro, kāpēc jums vajadzētu izmantot REM, strādājot ar teksta saturu savās tīmekļa lapās. REM uzvar sacīkstēs. Labāka satura veidošana un mērogošana, izmantojot REM, piešķir jūsu vietnei eleganci, jo tā ir ideāli piemērota vietņu veidotājiem. Vietas satura mērījumi noteiks jūsu vietnes izskatu un darbību, tomēr jums būs jākļūst radošam.