Cum să alegeți cea mai bună unitate CSS pentru a crea un aspect mai bun al site-ului

Unitățile CSS sunt unul dintre cele mai fundamentale aspecte de luat în considerare atunci când creați un aspect al site-ului. Aceste unități vor defini modul în care designul dvs. va interacționa pe diferite dispozitive.

Dar când vine vorba de unitățile CSS, există multe opțiuni din care să alegeți și toate opțiunile nu sunt egale. Unitățile CSS nu se limitează doar la fonturi, așa că, în calitate de dezvoltator front-end, ar trebui să înțelegeți cum afectează aceste unități și aspectul.

În acest articol, vă vom arăta cum funcționează diferitele unități CSS, astfel încât să le puteți utiliza pentru a crea machete și design de site mai bune.

Tipuri de unități CSS

Unitățile CSS pot fi separate în următoarele categorii:

• Unități absolute
• Unități relative de font
• Unități relative de vizualizare

Unități absolute

Unele unități depind de anumite valori absolute și nu sunt afectate de nicio dimensiune a ecranului sau fonturi. Aceste unități de afișare pot varia în funcție de diferite rezoluții ale ecranului, deoarece depind de DPI (puncte pe inch) ale ecranelor.

Aceste unitati sunt:

• px (pixeli)
• in inchi)
• cm (centimetru)
• mm (milimetru)
• pc (picas)
• pt (puncte)

Pixeli

Pixelii sunt unitatea cea mai frecvent utilizată și acceptată. Și este considerată baza de măsură pentru multe alte unități. Oferă cel mai consistent rezultat dintre diferitele dispozitive.

Elementul box din exemplul următor are o înălțime de 150 px și o lățime de 150 px și va rămâne același pe toate dimensiunile ecranului.

[css]
.cutie{
înălțime: 150px;
lățime: 150px;
}
[/css]

Toate celelalte unități absolute, cum ar fi în (inci), cm (centimetru) și mm (milimetru), sunt unități de măsură din lumea reală cu foarte puține cazuri de utilizare CSS din lumea reală.

Totuși, este bine să înțelegeți relația lor cu pixelii, așa că iată cum se compară:

• 1 inch = 96 px
• 1 cm = 37,8 px
• 1 mm = 3,78 px

În timp ce pc (picas) și pt (puncte) sunt direct legate de inci.

• 1 in = 72 pt
• 1 inch = 6 buc

Relația dintre toate unitățile absolute poate fi demonstrată astfel:

Rem

În afară de pixeli, toate celelalte unități absolute au cazuri de utilizare foarte puține sau deloc pentru CSS pe ecran, dar, deoarece sunt unități de măsură din lumea reală, pot fi utilizate eficient în CSS de tipărire. (În cazul în care vă întrebați despre pixeli, aceștia funcționează bine și în CSS de tipărire!)

Unități relative de font

Există unele unități care depind de dimensiunea fontului sau de familia de fonturi a documentului sau de elementele sale la nivel de părinte. Aceasta include unități precum:

• ei
• rem
• ex
• cap

Em

Em este o unitate de lungime relativă; depinde de dimensiunea fontului elementului părinte sau a documentului. În mod implicit, 1em este egal cu 16px dacă nu este definită font-size .

Em moștenește dimensiunea de la dimensiunea fontului părintelui său imediat. Așadar, dacă un element părinte are font-size:18px , atunci 1em va fi măsurat ca 18px pentru toți copiii săi.

Aici avem un div .post cu trei copii, .post-item , cu un titlu și ceva text.

[html]
<div class="post”>
<div class="post-item”>
<h2>Titlu</h2>
Lorem Ipsum este pur și simplu un text fals al industriei de tipărire și de tipărire. Lorem Ipsum a fost textul fals standard al industriei încă din anii 1500
</div>
<div class="post-item”>
<h2>Titlu</h2>
Lorem Ipsum este pur și simplu un text fals al industriei de tipărire și de tipărire. Lorem Ipsum a fost textul fals standard al industriei încă din anii 1500
</div>
<div class="post-item”>
<h2>Titlu</h2>
Lorem Ipsum este pur și simplu un text fals al industriei de tipărire și de tipărire. Lorem Ipsum a fost textul fals standard al industriei încă din anii 1500
</div>
</div>
[/html]

Acum .post părinte are un font-size:20px , iar elementul secundar .post div are propria sa font-size:1.2em cu padding:0.75em și margin:0.75em , astfel încât umplutura și marja calculate vor fi de 18px (20px *1.2em*0.75em).

[css]
html{
dimensiunea fontului: 20px;
}

.post{
dimensiunea fontului: 20px;
}

.post div{
dimensiunea fontului: 1,2 em;
}

.post-articol{
fundal:roz;
umplutură: 0,75 em;
marja: 0,75 em;
}

.post-articol h2{
dimensiunea fontului: 1,5 em;
marja: 0,5em 0;
}

.post-element p{
marja:0;
dimensiunea fontului: 1em;
}
[/css]

După cum puteți vedea, elementele copil moștenesc valori de la părinte.

Avantajul utilizării em este că, dacă decideți să modificați proporțional font-size , padding și margin fiecărui element, atunci trebuie doar să schimbați dimensiunea fontului elementului părinte și toate celelalte elemente se vor ajusta în consecință.

Nu va fi cazul unităților absolute precum px, unde trebuie să ajustați fiecare element individual.

Această natură de moștenire poate fi puțin dificil de gestionat, totuși, dacă elementele imbricate au și propria lor font-size în em.

La fel ca în demonstrația anterioară, dacă înfășurați titlul și paragraful într-un alt div într-unul dintre elementele secundare, veți vedea rezultate ciudate.

[html]
<div class="post-item”>
<div>
<h2>Titlu</h2>
Lorem Ipsum este pur și simplu un text fals al industriei de tipărire și de tipărire. Lorem Ipsum a fost textul fals standard al industriei încă din anii 1500
</div>
</div>
[/html]

Deoarece post-item are un div imbricat, dimensiunea de bază se va schimba de la 24px la 28.8px (20px*1.2em*1.2em), iar font-size și margin pentru h2 se vor schimba la 43.2px (20px*1.2em*1.2em). *1.5em) și, respectiv, 14.4px (20px*1.2em*1.2em*0.5em).

Rem

Rem poate fi de mare ajutor în aceste tipuri de situații, deoarece se referă întotdeauna la dimensiunea fontului elementului rădăcină, nu la elementul părinte.

Dacă luați exemplul anterior și schimbați unitățile din em în rem pentru .post div , veți vedea că toate elementele secundare se reparează singure.

[css]
.post div{
dimensiunea fontului: 1.2rem;
}
[/css]

Odată ce unitatea este schimbată de la em la rem, baza sa se schimbă de la div părinte la element rădăcină, care are front-size:20px .

Deci, calculul va fi 20px*1.2rem*value și h2 și p ambele vor avea font-size și margin consecvente, indiferent de părintele lor.

Ex

Ex este relativ la înălțimea x a fontului curent și este foarte rar folosit. Măsurarea înălțimii x nu este consecventă; uneori provine de la fontul în sine și uneori browserul se calculează singur.

La fel ca em și rem, depinde de font, dar diferența majoră este că ex se va schimba atunci când schimbați și font-family , ceea ce nu este cazul celorlalte două.

[css]
.cutie{
latime:150ex;
inaltime:150ex;
}
[/css]

Ch

Ch este similar cu ex, dar nu depinde de înălțimea x; mai degrabă pe lățimea caracterului zero (0). Se modifică și cu font-family .

[css]
.cutie{
latime: 150ch;
inaltime:150ch;
}
[/css]

Viewport Unități relative

Există câteva unități care depind de înălțimea și dimensiunea lățimii ferestrei de vizualizare, cum ar fi:

• vh (înălțimea ferestrei)
• vw (lățimea ferestrei)
• vmin (minimum viewport)
• vmax (vizualizare maximă)

Vh

Vh (înălțimea ferestrei) este măsurată ca 1vh egal cu 1% din înălțimea ferestrei. Această unitate este foarte utilă pentru a crea elemente pe toată înălțimea. Vh reacționează în mod similar cu procentul, dar nu depinde de înălțimea elementului părinte.

Puteți utiliza vh oriunde, dar cel mai frecvent caz de utilizare a vh este pentru realizarea de elemente de înălțime completă. În acest exemplu, clasa full-height va crea un container albastru care va avea 100% înălțimea ferestrei de vizualizare.

[css]
.inaltime maxima{
inaltime: 100vh;
fundal: albastru;
}
[/css]

Vw

Vw (lățimea ferestrei) este similară cu vh, dar ia în considerare lățimea, mai degrabă decât înălțimea ferestrei. 1vw este egal cu 1% din lățimea ferestrei de vizualizare. Aceste unități pot fi cu adevărat utile dacă doriți să creați o fereastră de vizualizare receptivă bazată pe tipografie.

În acest exemplu, font-siz pentru h1 este 6% din lățimea ferestrei de vizualizare, deci dacă lățimea ferestrei de vizualizare este de 1000 px, dimensiunea fontului va fi de 60 px, iar dacă fereastra este de 500 px, dimensiunea fontului va fi de 30 px.

[css]
h1{
dimensiunea fontului: 6vw;
}
[/css]

Vmin

Vmin se calculează pe baza valorii minime a lățimii sau înălțimii ferestrei de vizualizare, oricare dintre acestea este mai mică. Să presupunem că aveți o dimensiune a ferestrei de 1000 px înălțime pe 800 px lățime. 1vmin va fi egal cu 8px.

Vmax

Vmax este calculat exact opusul vmin , unde este considerată valoarea maximă a ferestrei de vizualizare.

La fel ca exemplul anterior de vizualizare cu 1000px înălțime pe 800px lățime, 1vmax va fi egal cu 10px.

Acum haideți să explorăm cum puteți utiliza vmin și vmax în mod eficient. Folosind exemplul nostru anterior, să presupunem că vrem să avem acum o umplutură fluidă și o marjă bazate pe dimensiunea ferestrei de vizualizare, mai degrabă decât pe o valoare fixă.

În acest fragment de cod, am setat umplutura la 3vmax și marginea la 1.5vmin .

[css]
.post-articol{
fundal roz;
umplutură: 3vmax;
marja: 1,5vmin;
}
[/css]

Umplutura și marginea se vor schimba în funcție de dimensiunea ferestrei de vizualizare.

Unitate procentuală (%)

Unitatea procentuală (%) nu aparține unei anumite categorii menționate mai sus, dar poate fi clasificată ca unitate relativă. Este relativ la elementul său părinte.

Procentul este asociat în principal cu înălțimea și lățimea unui element, dar poate fi folosit oriunde unde sunt permise unitățile de lungime CSS.

Procentul este una dintre cele mai utile unități pentru crearea unui aspect receptiv sau fluid. Cadrele populare precum Bootstrap, fundația și Bulma folosesc procentul pentru aspectul lor de bază.

Aici clasa full-width va fi de 100% lățimea elementului său părinte.

[css]
.lățime maximă{
latime: 100%;
}
[/css]

Concluzie

Am acoperit aproape toate unitățile CSS disponibile pentru utilizare. În funcție de obiectivele tale, unele vor fi mai potrivite decât altele. În calitate de dezvoltator front-end, este întotdeauna bine să știi opțiunile tale, deoarece nu știi niciodată de care ai putea avea nevoie în următorul tău proiect.

Deci, ce unități folosiți cel mai frecvent pentru a obține rezultatul dorit? Anunțați-ne în secțiunea de comentarii de mai jos!