Px vs. Em vs. Rem: Ce unitate CSS ar trebui să utilizați?

Veți învăța câteva unități CSS pentru a personaliza dimensiunea fontului textului atunci când construiți pagini web. Există multe unități, cum ar fi pt, pc, ex etc., dar în majoritatea cazurilor ar trebui să vă concentrați pe cele mai populare trei unități: px, em și rem. Mulți dezvoltatori nu înțeleg de obicei care sunt diferențele dintre aceste unități; deci, mai jos este o explicație detaliată a acestor unități.

Înainte de a continua, rețineți că există două tipuri de lungimi de unități: absolut și relativ.

Lungimi absolute

Unitățile de lungime absolută sunt fixe și o lungime exprimată în oricare dintre acestea va apărea exact ca dimensiunea respectivă.

Unitățile de lungime absolută nu sunt recomandate pentru utilizare pe ecran, deoarece dimensiunile ecranului variază foarte mult. Cu toate acestea, ele pot fi utilizate dacă mediul de ieșire este cunoscut, cum ar fi pentru un aspect tipărit.

Lungimi relative

Unitățile de lungime relativă specifică o lungime relativă la o altă proprietate de lungime. Unitățile de lungime relativă se scalează mai bine între diferitele medii de randare.

1. Px (Pixel)

Pixel este probabil cea mai folosită unitate în CSS și sunt foarte populare atunci când vine vorba de setarea dimensiunii fontului textului pe paginile web. Un pixel (1px) este definit ca 1/96 de inch în suportul de imprimare.

Cu toate acestea, pe ecranele computerelor, acestea nu sunt de obicei legate de măsurători reale, cum ar fi centimetri și inci, așa cum ați putea crede; sunt doar definite ca fiind mici, dar vizibile. Ceea ce este considerat vizibil depinde de dispozitiv.

Dispozitivele diferite au un număr diferit de pixeli pe inch pe ecranele lor, ceea ce este cunoscut sub numele de densitate de pixeli. Dacă ați folosit numărul de pixeli fizici de pe ecranul unui dispozitiv pentru a determina dimensiunea conținutului de pe acel dispozitiv, ați avea o problemă ca lucrurile să arate la fel pe ecranele de toate dimensiunile.

Aici intervine raportul de pixeli al dispozitivului. În esență, este doar o modalitate de a calcula cât spațiu va ocupa un pixel CSS (1px) pe ecranul dispozitivului, ceea ce îi va permite să arate aceeași dimensiune în comparație cu un alt dispozitiv.

Mai jos este un exemplu: -

<div class="recipient">
<div>
<h1>Acesta este un paragraf</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 assumenda distinctio aliquid debitis, autem
 vel ullam aut, quod corporis ratione atque ducimus dolorum.
</p>
</div>
</div>

.container {
 latime: 100%;
 inaltime: 100vh;
 display: flex;
 justificare-conținut: centru;
 alinierea elementelor: centru;
}
.containerdiv {
 lățime maximă: 500px;
 umplutură: 5px 20px;
 chenar: 1px gri solid;
 chenar-rază: 10px;
}
p {
 dimensiunea fontului: 16px;
}

ieșire

Caseta de sus este așa cum arată când este afișată pe un ecran mai mare precum un laptop, iar caseta de jos este așa cum arată când este afișat pe un ecran mai mic, cum ar fi un telefon.

Observați cum textul din ambele casete este de aceeași dimensiune. Practic, așa funcționează pixelul. Ajută conținutul web (nu doar textul) să arate aceeași dimensiune pe dispozitive.

2. Em (M)

Unitatea em și-a primit numele de la litera mare „M” (em), deoarece majoritatea unităților CSS provin din tipografie. Folosește dimensiunea fontului curent a elementului părinte ca bază. Poate fi folosit pentru a mări sau reduce dimensiunea fontului unui element pe baza mărimii fontului moștenit de la părinte.

Să presupunem că aveți un div părinte care are o dimensiune a fontului de 16 px. Dacă creați un element paragraf în acel div și îi dați o dimensiune a fontului de 1em, dimensiunea fontului paragrafului va fi de 16px.

Cu toate acestea, dacă dați unui alt paragraf dimensiunea fontului de 2em care se va traduce la 32px. Luați în considerare exemplul de mai jos:

<div class="div-unu">
<clasa p="unul-em">1 em bazat pe 10px</p>
<clasa p="doi-em">2 em bazate pe 10px</p>
</div>
<div class="div-doi">
<clasa p="unul-em">1 em bazat pe 10px</p>
<clasa p="doi-em">2 em bazate pe 10px</p>
</div>
</div>

.div-unu {
 dimensiunea fontului: 15px;
}
.div-doi {
 dimensiunea fontului: 20px;
}
.one-em {
 dimensiunea fontului: 1em;
}
.două-em {
 dimensiunea fontului: 2em;
}

ieșire

Puteți vedea cum poate mări dimensiunea textului și cum este afectat de dimensiunea curentă a fontului moștenit de la containerul părinte. Nu este recomandabil să le folosiți, mai ales în cadrul paginilor structurate complexe.

Dacă nu este utilizat în mod corespunzător, este posibil să întâmpinați probleme de scalare în care elementele ar putea să nu fie dimensionate corespunzător pe baza unei moșteniri complexe de dimensiuni în arborele DOM.

3. Rem (Root Em)

Rem funcționează aproape la fel ca em, dar principala diferență este că rem face referire doar la dimensiunea fontului elementului rădăcină de pe pagină, mai degrabă decât la dimensiunea fontului părintelui. Mărimea fontului rădăcină este dimensiunea fontului implicită specificată fie de utilizator în setările browserului, fie de dvs., dezvoltatorul.

Dimensiunea implicită a fontului a unui browser web este de obicei de 16 px, prin urmare 1 rem va fi de 16 px și 2 rem va fi de 32 px. Cu toate acestea, într-un caz în care dimensiunea fontului rădăcină este schimbată la 10px, de exemplu; 1 rem va fi de 10 pixeli și 2 rem va fi de 20 de pixeli.

Iată un exemplu pentru a clarifica lucrurile:

<div class="div-unu">
<!-- EM -->
<clasa p="unul-em">1 em bazat pe container (40px)</p>
<clasa p="doi-em">2 em pe baza containerului (40px)</p>
<!-- REM -->
<clasa p="one-rem">1 rem bazat pe rădăcină (16px)</p>
<clasa p="doi-rem">2 rem pe bază de rădăcină (16px)</p>
</div>

.div-unu {
 dimensiunea fontului: 40px;
}
.one-em {
 dimensiunea fontului: 1em;
}
.două-em {
 dimensiunea fontului: 2em;
}
.one-rem {
 dimensiunea fontului: 1rem;
}
.două-rem {
 dimensiunea fontului: 2rem;
}

ieșire

După cum puteți vedea, paragrafele definite cu unitățile REM sunt complet netulburate de dimensiunea fontului declarată în containerul nostru și sunt redate strict în raport cu dimensiunea fontului rădăcină definită în selectorul de elemente HTML.

Px vs. Em vs. Rem: Care unitate este cea mai bună?

Em nu este recomandat din cauza posibilității de a avea o ierarhie complexă de elemente imbricate. REM este de obicei scalat corespunzător cu noua dimensiune implicită/de bază a fontului specificată în setările browserului, spre deosebire de PX. Aceasta explică de ce ar trebui să utilizați REM atunci când lucrați cu conținut text pe paginile dvs. web. REM câștigă cursa. O mai bună stilizare și scalare a conținutului dvs. cu REM adaugă fler site-ului dvs., deoarece este ideal pentru creatorii de site-uri web. Măsurătorile punctuale ale conținutului dvs. vor dicta aspectul site-ului dvs., cu toate acestea, va trebui să fiți creativ.