Conversie em în px Em ↔ Pixels Gratuit Online Sigur
Scrieți o valoare în em și o citiți pe loc în px. Socoteala se face în browserul dumneavoastră, nu se trimite nimic nicăieri, iar de ce depinde rezultatul scrie mai jos, nu se presupune.
Nu se încarcă nimic
Mărimi obișnuite — Conversie em în px
| em | px |
|---|---|
| 0.5 | 8 |
| 0.75 | 12 |
| 1 | 16 |
| 1.25 | 20 |
| 1.5 | 24 |
| 2 | 32 |
| 2.5 | 40 |
| 3 | 48 |
| 4 | 64 |
De unde vin aceste unități
Pixelul din CSS nu e pixelul din ecranul dumneavoastră. Când afișajele au încetat să mai aibă o densitate previzibilă, o pagină măsurată în pixeli adevărați a devenit o pagină care se micșora pe măsură ce ecranele se ascuțeau, așa că pixelul CSS a fost redefinit ca o lungime de referință: cam 1/96 dintr-un țol, văzut de la o distanță comodă de citit. Tot restul paginii se clădește pe asta. Em-ul e mai vechi decât web-ul — la literele de plumb era lățimea unui bloc turnat, numit după majuscula M — iar în CSS înseamnă mărimea fontului în vigoare, și de aceea se schimbă pe măsură ce îmbricați elementele. Rem-ul a fost adăugat tocmai ca să scape de asta: e em-ul elementului rădăcină și nu se compune niciodată. Vw-ul a venit odată cu designul adaptiv: a suta parte din lățimea ferestrei, oricât ar fi ea.
Unde le întâlniți
Astea sunt unitățile oricărei foi de stil. Pixelii dau mărimea chenarelor, a umbrelor și a orice nu trebuie să scaleze; rem-ul dă mărimea literei, a spațierii și a așezării, așa încât o singură schimbare la rădăcină redimensionează o interfață întreagă; em-ul dă mărimea lucrurilor care trebuie să urmeze propriul lor text, cum e spațiul dinăuntrul unui buton; vw-ul dă mărimea titlurilor și a secțiunilor de deschidere care trebuie să umple ecranul pe orice dispozitiv. Conversia dintre ele e aritmetica zilnică a transformării unui design predat în pixeli într-o foaie de stil care scalează.
Întrebări frecvente
De ce 16 px e punctul obișnuit de plecare?
Fiindcă aceasta e mărimea implicită a textului în orice browser important, iar o foaie de stil care n-o suprascrie o moștenește. Un rem înseamnă deci 16 px la setarea implicită, și de aici vin conversiile cu care sunteți obișnuiți: 0,5 rem înseamnă 8 px, 1,5 rem înseamnă 24 px. Dacă un utilizator a mărit valoarea implicită din setările browserului, aceleași valori în rem cresc odată cu ea — ceea ce e exact rostul folosirii lor.
Să folosesc rem sau em?
Rem pentru tot ce trebuie să urmeze pagina ca întreg — scara literei, spațierea, lățimile de așezare — fiindcă se măsoară de la rădăcină și nu se adună niciodată. Em pentru tot ce trebuie să urmeze textul în care stă: spațiul interior al unui buton, distanța de lângă o pictogramă, retragerea unui citat. Greșeala obișnuită e să îmbrici unul într-altul elemente măsurate în em, unde 1,2 em înăuntrul a 1,2 em devine 1,44, apoi 1,73, până când textul din josul paginii are de două ori mărimea plănuită.
Răspunsul este exact?
Acolo unde cele două unități se definesc una prin alta prin numere întregi, da — pagina o spune deasupra cifrei, iar singura rotunjire e în câte zecimale se arată. Acolo unde raportul nu are zecimală finită, pagina scrie douăsprezece cifre semnificative și spune că relația e aproximativă, în loc să se prefacă.
Pleacă de pe dispozitivul meu ceva din ce scriu?
Nu. Socoteala se face în browserul dumneavoastră; nu se încarcă nimic și nici n-are unde. Odată deschisă pagina, funcționează și cu internetul oprit.
De ce convertiți em în px
O foaie de stil spune margin-bottom: 0.75em la un titlu, padding: 0.4em 0.9em la un buton și un line-height de 1.3em la un bloc de text. Sunt valori bune, flexibile, și sunt aproape imposibil de închipuit. Câți pixeli înseamnă marginea aceea? Se potrivește spațierea interioară a butonului cu cei 6 px și 14 px din fișierul de design? Ca să aflați, convertiți em în px: înmulțiți cu dimensiunea fontului la care se raportează em și citiți răspunsul în unitatea pe care o folosesc uneltele de design. Este o întrebare pe care dezvoltatorii și-o pun când revizuiesc cod, când verifică o versiune față de o machetă, când depanează o problemă de spațiere sau când predau o componentă terminată cuiva care gândește în pixeli.
Em este unitatea cea mai capricioasă de convertit din CSS, pentru că nu are o valoare fixă. Un em este dimensiunea fontului în vigoare acolo unde se folosește valoarea sau, pentru proprietatea font-size în sine, a părintelui. Așadar 1.5 em poate fi 24 px într-un loc și 36 px în altul, în aceeași foaie de stil, din aceeași regulă. De aceea convertorul nu ghicește. Cere dimensiunea fontului la care se raportează em, o arată lângă răspuns și calculează cu ea. Dacă nu cunoașteți dimensiunea, secțiunile de mai jos explică cum o găsiți în browser.
Calculul are loc în browserul dumneavoastră și nu se încarcă nimic. Mai jos veți găsi formula, cum găsiți baza potrivită, ce păstrează conversia și ce nu poate păstra, cum se înmulțesc valorile em imbricate, când au dezvoltatorii nevoie să convertească em în px și câteva obiceiuri care păstrează înțeleasă o foaie de stil bazată pe em.
Formula și baza
px este egal cu em înmulțit cu dimensiunea fontului
Formula este o singură înmulțire: px = em × bază. Cu o bază de 16 px, 1.5 em devine 24 px, 0.75 em devine 12 px, iar 2 em devine 32 px. Pagina tipărește baza lângă rezultat, deci o linie precum 1.5 em = 24 px (16 px) spune exact ce s-a presupus. Dacă dimensiunea fontului elementului este 20 px, tastați 20, iar 1.5 em devine 30 px.
Găsirea bazei în browser
Deschideți instrumentele pentru dezvoltatori, selectați elementul și priviți dimensiunea calculată a fontului. Acesta este numărul de tastat în câmpul bazei pentru orice proprietate în afară de font-size. Pentru font-size în sine, selectați în schimb părintele și citiți dimensiunea lui calculată. Durează câteva secunde și elimină cu totul ghicitul.
Când nu puteți vedea pagina
Dacă citiți cod fără pagină, urmăriți lanțul dimensiunilor de font în sus, pornind de la element: font-size-ul lui, dacă are unul, altfel al părintelui, și așa mai departe până la rădăcină, care este 16 px dacă foaia de stil sau cititorul nu a schimbat-o. Acolo unde o dimensiune este dată în em, înmulțiți de-a lungul lanțului. Este anevoios, motiv pentru care majoritatea echipelor aleg rem pentru dimensiunile fonturilor.
Ce păstrează conversia și ce nu poate
Păstrează proporția față de text
Rezultatul este dimensiunea în pixeli pe care o reprezintă em la baza pe care ați tastat-o. Scris în em, un spațiu sau o dimensiune urmează textul căruia îi aparține, iar conversia arată cât înseamnă asta pentru o anumită mărime a textului.
Nu poate da un singur răspuns pentru pagină
Aici trebuie să fiți atenți: em este relativ la dimensiunea fontului elementului însuși sau, pentru font-size, a părintelui, nu la rădăcină. Așadar același 1.5 em este 24 px într-un element de 16 px și 36 px într-unul de 24 px, iar em în interiorul em se înmulțește. Cifra de pe pagină este corectă pentru baza din câmp și pentru nimic altceva. Dacă vreți un singur număr care ține peste tot, pentru asta este rem. Ca să le comparați pe cele două, convertiți rem în px și vedeți cum o unitate relativă la rădăcină rămâne fixă.
Rotunjirea
Înmulțirea cu o bază număr întreg dă rezultate exacte pentru majoritatea valorilor. Dacă baza este zecimală, de exemplu 13.5 px, o valoare precum 1.2 em dă 16.2 px. Browserele tratează pixelii fracționari, dar când aveți nevoie de pixeli întregi, pentru o bordură filiformă sau o pictogramă pe o grilă, rotunjiți deliberat și verificați cum arată.
Cum se înmulțesc valorile em imbricate
O listă în interiorul unei liste
Luați o pagină al cărei text de corp este 16 px. O listă are font-size: 0.875em, adică 14 px. Elementele din ea au și ele font-size: 0.875em, adică 14 × 0.875 = 12.25 px. O listă în interiorul unui element face același lucru încă o dată: 10.7 px. La trei niveluri adâncime textul este minuscul, și nimeni nu a hotărât că ar trebui să fie așa. Când convertiți em în px pentru o componentă și răspunsul pare prea mic, imbricarea este primul lucru de verificat.
Urcarea pe lanț
Ca să aflați dimensiunea reală în pixeli a unui em imbricat, înmulțiți baza cu fiecare valoare pe drumul în jos: 16 × 0.875 × 0.875 = 12.25. Convertorul face câte un pas pe rând. Pentru un lanț, convertiți prima valoare, folosiți răspunsul drept bază pentru a doua și continuați. Este aceeași aritmetică pe care o execută browserul.
Cum opriți acumularea
Folosiți rem pentru dimensiunile fonturilor, astfel încât fiecare dimensiune să se raporteze la rădăcină, și păstrați em pentru spațiere, astfel încât spațierile interioare și marginile să urmeze textul propriului element. În această combinație nu se acumulează nimic, iar valorile em pe care le convertiți sunt mereu relative la o dimensiune de font pe care o puteți citi pe loc.
Valori uzuale
Tabelul de la baza paginii
Pagina include un tabel cu valorile în pixeli la care corespund cifrele em uzuale la baza pe care o setați: 0.5 em este 8 px, 0.625 este 10, 0.75 este 12, 0.875 este 14, 1 este 16, 1.125 este 18, 1.25 este 20, 1.5 este 24, 2 este 32, 3 este 48 și 4 este 64. La baza implicită acestea sunt aceleași numere ca pentru rem. Schimbați baza și tabelul se schimbă odată cu ea, ceea ce este o bună cale de a vedea ce face cu adevărat em.
Încercați două baze alăturate
Tastați 1.5 cu baza 14, apoi cu baza 20. Obțineți 21 și 30 de pixeli. Aceasta este toată deosebirea dintre em și rem într-un singur experiment: aceeași cifră, două elemente, două mărimi.
Cum convertiți aici em în px
Tastați valoarea em
Introduceți dimensiunea în em în primul câmp. Zecimalele sunt acceptate, deci 0.714 merge la fel de bine ca 1.
Setați dimensiunea fontului la care se raportează em
Tastați dimensiunea fontului elementului sau a părintelui lui dacă proprietatea este font-size. Dacă nu sunteți sigur, lăsați 16 și tratați rezultatul ca pe o aproximare.
Citiți valoarea în pixeli
Răspunsul apare pe loc, cu baza afișată lângă el. Copiați-l în notițele dumneavoastră sau comparați-l cu fișierul de design.
De unde vin aceste unități
Em
Em este mai vechi decât web-ul. În tipografia cu litere de metal era lățimea unui bloc turnat, numit după majuscula M, iar tipografii încă vorbesc despre liniuțe em și spații em. În CSS înseamnă dimensiunea fontului în vigoare, motiv pentru care se schimbă pe măsură ce imbricați elemente.
Pixelul și rem
Când ecranele au încetat să mai aibă o densitate previzibilă, o pagină măsurată în pixeli reali a devenit o pagină care se micșora pe măsură ce ecranele deveneau mai clare. Așa că pixelul CSS a fost redefinit ca o lungime de referință: aproximativ 1/96 dintr-un inch văzut de la o distanță comodă de citit. Rem a fost adăugat pentru a scăpa de acumularea lui em: este em-ul elementului rădăcină și nu se înmulțește niciodată. Dacă lucrați cu ambele, convertiți px în em ca să mergeți în sens invers.
Când convertesc dezvoltatorii em în px
Verificarea unei versiuni față de un fișier de design
Un designer predă un fișier în pixeli, iar codul este în em. Ca să verificați dacă pagina se potrivește, convertiți em în px folosind dimensiunea fontului fiecărei componente. Un buton cu o etichetă de 14 px și o spațiere interioară de 0.714em 1.429em ar trebui să iasă la 10 px și 20 px, iar dacă designul spune 12 și 24, una dintre ele este greșită.
Depanarea spațierii
Când un spațiu pare prea mare sau prea mic, cauza este de obicei o valoare em care se raportează la un font mai mare sau mai mic decât vă așteptați. Convertirea ei cu dimensiunea calculată a fontului elementului vă spune pe loc dacă aritmetica este problema.
Citirea unui cod necunoscut
Foile de stil moștenite sunt pline de valori em ale căror dimensiuni în pixeli trebuie să le reconstruiți. Convertirea câtorva dintre cele principale, cu bazele potrivite, vă dă o hartă a designului.
Scrierea documentației și a testelor
Cei care testează o pagină descriu ce văd în pixeli. Un dezvoltator care spune că spațierea interioară este 0.9em înseamnă puțin pentru un tester; 12.6 px înseamnă ceva. Conversia face ca cele două părți să se înțeleagă.
Capcane când convertiți em în px
Folosirea bazei greșite
Cea mai frecventă greșeală. Pentru font-size folosiți dimensiunea părintelui; pentru toate celelalte proprietăți, pe cea a elementului însuși. Verificați proprietatea înainte de a tasta baza.
Uitarea unui părinte în em
Dacă dimensiunea părintelui este ea însăși în em, trebuie să urmați lanțul. Folosiți valoarea calculată din instrumentele pentru dezvoltatori ca să scurtați drumul.
Presupunerea că ecranul arată aceiași pixeli
Un pixel CSS nu este un pixel de dispozitiv. Pe un ecran de densitate mare un pixel CSS poate fi doi sau trei pixeli de dispozitiv. Conversia dă pixeli CSS, unitatea pe care o împart uneltele de design și foaia de stil.
Luarea răspunsului drept o promisiune
Dacă cititorul mărește textul sau componenta este refolosită cu altă dimensiune de font, pixelii se schimbă, așa cum trebuie. Numărul convertit descrie o singură situație, nu pe toate.
Întrebări pe care și le pun oamenii înainte de conversie
Câți pixeli înseamnă 1 em?
Atâția câți are dimensiunea fontului în vigoare: 16 px pentru textul de corp obișnuit la valoarea implicită, 24 px într-un element de 24 px.
Câți pixeli înseamnă 2 em?
De două ori dimensiunea fontului în vigoare. La 16 px asta înseamnă 32 px.
De ce arată browserul meu altceva?
Dimensiunea reală a fontului elementului este alta decât baza pe care ați tastat-o. Citiți dimensiunea calculată a fontului în instrumentele pentru dezvoltatori.
Este em același lucru cu rem?
Nu. Em este relativ la element, rem la rădăcină.
Este numărul meu încărcat?
Nu. Aritmetica rulează în browserul dumneavoastră și nimic nu este trimis nicăieri.
Cum mă întorc?
Cu px în em, care împarte în loc să înmulțească.
Obiceiuri care păstrează înțeleasă o foaie de stil în em
Comentați baza
O linie precum padding: 0.75em 1.25em; /* 12px 20px at 16px */ costă câteva caractere și îl scutește pe următorul cititor de o conversie. Consemnează baza pe care ați presupus-o.
Setați dimensiunea fontului o dată pe componentă
Definiți dimensiunea fontului componentei pe elementul ei rădăcină și raportați-vă la ea cu em în interior. Baza este atunci aceeași pentru fiecare valoare din componentă, iar dumneavoastră puteți converti em în px față de ea cu încredere.
Păstrați em pentru spațiere, rem pentru text
Este împărțirea la care se opresc cele mai multe foi de stil și păstrează aritmetica simplă. Pentru dimensiuni relative la ecran, px în vw și vw în px sunt uneltele.
Testați la o altă dimensiune a textului
Măriți dimensiunea implicită a textului în browser și priviți pagina. Dacă spațierea urmează textul, valorile em funcționează. Dacă nu, ceva a rămas în pixeli.
O metodă pentru cazurile incomode
Lucrați din exterior spre interior
Când o componentă se află adânc în interiorul altora, iar valorile ei em par încurcate, porniți de la elementul cel mai exterior a cărui dimensiune o cunoașteți și lucrați spre interior, convertind câte un nivel pe rând. Notați fiecare dimensiune în pixeli pe măsură ce mergeți. După două sau trei niveluri întregul lanț este pe hârtie și puteți vedea exact de unde vine un număr surprinzător. Durează un minut și înlocuiește o oră de ghicit.
Hotărâți dacă să simplificați
Dacă trebuie să convertiți em în px prin patru niveluri ca să înțelegeți un layout, foaia de stil vă spune ceva. Gândiți-vă să mutați dimensiunile fonturilor în rem, astfel încât fiecare să se raporteze la rădăcină, și să lăsați în em doar spațierea. Pagina va arăta la fel și va fi mult mai ușor de citit anul viitor.
Convertoare înrudite
Aceeași familie de unelte acoperă conversiile vecine. Pentru a vă întoarce la em, folosiți px în em. Pentru dimensiuni relative la rădăcină există px în rem și rem în px, iar pentru dimensiuni relative la ecran, px în vw și vw în px. Pentru culorile aceleiași foi de stil, HEX în RGB și RGB în HEX se ocupă de notații.
Un exemplu lucrat
Să spunem că revizuiți o componentă de buton. Eticheta are 14 px, CSS-ul spune padding: 0.714em 1.429em și un spațiu de 0.5em între o pictogramă și etichetă. Tastați 14 ca bază, apoi 0.714 și citiți 10 px, 1.429 și citiți 20 px, 0.5 și citiți 7 px. Fișierul de design spune 10, 20 și 8. Două din trei se potrivesc, așa că vă uitați la spațiu: 8 px la o bază de 14 ar fi 0.571 em, iar cineva l-a rotunjit la 0.5. Îl semnalați la revizuire, iar remedierea înseamnă un singur număr.
O scurtă listă de verificare
Înainte de conversie
Găsiți dimensiunea fontului la care se raportează em, din instrumentele pentru dezvoltatori sau din lanțul dimensiunilor de font din cod.
În timpul conversiei
Tastați valoarea em, setați baza și citiți pixelii, notând baza afișată lângă rezultat.
După conversie
Comparați cu fișierul de design. Dacă numerele diferă, verificați baza înainte să bănuiți codul.
Greșeli frecvente
Folosirea lui 16 fără verificare
Este corect doar când dimensiunea fontului elementului este 16 px.
Confundarea lui em cu rem
Arată la fel și se comportă diferit. Folosiți pagina potrivită pentru fiecare.
Uitarea faptului că em se acumulează
O valoare dintr-un element imbricat este relativă la o dimensiune pe care poate nu ați văzut-o. Urmați lanțul.
Numerele dumneavoastră rămân pe dispozitiv
Calculul are loc local. Valorile dumneavoastră sunt folosite de propriul browser și nimic nu este trimis nicăieri. Nu e nimic de șters după aceea și nici cont de creat. Aceasta este calea simplă de a converti em în px.
Rezumat
Ca să convertiți aici em în px, tastați dimensiunea în em și dimensiunea fontului la care se raportează și citiți pe loc rezultatul în pixeli, folosind formula px = em × bază. Conversia păstrează proporția relativă la dimensiunea fontului în vigoare acolo unde se folosește valoarea. Nu poate da un singur răspuns pentru o pagină: em este relativ la elementul însuși sau, pentru font-size, la părinte, așa că același 1.5 em este 24 px într-un element de 16 px și 36 px într-unul de 24 px, iar em în interiorul em se înmulțește. Pentru un singur număr care ține peste tot, folosiți rem. Nu se încarcă nimic.