Ghid cuprinzător Când să utilizați Em vs. Rem

S-ar putea să fiți de acord cu utilizarea unor unități de măsură flexibile, dar totuși nu ați putea înțelege pe deplin când să utilizați rem și când să utilizați em. Acest tutorial vă va ajuta să vă dați seama!

Ambii em și rem sunt unități flexibile, scalabile, care sunt traduse de browser în valori ale pixelilor, în funcție de setările dimensiunii fontului din design. Dacă utilizați o valoare de 1em sau 1rem, se poate traduce în browser ca orice de la 16px la 160px sau orice altă valoare.

CSS padding setat la 1em Calculează la 16 px CSS padding setat la 1em Se calculează la 160 de pixeli

Pe de altă parte px valorile sunt utilizate de browser ca atare 1px va fi afișat întotdeauna exact 1px.

Încercați cursorul în acest exemplu CodePen pentru a vedea cum se face valoarea rem și em unitățile se pot traduce în diferite valori ale pixelilor, în timp ce se stabilesc în mod explicit px unitățile rămân fixe în mărime:

Întrebarea cea mare

Utilizarea em și rem unitățile noastre ne oferă flexibilitate în desenele noastre și capacitatea de a scala elemente în sus și în jos, în loc să fie blocate cu dimensiuni fixe. Putem folosi această flexibilitate pentru a face ca desenele și modelele noastre să fie mai ușor de reglat în timpul dezvoltării, să fie mai receptive și să permită utilizatorilor de browsere să controleze scara globală a site-urilor pentru o lizibilitate maximă.

Ambii em și rem unitățile oferă această flexibilitate și funcționează în moduri similare, astfel încât întrebarea importantă este când trebuie să ne folosim em valori și când trebuie să folosim rem valorile?

Crucial Diferență

Diferența dintre em și rem este modul în care browserul determină px valoare pe care o traduc. Înțelegerea acestei diferențe reprezintă cheia pentru determinarea momentului de utilizare a fiecărei unități.

Vom începe prin a trece peste cum rem și em unitățile de lucru de la sol pentru a vă asigura că știți fiecare detaliu. Apoi vom merge mai departe De ce ar trebui să utilizați em sau rem Unități.

În cele din urmă vom examina aplicația practică a exact acelor elemente ale unui design tipic pe care ar trebui să îl utilizați pentru fiecare tip de unitate.

Cum rem Unități Traduceți în valorile pixelilor

Atunci când se utilizează rem unități, dimensiunea pixelilor la care se traduce, depinde de mărimea fontului elementului rădăcină al paginii, adică de html element. Această dimensiune a fontului rădăcinii este înmulțită cu numărul pe care îl utilizați cu dvs. rem unitate.

De exemplu, cu dimensiunea fontului elementului rădăcină de 16px, 10rem ar echivala cu 160px, adică 10 x 16 = 160.

CSS padding set la 10rem Se calculează la 160 de pixeli

Cum em Unități Traduceți în valorile pixelilor

Atunci când se utilizează em unitățile pixelilor, valoarea pixelilor pe care ați terminat-o este o multiplicare a dimensiunii fontului pe elementul care este desemnat.

De exemplu, dacă div are o dimensiune a fontului 18px, 10em ar echivala cu 180px, adică 10 x 18 = 180.

CSS padding set la 10em Calculează până la 180 de pixeli (sau suficient de aproape)

Important de știut:

Este o concepție greșită oarecum răspândită em unitățile sunt relative la dimensiunea fontului elementului părinte. De fapt, conform spec. W3, ele sunt relative la dimensiunea fontului "elementului pe care sunt folosite".

Mărimea fontului elementului principal poate sa efect em valori, dar când se întâmplă acest lucru este numai din cauza moștenirii. Să aruncăm o privire asupra motivului și să vedem cum funcționează acest lucru în acțiune.

Efectul moștenirii asupra em Unități

Lucrând cu em unitățile pot începe să devină complicate atunci când vine vorba de moștenire, deoarece fiecare element moșteneste automat dimensiunea fontului părintelui său. Efectul moștenirii poate fi anulat numai prin setarea explicită a dimensiunii fontului cu o unitate care nu este supusă moștenirii, cum ar fi px sau vw.

Dimensiunea fontului elementului pe care se află em unități determină dimensiunea lor. Dar acel element poate să fi moștenit o dimensiune a fontului de la părintele său, care a moștenit o dimensiune a fontului de la părintele său, și așa mai departe. Ca atare, este posibil pentru oricine em valoarea care va fi efectuată de dimensiunea fontului oricărui părinte.

Să ne uităm la un exemplu. Simțiți-vă liber să încercați acest lucru în CodePen pentru dvs. în timp ce noi trecem prin el. Pe măsură ce mergeți, utilizați Chrome Developer Tools sau Firebug pentru Firefox pentru a inspecta valorile pixelului nostru em unitățile sunt calculate în.

Exemplu de em Moştenire

Dacă avem o pagină cu dimensiunea fontului rădăcină de 16px (de obicei, implicit) și un copil div în interiorul său cu padding de 1.5em, div va moșteni dimensiunea fontului 16px din elementul rădăcină. Prin urmare, padding sale se va traduce la 24px, adică 1,5 x 16 = 24.

Atunci dacă am înfășura un alt div în jurul primului și a pus-o marimea fontului la 1.25em?

Învelișul nostru div moșteneste dimensiunea fontului rădăcinii 16px și se înmulțește prin propriile sale marimea fontului setarea 1.25em. Aceasta stabilește div pentru a avea o dimensiune a fontului 20px, adică 1,25 x 16 = 20.

Acum div divorțul nostru nu mai moșteni direct din elementul rădăcină, ci mostenesc dimensiunea fontului 20px de la noul său div. Valoarea sa de umplutură 1.5em acum echivalează cu 30px, adică 1,5 x 20 = 30.

Acest efect de scalare poate fi amplificat și mai mult dacă adăugăm un em bazat pe dimensiunea fontului la div divorț original, să spunem 1.2em.

Div divorțează 20px dimensiunea fontului de la părintele său, apoi se înmulțește cu cea proprie 1.2em setarea, dându - i o nouă dimensiune a fontului 24px, adică 1,2 x 20 = 24.

1.5em padding pe divul nostru va schimba acum dimensiunea din nou cu noua dimensiune font, de data aceasta 36px, adică 1,5 x 24 = 36.

În cele din urmă, pentru a ilustra în continuare acest lucru em unitățile sunt relative la mărimea fontului elementului pe care sunt utilizate, (nu elementul părinte), să vedem ce se întâmplă cu 1.5em dacă am setat explicit div pentru a utiliza o dimensiune a fontului 14px, o valoare care nu este supusă moștenirii.

Acum, padding noastre a scăzut la 21px, adică 1.5 x 14 = 21. Acesta nu este afectat de dimensiunea fontului elementului părinte.

Cu toate aceste posibilități de complicație, puteți vedea de ce este important să știți cum să utilizați em unități într-un mod ușor de gestionat.

Efectul setărilor browserului asupra dimensiunii fontului elementului HTML

În mod normal, browserele au o dimensiune a fontului de 16 pixeli, dar acest lucru poate fi schimbat oriunde de la 9px la 72px de către utilizator.

Important de știut:

Radacina html elementul își moștenește mărimea fontului din setările din browser, dacă nu este înlocuită cu o valoare fixă ​​stabilită în mod explicit.

Deci, în timp ce dimensiunea fontului pe html element este ceea ce determină direct rem valori, dimensiunea fontului ar putea să vină mai întâi din setările browserului.

Astfel, setările pentru dimensiunea fontului browserului pot influența valoarea fiecărei rem unitate folosită într-un design, precum și fiecare em unitate prin moștenire.

Efectul de setare a browserului când nu este setat niciun font HTML

Cu excepția cazului în care sunt suprascrise, html element va moșteni oricare ar fi setarea implicită a dimensiunii fontului în browser. De exemplu, să luăm un site unde nu marimea fontului proprietatea este setată pe html element.

Dacă un utilizator are browserul la dimensiunea implicită a fontului de 16 pixeli, dimensiunea fontului rădăcină va fi de 16 pixeli. În Instrumentele de dezvoltator Chrome puteți vedea ce a moștenit un element verificând Afișați proprietăți moștenite sub computerizata fila.

În acest caz 10rem echivalează cu 160px, adică 10 x 16 = 160.

În cazul în care utilizatorul leagă dimensiunea fontului browserului până la 18 pixeli, dimensiunea fontului rădăcină devine de 18 pixeli. Acum 10rem se traduce la 180px, adică 10 x 18 = 180.

Setarea efectului de browser cu em Unitate de dimensiune font HTML

Când o em dimensiunea fontului este setată pe html element, valoarea pixelului la care se face traducerea va fi un set de setări pentru dimensiunea fontului browserului.

De exemplu, dacă site-ul lui html element a avut un marimea fontului proprietate setat la 1.25em, dimensiunea fontului rădăcină ar fi de 1,25 ori mai mare decât setarea dimensiunii fontului browserului.

Dacă dimensiunea fontului browserului a fost setată la 16px, dimensiunea fontului rădăcină ar ieși ca 20px, adică 1,25 x 16 = 20.

În acest caz 10rem ar fi egal 200px, adică 10 x 20 = 200.

Cu toate acestea, dacă dimensiunea fontului browserului a fost setată la 20px, dimensiunea fontului rădăcinii se va traduce la 25px, adică 1,25 x 20 = 25.

Acum 10rem ar fi egal 250px, adică 10 x 25 = 250.

rezumând em vs. rem Diferență

Ceea ce se reduce la toate acestea este:

• Traducerea rem unitatea la valoarea pixelului este determinată de dimensiunea fontului html element. Această dimensiune a fontului este influențată de moștenirea din setarea dimensiunii fontului browserului, cu excepția cazului în care este explicit înlocuită cu o unitate care nu este supusă moștenirii.

• Traducerea em unitățile la valorile pixelilor sunt determinate de mărimea fontului elementului în care sunt utilizate. Această dimensiune a fontului este influențată de moștenirea din elementele părinte, cu excepția cazului în care este explicit suprimată cu o unitate care nu este supusă moștenirii.

De ce folosiți rem Unități:

Cea mai mare putere rem oferta de unități nu este doar faptul că acestea dau dimensionare consistentă, indiferent de moștenirea elementelor. Mai degrabă, ele ne dau o modalitate de a avea setări de dimensiune a fontului utilizatorilor care influențează fiecare aspect al unui aspect al unui site folosind rem unde am folosit px Unități.

Din acest motiv scopul principal al utilizării rem unitățile ar trebui să fie pentru a se asigura că orice dimensiune implicită a fontului pe care un utilizator le-a setat browser-ul, aspectul se va ajusta pentru a se potrivi cu dimensiunea textului din cadrul acestuia.

Un site poate fi conceput inițial, concentrându-se pe cea mai comună dimensiune a fontului browserului implicit de 16 pixeli.

Dimensiunea fontului pentru browser 16px

Dar prin utilizarea rem dacă un utilizator mărește dimensiunea fontului, integritatea aspectului va fi păstrată și textul nu va fi scos într-un spațiu rigid destinat textului mai mic.

Dimensiunea fontului browserului este 34 px

Și dacă utilizatorul își micșorează dimensiunea fontului, întregul aspect scade în jos și nu va fi lăsat într-o minusculă de text într-o pustie de spațiu alb.

Dimensiunea fontului browserului 9 pixeli

Utilizatorii modifică setările dimensiunii fontului pentru tot felul de motive, de la vederea înțepenită până la alegerea setărilor optime pentru dispozitivele care pot fi foarte diferite în ceea ce privește mărimea și distanța de vizionare. Utilizarea acestor setări permite experiențe mult mai bune pentru utilizatori.

Important de știut:

Unii designeri folosesc rem bazate pe machete în legătură cu un fix px unitate marimea fontului setarea pe html element. Acest lucru se face de obicei astfel încât să se schimbe dimensiunea fontului pe html element poate scala în ansamblu proiectarea în sus sau în jos.

Vă sfătuesc cu fermitate acest lucru, deoarece depășește dimensiunea fontului html elementul moșteneste din setările browserului utilizatorului. Prin urmare, acest lucru împiedică setările să aibă vreun efect și elimină capacitatea utilizatorului de a optimiza pentru o vizualizare optimă.

Dacă doriți să modificați dimensiunea fontului pe html element, face acest lucru cu un em sau rem valoare ca mărimea fontului rădăcină va continua să fie mai mult decât setarea dimensiunii fontului pentru utilizator.

Acest lucru vă va permite în continuare să vă scalați designul în sus sau în jos prin schimbarea dvs. html element, dar veți păstra efectul setărilor browserului utilizatorului.

De ce folosiți em Unități

Valoarea cheie em oferta de unități este că acestea permit valorile de dimensionare să fie determinate de o dimensiune a fontului, altele decât cele ale html element.

Din acest motiv, scopul principal al em unități ar trebui să fie pentru a permite scalabilitate în contextul unui element specific de proiectare.

De exemplu, ați putea seta umplutură, margine și inaltimea liniei în jurul unui element de meniu de navigare folosit em valorile.

Meniu cu marimea fontului de 0,9rem

În acest fel, dacă schimbați mărimea fontului din meniu, spațiul din jurul elementelor de meniu se va scala proporțional, independent de restul aspectului.

Meniu cu dimensiunea fontului de 1,2 ore

În secțiunea anterioară privind moștenirea ați văzut cât de repede se ține evidența em unitățile pot ieși din mână. Din acest motiv, vă recomand numai utilizând em dacă identificați o nevoie clară a acestora.

Aplicație practică

S-ar putea să existe o dezbatere între designerii web și sunt sigur că diferiți oameni au diferite abordări preferate, cu toate acestea recomandarea mea este după cum urmează.

Utilizare em Unități pentru:

Orice calibrare ar trebui în funcție de dimensiunea fontului unui element diferit de rădăcină.

În general vorbind, singurul motiv pentru care va trebui să utilizați em unități este de a scala un element care nu are dimensiunea fontului implicit.

După exemplul de mai sus, componentele de proiectare precum elementele de meniu, butoanele și titlurile pot avea propriile dimensiuni de fonturi specificate. Dacă schimbați aceste dimensiuni ale fontului, doriți ca întreaga componentă să fie scalată proporțional.

Proprietățile comune pe care le va aplica această orientare sunt margine, umplutură, lăţime, înălţime și inaltimea liniei setări, atunci când este utilizat pe elemente cu dimensiunea fontului fără implicit.

Vă recomandăm ca atunci când angajați em unități, dimensiunea fontului elementului în care sunt utilizate ar trebui să fie setat rem pentru a păstra scalabilitatea, dar pentru a evita confuzia în moștenire.

De obicei nu folosiți em Unități pentru dimensiunile fontului

Este destul de comună pentru a vedea em unități utilizate pentru dimensionarea fontului, în special în titluri, cu toate acestea, aș sugera că desenele sunt mai ușor de gestionat dacă rem unitățile sunt de obicei folosite pentru dimensionarea fontului.

Motivele adesea folosite em unitățile sunt o alegere mai bună decât px unități, fiind relativ la dimensiunea obișnuită a textului. in orice caz rem unitățile pot atinge acest obiectiv la fel de bine. Dacă orice modificare a dimensiunii fontului pe html elementul este făcut, dimensiunile titlurilor vor scala totuși.

Încercați să schimbați em dimensiunea fontului pe html element în acest CodePen pentru a vă vedea:

De cele mai multe ori, nu vrem ca dimensiunile fontului să se bazeze pe orice alt element decât rădăcina, cu doar câteva excepții.

Un exemplu în care am putea dori em baza de dimensiune a fontului ar putea fi un meniu derulant, unde avem un text al elementului de meniu al doilea nivel, în funcție de dimensiunea fontului primului nivel. Un alt exemplu ar putea fi o pictogramă de font folosită în interiorul unui buton, unde dimensiunea pictogramei ar trebui să se refere la mărimea textului butonului.

Cu toate acestea, cele mai multe elemente dintr-un design web vor avea tendința să nu aibă acest tip de cerință, așa că, în general, veți dori să le utilizați rem unități pentru dimensionarea fontului, cu em unități numai acolo unde este necesar.

Utilizare rem unități pentru:

Orice calibrare nu are nevoie em unități din motivele descrise mai sus, și ar trebui în funcție de setările dimensiunii fontului browserului.

Acest lucru reprezintă aproape totul într-un design standard, incluzând cele mai multe înălțimi, cele mai multe lățimi, cele mai multe straturi, cele mai multe margini, lățimea marginilor, majoritatea dimensiunilor fontului, umbrele, practic aproape fiecare parte a aspectului.

Pe scurt, tot ce se poate face cu scalabilitate rem unități, ar trebui să fie.

Bacsis

Când creați machete, este adesea mai ușor să gândiți în pixeli, dar să ieșiți în rem Unități.

Aveți posibilitatea să aveți pixel rem calcule efectuate automat printr-un preprocesor precum Stylus / Sass / Less sau un postprocesor ca PostCSS cu pluginul PXtoRem.

Alternativ, puteți utiliza PXtoEM pentru a efectua manual conversiile.

Utilizați întotdeauna rem Întrebări media

Este important, atunci când utilizați rem pentru a crea un design uniform scalabil, interogările dvs. media ar trebui să fie, de asemenea, în rem unități. Acest lucru vă va asigura că, indiferent de mărimea fontului browserului utilizatorului, interogările dvs. media vor răspunde la acesta și vor ajusta aspectul.

De exemplu, dacă un utilizator mărește foarte mult textul, este posibil ca aspectul să fie necesar să coboare dintr-o două coloană într-o singură coloană, la fel ca și pe un dispozitiv mobil ecranat mai mic.

Dacă punctele de întrerupere sunt la lățimile fixe ale pixelilor, numai o altă dimensiune a ferestrei de vizualizare le poate declanșa. Cu toate acestea rem bazate pe puncte de oprire vor răspunde și la dimensiunea fontului diferită.

Nu utilizați em sau rem Pentru:

Lățimea de dispunere a mai multor coloane

Lățimea coloanelor într-un aspect ar trebui să fie de obicei % astfel încât să se poată adapta rapid la ferestrele de vizualizare cu dimensiuni imprevizibile.

Cu toate acestea, coloanele unice ar trebui încorporate în general rem valori prin lățimea maximă cadru.

De exemplu:

css .container lățime: 100%; max-lățime: 75rem;

Aceasta menține coloana flexibilă și scalabilă, dar împiedică aceasta să devină prea largă pentru ca textul să fie ușor de citit.

Când un element ar trebui să fie strict necalcabil

Într-un design web tipic, nu vor exista multe părți din aspectul dvs. care nu pot fi proiectate pentru scalabilitate. Cu toate acestea, uneori veți întâlni elemente care într-adevăr trebuie să utilizeze valori fixe explicite pentru a preveni scalarea.

Precondiția utilizării valorilor fixe de dimensionare ar trebui să fie aceea că dacă elementul în cauză ar fi fost scalat, s-ar rupe. Acest lucru nu se întâmplă adesea, deci înainte de a fi tentați să bateți pe aceia px unități, întrebați-vă dacă utilizarea acestora este o necesitate absolută.

Înfășurarea în sus

Să facem o scurtă recapitulare a ceea ce am acoperit:

• rem și em unitățile sunt calculate în valorile pixelilor de către browser, pe baza dimensiunilor fontului din design.
• em unitățile se bazează pe mărimea fontului elementului în care sunt utilizate.
• rem unitățile se bazează pe dimensiunea fontului html element.
• em unitățile pot fi influențate de mărimea mărimii fontului din orice element parental

• rem unitățile pot fi influențate de moștenirea mărimii fontului din setările pentru fonturile browserului.

• Utilizare em unități de dimensionare care ar trebui să scadă în funcție de dimensiunea fontului unui alt element decât rădăcina.
• Utilizare rem unități de dimensionare care nu au nevoie em unități, și care ar trebui să scadă în funcție de setările dimensiunii fontului browserului.
• Utilizare rem dacă nu sunteți sigur că aveți nevoie em unități, inclusiv în dimensiuni de fonturi.
• Utilizare rem unități pe interogările media
• Nu utilizați em sau rem în lățimea de dispunere a mai multor coloane - utilizați % in schimb.
• Nu utilizați em sau rem dacă scalarea ar provoca în mod inevitabil un element de aspect pentru a se rupe.

Sper că ați construit acum o imagine robustă și completă a modului exact em și rem unitățile de lucru, și prin faptul că știu cum să le pârghie cel mai bine în desenele dumneavoastră.

Vă încurajez să încercați pentru dvs. instrucțiunile de folosire conținute în acest tutorial și bucurați-vă de scalabilitatea și capacitatea de reacție a planurilor pe care le vor permite să creați.