Share
Am scris recent despre ems; ce sunt, modul în care sunt folosite și câteva biți și piese pe care să le aveți în minte când le implementați singuri. Am scratat doar suprafața, totuși, și firul de comentarii a aruncat de două ori mai multe întrebări ca articolul a răspuns! În această urmărire voi lua lucrurile mai departe, uitandu-mă la ems chiar mai detaliat.
E pe Dribbble Notă: Articolul precedent acoperă toate elementele de bază. Vă recomandăm să le citiți înainte de a merge mai departe.
Subiectul măsurărilor unice (adică: valori fără pixeli, procente, ems, curți, șanțuri ...) a fost oferită de un cuplu de persoane ultima oară, mai ales că am încurajat utilizarea ems pentru specificarea inaltimea liniei.
Ems are sens perfect în acest caz, deoarece sunt relativ la marimea fontului. Dacă textul în cauză crește sau se micșorează, la fel este și înălțimea liniei dacă este setată în ems. Unitățile absolute, ca și pixelii, ar mizeria cu adevărat. Același lucru este valabil și pentru spațiul dintre litere, un alt exemplu de dimensiune care ar trebui întotdeauna să fie relativ la dimensiunea font-ului.
Cu toate acestea, putem îmbunătăți acest lucru. Ems complică lucrurile ca valori în cascadă; elementele moștenesc valorile părinților lor. Luați acest aranjament, de exemplu: un articol care conține un paragraf:
Dacă aplicăm articolul înălțimea liniei, acesta va fi de asemenea moștenit de paragraful, care este bine:
Dar ceea ce paragraful este de fapt moștenirea este valoare calculată (în acest caz efectiv 24 pixeli), astfel încât înălțimea liniei sale să fie relativă la dimensiunea fontului articolului, și nu la cea proprie. Dacă mărim dimensiunea fontului paragrafului la echivalentul a 20px:
apoi înălțimea liniei rămâne fixă la 24px. În mod ideal, dorim ca înălțimea liniei să apară 1,5 * 20 = 30 px.
Aici intră măsurătorile unitare. Prin eliminarea unității em din linia înălțimii articolului:
paragraful va moșteni valoarea unică în schimb, 1.5. Înălțimea liniei paragrafului este acum relativă la dimensiunea fontului propriu, bingo!
Accentsconagua
Interesant însă, acest lucru nu se aplică spațiul dintre litere. Și puteți uita complet marjele, text-liniuță, genul ala de lucru.
Dacă sunteți interesat să citiți mai multe despre acest subiect Eric Meyer a acoperit-o în mod solid înapoi în 2006, plus Harry Roberts are o imagine de ansamblu mare de unități de măsură de la un cuplu de ani înapoi.
Întrucât microtypography se referă la detaliile minuscule dintr-un document (semne de punctuație, ligaturi, despărțire, kerning și așa mai departe) macrotypography se ocupă de toate lucrurile "mari". Gândiți-vă la toate aspectele tipografiei care fac un corp de text lizibil; spațiul alb, lungimea liniei (măsurarea), indentarea paragrafului etc..
Aruncați o privire la această configurație a coloanei de fluid:
Un aspect perfect decent; două divizii, fiecare cu o lățime de aproximativ 50%, cu o lățime de umplutură stânga și dreaptă pentru a forma jgheaburile (în interiorul fiecărei div, presupunând că este folosit box-size: border-box). În mod obișnuit, ați fi tentați să definiți căptușeala utilizând pixeli sau (chiar mai bine) procente, dacă v-ați simțit foarte flexibil.
Cu toate acestea, pixelii și procentele vor avea un efect negativ asupra lizibilității conținutului, dacă (când) dimensiunea fontului este modificată. Lățimea jgheabului, ca și în cazul spațiilor libere în general, ar trebui să fie într-adevăr dimensionată în raport cu textul. În acest exemplu, avem două coloane de text, cu jgheaburi aplicate ca procent din lățimea coloanei, exact așa cum am descris mai sus:
.coloană lățime: 50%; plutește la stânga; umplutură: 0 3%;
Acesta este un demo live, arunca o privire și mizerie în jurul valorii de ea cu tine ... Când modificați mărimea fontului, veți observa că jgheabul devine relativ mai restrâns, estompând împărțirea între coloanele textului și făcându-l mai dificil de citit.
Acesta este un exemplu extrem, cu text absurd de mare pentru lățimea coloanei, dar ilustrează punctul ... Mult mai bine ar fi definirea padding folosind ems:
.coloană lățime: 50%; plutește la stânga; umplutură: 0 1.2em;
În acest fel, jgheabul crește și se micșorează împreună cu textul, menținând distanța dintre coloane și păstrând lucrurile ușor de citit.
Încercați să jucați cu acest ... Dacă nu utilizați încă ems, este posibil să ajungeți la unul din cele două lucruri pe care nu le place pentru ele; faptul că valorile lor sunt în cascadă sau trebuie să se calculeze aceste valori în primul rând.
Abordarea de 62,5% (propusă mai întâi de Richard Rutter încă din 2004) vă va ajuta pe a doua. Pur și simplu, în loc de a seta dimensiunea fontului de bază la 100% (pe care o vom presupune că este de 16 pixeli), am setat-o la 62,5%, efectiv 10px.
Din acest punct, 1em = 10px. Prin urmare:
| Ems | Pixeli echivalenți |
| 0.5em | 5px |
| ... | ... |
| 1.1em | 11px |
| 1.2em | 12px |
| 1.3em | 13px |
| 1.4em | 14px |
| ... | ... |
| 47.3em | 473px |
și așa mai departe, care ar trebui să elimine o parte din aritmetica mentală. in orice caz, există o mică problemă cu această abordare și totul are de a face cu ...
Vom vorbi puțin despre avertismentul de 62,5% într-un moment, dar mai întâi trebuie să stabilim câteva fundații.
În cea mai simplă formă, interogările media ne ajută să aplicăm regulile CSS în condiții diferite, în mod obișnuit în funcție de dimensiunea ecranului. Rezoluțiile ecranului sunt măsurate în pixeli, deci este logic doar să definim interogările media în același mod:
@media numai pe ecran și (min-width: 600px) / * unele chestii * /
Să aplicăm acest lucru demo-ului nostru anterior, să împărțim coloanele după un anumit punct.
În această primă abordare mobilă, coloanele noastre sunt împărțite odată ce fereastra de vizualizare ajunge la 600 de pixeli Figura arbritrary de 600px se întâmplă să fie bine în acest caz; lungimea optimă a liniei (sau măsura) este un subiect foarte dezbătut, dar, după cum spune Robert Brighurst:
Orice dintre cele 45 până la 75 de caractere este considerat pe scară largă o lungime de linie satisfăcătoare pentru o pagină de o singură coloană setată într-o față de text serifat într-o dimensiune a textului. Linia de 66 de caractere (numărarea literelor și a spațiilor) este considerată ca fiind ideală.
Robert Brighurst - Elementele stilului tipografic
În demo-ul nostru, la font-size de 1em, măsura depășește acum 70 de caractere înainte de a se împărți în două coloane.
Odată ce am lovit două coloane, măsura poate fi puțin mai restrânsă decât am prefera în mod ideal, dar aceste coloane sunt perfect bune pentru scopurile acestei demonstrații. Cu toate acestea, problemele apar atunci când modificăm dimensiunea fontului browserului (comanda apăsată +).
Cu mărimea fontului stimulată la "Foarte mare" (folosesc Chrome), măsurile noastre din coloană sunt cale prea îngust, făcând conținutul destul de greu de citit. Din acest motiv, ar trebui să luăm în considerare și întrebările noastre media referitoare la dimensiunea fontului.
Amintiți-vă formula din articolul nostru precedent?
Scopul nostru este de 600 de pixeli, dintr-o mărime font-ului mostenit de 16 pixeli. 600/16 = 37,5em, așa că haideți să ne schimbăm interogarea mediatică pentru a reflecta că:
Acum, când setările dimensiunii fontului browserului sunt modificate, vedem o diferență în felul în care se comportă interogarea media. Cu text mai mare, iată interogarea media bazată pe pixeli, cu portul de vizualizare stabilit la o lățime aproximativă de 630 pixeli:
Având în vedere că, la această lățime a ecranului, interogarea media bazată pe elemente em păstrează lucrurile într-o coloană; frumos și ușor de citit.
Măriți / micșorați și urmăriți intrarea în vigoare a interogării media Iată criza; em-bazate interogări mass-media sunt total dezinteresat în orice dimensiune pe html, corp, sau orice altceva; ele sunt relativ la dimensiunea fontului browserului. Aceasta înseamnă că, prin setarea mărimii fontului de bază la orice altceva decât 100%, va trebui să gestionați două scale de valori em.
Lucrați dintr-o bază de 100% și totul va începe de la condiții echitabile. În plus, așa cum susține grupul Filament, lucrul în acest fel vă îndepărtează de gândirea în pixeli, ceea ce este un lucru bun.
Un cuvânt a apărut mai mult decât oricare altul în comentariul firului din articolul precedent; mixin. Dacă vă străduiți să obțineți capul în jurul calculelor, atunci de ce să nu lăsați un preprocesor CSS să facă ridicarea greu pentru tine?
Cu preprocesoarele CSS, cum ar fi Sass, LESS și Stylus, puteți defini mixuri și funcții. Aceștia acceptă parametrii, apoi calculează și recuperează valorile CSS pentru tine.
Notă: Dacă sunteți nou în acest concept, aruncați o privire la Mastering Sass: Lecția 2 în care Jeffrey introduce amestecuri Sass.
Mixurile și funcțiile se pot ocupa de tot felul de lucruri pentru dvs., inclusiv de problemele matematice care înconjoară ems.
Luați acest exemplu simplu de la Garrett Winder la Erskine. El începe să definească o funcție (numită "em") care acceptă două valori (la fel ca formula noastră de mai devreme), deși valoarea contextului are o valoare prestabilită de 16, deci nu trebuie să fie specificată din nou decât dacă este necesar.
Apoi, putem folosi această funcție "em" în CSS ulterior, cerându-i să calculeze echivalentul a 30px:
Care, atunci când este compilat, scoate CSS în forma sa brută:
Iar acest lucru nu este singurul exemplu de acest tip - mii de dezvoltatori din front-end au taiat dintii de preprocesare, scriind propriile mixuri em. Remus prea; prin introducerea valorii dorite a pixelilor în acest mixin prezentat de Chris Coyier, aveți la fel de ușor de redat la ieșire, cu pixeli alternativi.
Iată amestecul. 
Iată utilizarea. 
Iată rezultatul. Lista este aproape nesfârșită, dar dacă aveți alte mixuri pe care doriți să le utilizați în propria voastră muncă (pentru trimiterea ems și rems), spuneți-mi în comentariile și le voi adăuga aici:
Este un subiect larg, există în mod clar sarcini pentru a lua în, dar scufundări în lumea de ems este una dintre cele mai satisfăcătoare provocări în dezvoltarea front-end web. Opriți gândirea pixelilor și începeți să gândiți relativ, astăzi!
