Dacă deschideți orice foaie de stil de site, veți întâlni rems, ems sau pixeli sau orice combinație a acestora. În stilul CSS, acestea sunt principalele unități de măsură care sunt utilizate. Fie că proiectați un site de la zero, fie dacă ați „moștenit” un site proiectat anterior pe care trebuie să îl întrețineți, acestea sunt importante pentru tipografie, spațiere și alte dimensiuni în designul vizual.

Ce face ca o unitate de măsură să fie mai bună decât alta? Nu există un răspuns cert și, în funcție de situație, ar putea fi preferat unul față de altul. Cunoașterea cazului de utilizare și a ceea ce va funcționa cel mai bine va ajuta la determinarea celei mai bune măsurători pentru stilul dvs.

Pixeli

Încă din primele zile ale internetului, pixelii au fost o opțiune care se găsește în foile de stil peste tot. Sunt fiabile, precise, iar consistența lor nu poate fi egalată. Pixelii sunt acceptați în toate browserele, ceea ce îi face ușor de utilizat.

Deși pixelii sunt grozavi, au unele limitări. Deoarece sunt o măsurătoare atât de setată, utilizatorii nu pot schimba dimensiunea textului implicit al browserului în setările browserului. Lucrurile nu se extind așa cum se întâmplă cu ems și rems, făcând dificilă schimbarea dimensiunii din punct de vedere al accesibilității pentru utilizator. Se poate argumenta că un utilizator poate doar să mărească, mai degrabă decât să intre în setările browserului. Nu există niciun răspuns corect sau greșit, este doar ceva de reținut.

Ce sunt ei?

Pixelii sunt o unitate de măsură care se bazează pe dimensiunea setată. Sunt unitatea de măsurare a dimensiunilor pe un ecran și sunt utilizate atunci când este necesar un proiect precis. Spunem lucruri precum „rezoluția pixelilor”, așa că suntem obișnuiți cu această măsurătoare.

Un exemplu ar arăta cam așa:

.main-header p {
font-size: 14px;
}

Pixelii își au utilizarea în design web, dar în era designului web agnostic al dispozitivelor, măsurătorile ecranului nu sunt principalul obiectiv. Totul este despre cum să facem ca conținutul nostru să se potrivească cel mai bine pe nenumărate dispozitive, așa că există ems și rems care pot ajuta cu asta.

Ems

Această unitate de măsură are o istorie lungă. Merge din 1996 și există încă din primele zile ale CSS. Pixelii au fost considerați a fi cea mai bună practică, așa că ems nu erau la fel de populari în acele timpuri. De atunci, au câștigat popularitate deoarece scopul lor este de a servi ca o unitate care este relativă la dimensiunea fontului în conținut specific și ajută la consecvență.

Ce sunt ei?

Dacă ești pasionat de tipografia clasică, probabil că i-ai recunoscut, deoarece este o unitate de măsură care provine din lumea tipăritului. Folosind aceasta ca unitate în tipografie, această măsurătoare este egală cu dimensiunea punctului specificată în prezent. De exemplu, un em într-un tip de literă cu 16 puncte este de 16 puncte. Această unitate este aceeași pentru toate fonturile la o anumită dimensiune a punctului.

Nu vorbim despre tipărire aici, așa că cum se regăsește ems în design web? Dimensiunea relativă este un mare argument de vânzare pentru ems, deoarece ajută la controlul dimensionării elementelor în raport cu altele. Ems poate funcționa ca blocuri grozave pentru elementele site-ului, datorită faptului că em valorează compusul. Este important să înțelegeți cu adevărat cum funcționează această combinare.

Înțelegerea ems

În cele mai multe cazuri, cu excepția cazului în care browserul implicit este setat la altceva, un em are 16 px. Când vezi 1,5 em, asta ar face 24 de pixeli. Totuși, nu este întotdeauna atât de simplu. Ce se întâmplă când este implicată cuibărirea? Poate fi atât convenabil, cât și confuz. A ști cum funcționează lucrurile atunci când lucrezi cu ems va ajuta cu siguranță la rezolvarea oricărui mister. Care este dimensiunea paragrafului „Sunt imbricat” de mai jos?

<div class="one">
<div class="two">
<div class="three">
<p>I’m nested</p>
</div>
</div>
</div>

.one, .two {

font-size: 0.5em;

}

.three {

font-size: 2em;

}

Există trei div aici, iar paragraful este destul de imbricat. Odată cu cascada DOM-ului, este posibil să fii nevoit să faci ceva detectiv. Să presupunem că lucrăm cu un em de 16px, deoarece acesta este cel mai frecvent.

Clasa .one înmulțește 1em cu 0,5, care este 0,5 em sau 8 px. Cu clasa .two , aceasta se înmulțește din nou cu 0,5, adică .25 em sau 4px. Lucrurile devin destul de mici, așa că clasa de .three va ajuta. Vom lua 0,25 em și îl vom înmulți cu 2. Rezultatul este 0,5 em sau 8px.

Un lucru care poate ajuta este setarea unei dimensiuni pentru elementul HTML. Ceva de genul acesta va specifica dimensiunea em setată, în loc să se bazeze pe em setată de browser. Să setăm 1 em la 20px. Dacă aceasta a fost folosită cu exemplul de mai sus, s-ar aplica aceleași principii cu imbricarea. Rețineți totuși că am specificat o dimensiune a pixelilor, astfel încât aceasta va afecta capacitatea de a scala textul utilizând opțiunea de setare a browserului.

html {

font-size: 20px;

}

Pe lângă pixeli, dimensiunea fontului poate fi setată și cu un procent. Ideea este că ems poate funcționa alături de alte unități de măsură. Cu siguranță veți întâlni acest lucru, deoarece este destul de comun să setați fontul corpului la un procent pentru a ajuta la stabilirea unei linii de bază. Să presupunem că dimensiunea fontului începe cu 62,5% din dimensiunea em. Cu o dimensiune em de 16 px, dimensiunea fontului ar fi de 10 px.

body {

font-size:62.5%;

}

Odată ce ați înțeles, ems poate fi un bun atu pentru proiectul dvs. Dimensionarea textului subelementelor la elementele lor părinte poate fi cu siguranță utilă. De asemenea, ems facilitează specificarea unei umpluturi mai mari pe containerul de text decât ceea ce poate fi găsit în spațierea cuvintelor, făcându-l să urmeze regula vizuală a proximității. Articolele înrudite vor fi grupate vizual, cu mai puțină dezordine și vor oferi un aspect organizat.

O altă caracteristică excelentă a ems sunt avantajele de accesibilitate. Deoarece este relativ la rădăcina DOM, ems îl face perfect pentru redimensionarea întregului design în funcție de preferințele utilizatorului. În preferințele browserului, puteți modifica cu ușurință dimensiunea implicită a fontului, care apoi schimbă calculele, în ems, la întregul site.

Rems

Ce sunt ei?

Rems sunt o adăugare destul de recentă la cronologia CSS. Această unitate de măsură a fost introdusă cu CSS3 și rezolvă unele dintre problemele legate de pixeli și ems. Cu un nume similar cu „ems”, s-ar putea să vă întrebați ce înseamnă „r”. Provine de la termenul „Root EM”.

Rădăcina este elementul HTML. Dimensiunea specificată pe elementul HTML este baza pentru această măsurare. Veți vedea că am folosit dimensionarea em pe elementul HTML; este în regulă să combinați cele două tipuri de măsurare.

html {
font-size: 1em;
}

.one {
font-size: 1.2rem; /* 1.2 x the value set in html */
}

Browserele moderne acceptă rems, dar asigurați-vă că verificați cu BrowserStack ce browsere mai vechi trebuie să suportați înainte de a vă angaja în rems. Totuși, nu lăsați browserele mai vechi să vă rețină; puteți specifica oricând un pixel de rezervă pentru orice lucru sub IE9. Browserele moderne ignoră pixelii pentru că preferă rems. Ar putea arata cam asa:

.my-text {

font-size: 24px;

font-size: 1.5rem;

}

Înțelegerea rems

Îți amintești de matematica pe care a trebuit să le facem pentru elementele imbricate ale ems? Asta nu este necesar cu rems. Totul se bazează pe acel element rădăcină. Nu trebuie să ne îngrijorăm cu privire la elementele părinte, se bazează întotdeauna pe rădăcină.

<div class="one">
<div class="two">
<div class="three">
<p>I’m nested</p>
</div>
</div>
</div>

html {

font-size: 1em;

}

.one, .two {

font-size: 0.52em;

}

.three {

font-size: 2rem;

}

Există trei div-uri aici, iar paragraful este destul de imbricat așa cum am văzut în exemplul em. Din nou, să presupunem că lucrăm cu o dimensiune em de 16 px.

Clasele .one și .two au dimensiuni atribuite, dar nu contează cu adevărat aici, deoarece imbricarea nu este afectată cu rems, așa cum este cu ems. Tot ceea ce contează cu adevărat este stilul lui .three, care este 2 ems. Paragraful s-ar baza pe elementul HTML al lui 1em. Această măsurătoare ar fi dublată, dându-ne 2 rem sau 32 de pixeli.

Doriți să măriți totul uniform? Doar ajustați dimensiunea elementului rădăcină. Acest lucru este util și atunci când ajustați dimensiunea implicită a browserului. Ai putea vedea cum EMS a permis asta, și rems.

Există mult mai puține griji cu privire la comportamentul imprevizibil de cuibărit cu rems. Este ușor de înțeles unde intervine elementul rădăcină și cum vă afectează stilul atunci când utilizați rems.

Când comparați diferitele măsurători, puteți vedea că au avantajele și dezavantajele lor. Înțelegerea cu adevărat a modului în care funcționează unitățile de măsură și a modului în care funcționează cu setările browserului vă va ajuta să alegeți care va funcționa cel mai bine pentru situație sau proiect.