este posibil să fi ajuns la termeni cu utilizarea unităților de măsură flexibile, dar încă nu s-ar putea înțelege pe deplin când să utilizațiremși când să utilizațiem. Acest tutorial vă va ajuta să vă dați seama!

ambeleem șirem sunt unități flexibile, scalabile, care sunt traduse de browser în valori de pixeli, în funcție de setările dimensiunii fontului din design. Dacă utilizați o valoare 1em sau 1rem, s-ar putea traduce în browser ca orice de la 16px la 160px sau orice altă valoare.

On the other hand px values are used by the browser așa cum este, deci 1px va afișa întotdeauna exact 1px.

încercați cursorul pe acest exemplu CodePen pentru a vedea modul în care valoarearem șiem unități pot traduce în diferite valori de pixeli, în timp ce setați în mod explicitpx unități rămâne fix în dimensiune:

Marea întrebare

utilizareaem șirem unități ne oferă flexibilitate în proiectele noastre, și capacitatea de a scala elemente în sus și în jos, în loc de a fi blocat cu dimensiuni fixe. Putem folosi această flexibilitate pentru a face design-urile noastre mai ușor de ajustat în timpul dezvoltării, mai receptive și pentru a permite utilizatorilor browserului să controleze scara generală a site-urilor pentru o lizibilitate maximă.

ambeleem șirem unitățile oferă această flexibilitate și funcționează în moduri similare, așa că marea întrebare este: când ar trebui să folosimem valori și când ar trebui să folosimrem valori?

diferență crucială

diferența dintreem șirem unități este modul în care browserul determinăpx valoarea în care se traduc. Înțelegerea acestei diferențe este cheia pentru a determina când să utilizați fiecare unitate.

vom începe prin a trece peste modul în carerem șiem unități de lucru de la sol în sus pentru a vă asigura că știți fiecare detaliu. Apoi vom trece la motivul pentru care ar trebui să utilizați em sau rem unități.

în cele din urmă ne vom uita la aplicarea practică a exact ce elemente ale unui design tipic ar trebui să utilizați fiecare tip de unitate pe.

cum se traduc unitățile rem în valorile pixelilor

când se utilizeazărem, dimensiunea pixelilor în care se traduc depinde de dimensiunea fontului elementului rădăcină al paginii, adică elementulhtml. Această dimensiune a fontului rădăcină este înmulțită cu orice număr pe care îl utilizați cu unitatea rem.

de exemplu, cu un element rădăcină dimensiunea fontului16px10remar echivala cu160px, adică 10 x 16 = 160.

cum unități em traduce la valorile pixelilor

atunci când se utilizează em unități, valoarea pixel va termina cu este o multiplicare a dimensiunii fontului pe elementul fiind stil.

For example, if a div has a font size of 18px10em would equate to 180px, i.e. 10 x 18 = 180.

Important to Know:

este o concepție greșită oarecum răspândită căem unitățile sunt relative la dimensiunea fontului elementului părinte. De fapt, conform spec W3, acestea sunt relative la dimensiunea fontului „a elementului pe care sunt utilizate”.

dimensiunile fontului elementului părinte pot afecta valorileem, dar când se întâmplă acest lucru este doar din cauza moștenirii. Să aruncăm o privire de ce și să vedem cum funcționează acest lucru în acțiune.

efectul moștenirii asupra unităților em

lucrul cuem unitățile pot începe să devină dificile atunci când vine vorba de moștenire, deoarece fiecare element moștenește 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 sunt utilizate unitățileem determină dimensiunea acestora. Dar este posibil ca acel element 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 ca orice valoare em să fie efectuată de dimensiunea fontului oricăruia dintre părinții săi.

să ne uităm la un exemplu. Simțiți-vă liber pentru a încerca acest lucru în CodePen pentru tine ca am pas prin ea. Pe măsură ce mergeți, utilizați Chrome Developer Tools sau Firebug pentru Firefox pentru a inspecta valorile pixelilor în care sunt calculate unitățile noastre em.

exemplu de moștenire em

dacă avem o pagină cu dimensiunea fontului rădăcină de 16px (de obicei implicit) și un div copil în interiorul acestuia cu umplutură de 1.5em, acel div va moșteni dimensiunea fontului 16px din elementul rădăcină. Prin urmare, umplutura sa se va traduce în 24px, adică 1,5 x 16 = 24.

atunci ce se întâmplă dacă înfășurăm un alt div în jurul primului și îi setăm font-size la 1.25em?

învelișul nostru div moștenește dimensiunea fontului rădăcină a16px și o înmulțește prin propriulfont-size setarea1.25em. Aceasta setează div să aibă o dimensiune a fontului 20px, adică 1,25 x 16 = 20.

acum div-ul nostru original nu mai moștenește direct de la elementul rădăcină, în schimb moștenește o dimensiune a fontului20px de la noul său părinte div. Valoarea sa de umplutură 1.5em echivalează acum cu 30px, adică 1,5 x 20 = 30.

acest efect de scalare poate fi agravat și mai mult dacă adăugăm o dimensiune a fontuluiem bazată pe div-ul nostru original, să spunem1.2em.

div moștenește20px dimensiunea fontului de la părintele său, apoi îl înmulțește cu propria sa setare1.2em, oferindu-i o nouă dimensiune a fontului24px, adică 1,2 x 20 = 24.

1.5em padding pe div nostru se va schimba acum în dimensiune din nou cu noua dimensiune a fontului, de data aceasta la36px, adică 1,5 x 24 = 36.

în cele din urmă, pentru a ilustra în continuare că em unitățile sunt relative la dimensiunea fontului elementului pe care sunt utilizate, (nu elementul părinte), să vedem ce se întâmplă cu umplutura noastră de 1.5em dacă setăm în mod explicit div pentru a utiliza o dimensiune a fontului de 14px, o sub rezerva moștenirii.acum, padding nostru a scăzut până la 21px, adică 1.5 x 14 = 21. Nu este afectat de dimensiunea fontului elementului părinte.

cu tot acest potențial de complicații, puteți vedea de ce este important să știți cum să utilizațiem unități într-un mod gestionabil.

efectul setărilor browserului asupra elementului HTML dimensiunea fontului

în mod implicit browserele au de obicei o dimensiune a fontului de 16px, dar acest lucru poate fi schimbat în oriunde de la 9PX la 72px de către utilizator.

Important de știut:

elementul rădăcinăhtml moștenește dimensiunea fontului din setările din browser, cu excepția cazului în care este suprascrisă cu o valoare fixă setată Explicit.

deci, în timp ce dimensiunea fontului pehtml element este ceea ce determină în mod directrem valori, că dimensiunea fontului poate veni mai întâi din setările browser-ului.

astfel, setările pentru dimensiunea fontului browserului pot afecta valoarea fiecărei unitățirem utilizate într-un design, precum și a fiecărei unitățiem prin moștenire.

Browser setting Effect când nu este setată nicio Dimensiune HTML a fontului

dacă nu este înlocuită, elementulhtml va moșteni oricare ar fi setarea implicită a dimensiunii fontului din browser. De exemplu, să luăm un site unde nu este setată nicio proprietate font-size pe elementul html.

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

În acest caz10rem echivalează cu160px, adică 10 x 16 = 160.

dacă utilizatorul își mărește dimensiunea fontului browserului până la 18px, dimensiunea fontului rădăcină devine 18px. Acum 10rem se traduce în 180px, adică 10 x 18 = 180.

efect de setare Browser cu Em unitate HTML dimensiunea fontului

atunci când unem dimensiunea fontului bazat este setat pehtml element, valoarea pixelilor la care se traduce va fi un multiplu al setării dimensiunii fontului browserului.

de exemplu, dacă elementulhtml al site-ului avea o proprietatefont-size setată la1.25em, dimensiunea fontului rădăcină ar fi de 1,25 ori setarea dimensiunii fontului browserului.

dacă dimensiunea fontului browserului a fost setată la16px, dimensiunea fontului rădăcină va apărea ca20px, adică 1,25 x 16 = 20.

În acest caz10rem ar fi egal200px, adică 10 x 20 = 200.

cu toate acestea, dacă dimensiunea fontului browserului a fost setată la 20px, dimensiunea fontului rădăcină s-ar traduce în schimb la 25px, adică. 1, 25 x 20 = 25.

acum10rem ar fi egal250px, adică 10 x 25 = 250.

rezumând diferența em vs.rem

la ce se rezumă toate cele de mai sus este aceasta:

• traducerearem unități la valoarea pixelilor este determinată de dimensiunea fontuluihtml element. Această dimensiune a fontului este influențată de moștenirea din setarea dimensiunii fontului browserului, cu excepția cazului în care este suprascrisă în mod explicit cu o unitate care nu este supusă moștenirii.

• traducereaem unități la valorile pixelilor este determinată de dimensiunea fontului elementului pe care sunt utilizate. Această dimensiune a fontului este influențată de moștenirea de la elementele părinte, cu excepția cazului în care este înlocuită în mod explicit cu o unitate care nu este supusă moștenirii.

De ce să folosiți unități rem:

cea mai mare putere pe care o oferă unitățilerem nu este doar faptul că oferă dimensionarea consecventă, indiferent de moștenirea elementului. Mai degrabă, este că ne oferă o modalitate de a avea setările dimensiunii fontului utilizatorului să influențeze fiecare aspect al aspectului unui site folosind rem unități în care obișnuiam să folosim px unități.

Din acest motiv, scopul principal al utilizăriirem unități ar trebui să fie pentru a se asigura că, indiferent de dimensiunea fontului implicit un utilizator are browser-ul lor setat la, aspectul va ajusta pentru a se potrivi dimensiunea textului în ea.

un site poate fi proiectat inițial concentrându-se pe cea mai comună dimensiune implicită a fontului browserului de 16px.

dar folosindrem unități, dacă un utilizator crește dimensiunea fontului lor, integritatea aspectului vor fi păstrate, iar textul nu va fi strivit într-un spațiu rigid destinat textului mai mic.

și dacă utilizatorul scade dimensiunea fontului lor, întregul aspect scalează în jos, și nu vor fi lăsate cu o brumă mică de text într-o pustietate spațiu alb.

utilizatorii schimbă setările dimensiunii fontului din tot felul de motive, de la vederea încordată la alegerea setărilor optime pentru dispozitive care pot fi foarte diferite ca mărime și distanță de vizualizare. Acomodarea acestor setări permite experiențe mult mai bune ale utilizatorilor.

Important de știut:

unii designeri folosescrem machete bazate în combinație cu unpx unitatefont-size setarea pehtml element. Acest lucru se face de obicei astfel încât o modificare a dimensiunii fontului pe html elementul poate scala în general designul în sus sau în jos.

recomand cu tărie acest lucru, deoarece suprascrie dimensiunea fontuluihtml elementul moștenește din setările browserului utilizatorului. Prin urmare, acest lucru împiedică setările să aibă vreun efect și elimină capacitatea utilizatorului de a optimiza pentru cea mai bună vizualizare.

dacă doriți să modificați dimensiunea fontului pehtml element, face acest lucru cu oem saurem valoare ca dimensiunea fontului rădăcină va fi apoi în continuare un multiplu de setare dimensiunea fontului browser-ul utilizatorului.

Acest lucru vă va permite în continuare să vă scalați designul în sus sau în jos modificândhtml dimensiunea fontului elementului, dar veți păstra efectul setărilor browserului utilizatorului.

De ce să folosiți unități em

valoarea cheieem unitățile oferă este că permit determinarea valorilor de dimensionare printr-o altă dimensiune a fontului decât cea a elementuluihtml.

Din acest motiv, scopul principal al unitățilorem ar trebui să fie acela de a permite scalabilitatea în contextul unui element de proiectare specific.

de exemplu, puteți seta paddingmargin și line-height în jurul unui element de meniu de navigare pentru a utiliza em valori.

În acest fel, dacă modificați dimensiunea fontului meniului, spațierea din jurul elementelor din meniu se va scala proporțional, independent de restul aspect.

în secțiunea anterioară despre moștenire ați văzut cât de repede urmărițiem unitățile pot ieși din mână. Din acest motiv, vă recomand să utilizați unitățile em numai dacă identificați o nevoie clară pentru ele.

aplicație practică

pot exista unele dezbateri între web designeri și sunt sigur că diferite persoane au abordări diferite preferate, cu toate acestea recomandarea mea este după cum urmează.

utilizați unități em Pentru:

orice dimensionare care ar trebui să scaleze în funcție de dimensiunea fontului unui alt element decât rădăcina.

în general, singurul motiv pentru care va trebui să utilizațiem unități este de a scala un element care are dimensiunea fontului non implicit.

conform exemplului nostru de mai sus, componentele de proiectare precum elementele de meniu, butoanele și titlurile pot avea propriile dimensiuni de font declarate Explicit. Dacă modificați aceste dimensiuni de font, doriți ca întreaga componentă să se scaleze proporțional.

proprietăți comune această orientare se va aplica sunt marginpaddingwidthheight și line-height setări, atunci când este utilizat pe elemente cu dimensiunea fontului non implicit.

recomand ca atunci când folosițiem unități, dimensiunea fontului elementului pe care sunt utilizate să fie setată în rem unități pentru a păstra scalabilitatea, dar pentru a evita confuzia moștenirii.

de obicei nu folosesc em unități pentru dimensiuni de Font

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 dimensionarea.

motivul pentru care titlurile folosesc adeseaem unități este că sunt o alegere mai bună decâtpx unități, fiind relativ la dimensiunea obișnuită a textului. Cu toate acestearem unitățile pot atinge acest obiectiv la fel de bine. Dacă se face o ajustare a dimensiunii fontului pe elementul html, dimensiunile rubricii se vor scala în continuare.

încercați să modificați em dimensiunea fontului pe html element în acest CodePen pentru a vedea pentru tine:

de cele mai multe ori, nu dorim ca dimensiunile fonturilor noastre să se scaleze pe baza oricărui alt element decât rădăcina, cu doar câteva excepții.

Un exemplu în care am putea doriem dimensionarea fontului pe bază ar putea fi un meniu derulant, unde avem textul elementului de meniu de nivelul doi dimensionat în funcție de dimensiunea fontului primului nivel. Un alt exemplu ar putea fi o pictogramă de font utilizată în interiorul unui buton, unde dimensiunea pictogramei ar trebui să se refere la dimensiunea textului butonului.

cu toate acestea, majoritatea elementelor dintr-un design web vor tinde să nu aibă acest tip de cerință, așa că veți dori în general să utilizațirem unități pentru dimensionarea fontului, cuem unități numai acolo unde este necesar.

utilizați unități rem pentru:

orice dimensionare care nu are nevoie deem unități din motivele descrise mai sus și care ar trebui să se scaleze în funcție de setările dimensiunii fontului browserului.

aceasta reprezintă aproape totul într-un design standard, inclusiv cele mai multe înălțimi, cele mai multe lățimi, cele mai multe căptușeli, cele mai multe margini, lățimi de frontieră, cele mai multe dimensiuni de font, umbre, practic aproape fiecare parte a aspectului.

pe scurt, tot ceea ce poate fi scalabil cu rem unități, ar trebui să fie.

sfat

la crearea machete este adesea mai ușor să se gândească în pixeli, dar de ieșire înrem unități.

puteți avea pixel larem calcule efectuate automat printr-un preprocesor ca Stylus / Sass / Less, sau un postprocesor ca PostCSS cu plugin-ul PXtoRem.

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

utilizați întotdeaunarem interogări Media

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

de exemplu, dacă un utilizator scalează textul foarte sus, este posibil ca aspectul dvs. să fie necesar să se fixeze de la două coloane la o singură coloană, la fel cum s-ar putea întâmpla pe un dispozitiv mobil ecranat mai mic.

dacă punctele dvs. de întrerupere sunt la lățimi fixe de pixeli, numai o dimensiune diferită a portului de vizualizare le poate declanșa. Cu toate acestea, cu rem breakpoints bazate pe ele vor răspunde la diferite dimensiuni font prea.

nu utilizați em sau rem pentru:

multi Column Layout Widths

Column widths într-un layout ar trebui să fie de obicei% bazat astfel încât să poată potrivi în mod fluid viewport de dimensiuni imprevizibile.

cu toate acestea, coloanele unice ar trebui să includă în generalrem valori printr-o setaremax-width.

de exemplu:

.container { width: 100%; max-width: 75rem;}

aceasta menține coloana flexibilă și scalabilă, dar o împiedică să devină prea largă pentru ca textul să poată fi citit confortabil.

când un Element ar trebui să fie strict Unscalable

într-un design web tipic nu vor exista multe părți ale aspectului dvs. care nu pot fi proiectate pentru scalabilitate. Cu toate acestea, ocazional, veți întâlni elemente care într-adevăr trebuie să utilizeze valori fixe explicite în scopul prevenirii scalării.

condiția prealabilă pentru utilizarea valorilor de dimensionare fixe ar trebui să fie că, dacă elementul în cauză ar fi scalat, acesta s-ar rupe. Acest lucru nu apare adesea, așa că înainte de a fi tentat să eliminați acele unități px, întrebați-vă dacă utilizarea lor este o necesitate absolută.

Wrapping Up

să facem o recapitulare rapidă a ceea ce am acoperit:

• rem șiem unitățile sunt calculate în valori de pixeli de către browser, pe baza dimensiunilor fontului din designul dvs.
• em unitățile se bazează pe dimensiunea fontului elementului pe care sunt utilizate.
• rem unitățile se bazează pe dimensiunea fontului elementuluihtml.
• em unitățile pot fi influențate de moștenirea dimensiunii fontului din orice element părinte

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

• utilizațiem unități pentru dimensionare care ar trebui să scaleze în funcție de dimensiunea fontului unui alt element decât rădăcina.
• utilizațirem unități pentru dimensionarea care nu are nevoie deem unități și care ar trebui să se scaleze în funcție de setările dimensiunii fontului browserului.
• utilizați rem unități dacă nu sunteți sigur că aveți nevoie de em unități, inclusiv pe dimensiunile fontului.
• utilizațirem unități pe interogări media
• nu utilizațiem saurem în lățimi de dispunere a mai multor coloane – utilizați% în schimb.
• nu utilizațiem saurem dacă scalarea ar provoca inevitabil ruperea unui element de aspect.

sper că ați construit acum o imagine robustă și completă a exact cumem șirem funcționează unitățile și, prin aceasta, știți cum să le folosiți cel mai bine în desenele dvs.

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