este echivalent cu 20 de pixeli.

Ems își ia numele de la imprimare. Tocmai atunci când termenul a fost folosit pentru prima dată este neclar, ci ca majusculă M (pronunțată EMM) reprezintă cel mai îndeaproape blocul de tipărire pătrat pe care au fost plasate literele de imprimare, a ajuns să-și împrumute numele măsurătorii. Oricare ar fi dimensiunea punctului fontului în cauză, blocul majusculei M va defini Em.

Un em este de obicei o atingere mai mare decât formularul, dar tu ai ideea.

Un majusculat M în Calendas Plus - pătratul înconjurător este de 1m înălțime, 1m lățime

Conversie de la pixeli

Am început deja să setăm scala tipografică în pixeli, așa cum convertim acest lucru în ems? Un calcul simplu, care exprimă dimensiunea dorită a fontului în raport cu dimensiunea caracterelor corpului:

Folosind dimensiunea corpului presupunem că suntem 16 pixeli, urmărindu-ne să convertim 36 de pixeli

, primim:

Iată cum se convertește scala noastră, utilizând metoda de mai sus:

Unele dintre aceste valori pot deveni puțin complexe, dar nu vă fie frică să fiți cât mai precis cu locurile zecimale. Navigatorii vor face mereu tot ce pot pentru a face valorile exacte.

Bacsis: Este adesea util să faceți o notă în comentarii, pentru a vă reaminti cum ați calculat fiecare valoare em.

Probleme cu cascadă

Cel mai mare număr de oameni care suferă de bâzâit cu ems provine din complicațiile care apar din cascadă. O valoare em este relativă la valoarea cea mai apropiată a părintelui, ceea ce poate provoca probleme accidentale dacă nu acordați atenție. Aruncați o privire la css-ul următor, care are ca scop obținerea ancorelor și paragrafelor dimensionate în mod egal:

Acum, aruncați o privire la acest marcaj nevinovat:

După cum v-ați aștepta, totul pare bine în browser. Atât paragraful, cât și ancora sunt afișate la 1.2m, față de mărimea caracterelor corpului (1.2 * 16px = 19.2px).

Cu toate acestea, dacă am introduce oa doua ancoră în paragraful, să vedem ce se întâmplă:

Ancora în cadrul paragrafului este încă dimensionată la 1.2m, dar asta e acum relativ la paragraful părinte, care este deja 19.2px - (1.2 * 19.2px = 23.04px). Acest lucru ne oferă ancore foarte mari în unele părți ale paginii noastre; greu de dorit.

Notă: Articolele listate în noduri din meniurile de navigare reprezintă un exemplu clasic în care cascadarea poate scăpa de sub control - aveți grijă să o faceți.

Fixul

Nu există nici o soluție pentru acest lucru; ultimul lucru pe care doriți să-l faceți este să adăugați o regulă suplimentară pentru a reduce dimensiunea ancorelor care se întâmplă să fie în paragrafe - acesta este un bilet unic pentru Migrainesville. Pentru a menține CSS și HTML ușor de întreținut, este important să păstrați-l pe Simple ™.

• Păstrați marcajul simplu și modular.
• Definiți ems-ul în mod clar și într-o manieră restrânsă - nu mergeți să-i aruncați peste tot.
• Încercați să restricționați dimensiunile fontului la elementele tipografice; fiți precauți să aplicați dimensiunile fontului elementelor structurale.

Asta ar trebui să ajute! Folosirea Ems înseamnă că va trebui să vă gândiți destul de greu uneori, dar acest lucru vă va forța să vă curățați actul și să fiți eficient în codarea.

Rems

Rems-urile sunt utile și se comportă exact în același mod ca ems, fără cascadă. Fiecare Rem pe care îl definiți este relativ la dimensiunea fontului corpului. Suportul nu este la fel de bun, cu toate acestea, astfel încât IE8 și mai în vârstă vor avea nevoie de o rezervă bazată pe pixeli.

Ce este despre folosirea Ems în altă parte?

Am acoperit CSS marimea fontului proprietate; un prim pas sensibil în utilizarea ems, dar acum să ne uităm la inaltimea liniei. Dacă vreodată există o proprietate care strigă "nu utilizați valorile pixelilor", este înălțimea liniei. Înălțimea liniei (discutată în timpul unui articol anterior mai detaliat) a unui element tipografic ar trebui să fie mereu să fie relativ la dimensiunea fontului. Dacă aveți o poziție a cărei mărime este setată în ems, dar a cărei înălțime a liniei este setată în pixeli, ați putea ajunge cu o suprapunere urâtă și o relație vizuală proastă în general.

Nu există o regulă fixă ​​pentru cât de mare ar trebui să fie înălțimea liniei, dar 1,5 este o valoare rezonabilă pentru a încerca și va face ca tipografia dvs. să fie ușor de citit.

În acest caz, 1,5 este 1.5 * 18px care este de 27 de pixeli

Bacsis: Aruncați o privire la sugestia lui Bryan Gruhlke în comentariile referitoare la utilizarea valorilor fără valoare unică cu înălțimea liniei ...

Notă: Lucrurile se pot complica dacă încercați să setați o rețea de referință cu ems, dar acesta este un subiect pentru un alt articol.

Elemente structurale

Odată ce intrați în modul de gândire a menținerii aspectului flexibil în ceea ce privește dimensiunea fontului, veți găsi că vă bazați pe pixeli mai puțin și mai puțin pentru a stabili elemente pe pagină.

Dacă vorbim despre structuri fluide, ar trebui să folosiți% valori pentru a determina lățimea unui element dat. Pixelii nu trebuie să fie văzuți când se determină dimensiunile orizontale.

Distanțele verticale pot fi realizate foarte ușor cu ems; din nou, este o chestiune de a fi curat cu marcajul și stilul tău. Luați în considerare limitarea marjelor la fund a elementelor dvs., pentru a facilita gestionarea ritmului vertical.

Dacă trebuie să definiți a înălţime (care poate fi dificil în machete flexibile) folosesc și ems. Poate că construiți o navigație și trebuie să definiți înălțimea legăturilor de meniu - acestea ar trebui să crească și să se micșoreze cu dimensiunea fontului.

Colturi rotunjite pe un buton? Seteaza border-radius folosind ems, deci totul se scalde perfect.

Uitați-vă la acest Codepen pentru un exemplu mai vizual despre ceea ce vorbesc aici

Umbra de text, umbra cutie, ditto.

RWD

Și dacă trebuie să schimbați dimensiunea Tot în anumite circumstanțe, cum ar fi porturile de vizualizare mai mici? Modificați dimensiunea fontului de bază a corpului în interogarea media corespunzătoare corp font-size: 90%; și wham! Întregul site vă scade în intervalul de timp necesar pentru a lovi intrarea.

excepţii

Ca toate regulile științifice excelente, trebuie să existe o excepție pentru a dovedi acest lucru. În acest caz, mă pot gândi la un scenariu bun în care este posibil să aveți nevoie de pixeli; frontiere. Dacă definiți o lățime a frontierei (sau înălțimea unei reguli orizontale) în ems, ea se poate calcula atât de mică încât browserul nu o poate face.

În acest caz, pur și simplu nu o veți vedea.

Aruncați o privire la acest demo de tip wee

Pentru regulile orizontale, este posibil să aveți un stil asemănător:

hr height: .02em; frontieră: nici una; fundal: alb; marja: 2em 0; contur: nici unul; afișare: bloc; clar: ambele; lățime: 100%; 

Pentru a preveni dispariția în cazul în care dimensiunea corporală este prea mică, puteți adăuga aceasta:

 min-înălțime: 1px;

Acolo. Un pixel. La naiba.

Lățimile de margini nu pot avea o valoare minimă (din păcate), astfel încât o copie de siguranță similară în acest caz nu este posibilă. În schimb, puteți utiliza valorile lățimii marginii gros, mediu și subţire, deși aceste valori nu scară cu dimensiunea fontului mai bună decât pixelii.

Concluzie

Începeți să utilizați ems astăzi! Conținutul dvs. este motivat tipografic, indiferent dacă îl realizați sau nu. Referindu-se la pixeli, convertirea figurilor și a gândirii în ceea ce privește aspectul fix nu este chiar necesară. Începeți să vă gândiți în ems și veți uita în curând pixelii cu totul.

Dacă vă puteți gândi la o situație în care pur și simplu nu puteți utiliza ems, mi-ar plăcea să o aud în comentariile!

Citirea în continuare

• instrumentul de conversie pxtoem.com
• Cum am învățat să lăsăm singură dimensiunea implicită a fontului și să îmbrățișăm emul de către grupul Filament
• De ce Ems? de Chris Coyier
• Em (tipografie) pe Wikipedia
• Dimensiunea fontului cu rem putea fi evitată de Harry Roberts (o abordare care este mai puțin populară în aceste zile)
• Mixuri pentru Rem Font Dimensioning de Chris Coyier (dacă sunteți încrezător cu SASS)
• O explicație a ems-ului cu privire la "Elementele stilului tipografic aplicate pe Web"