Conversie px în em Pixels ↔ Em Gratuit Online Sigur
Scrieți o valoare în px și o citiți pe loc în em. 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 px în em
| px | em |
|---|---|
| 8 | 0.5 |
| 10 | 0.625 |
| 12 | 0.75 |
| 14 | 0.875 |
| 16 | 1 |
| 18 | 1.125 |
| 20 | 1.25 |
| 24 | 1.5 |
| 32 | 2 |
| 48 | 3 |
| 64 | 4 |
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 px în em
Em este cea mai veche unitate relativă din CSS și cea care provoacă cele mai multe certuri. Aveți o mărime în pixeli dintr-un fișier de design, 20 px de padding pe un buton, 14 px de spațiu lângă o pictogramă, 36 px pentru un titlu, și o vreți în em, ca să urmeze textul de care aparține. Când convertiți px în em puneți o întrebare anume: ce multiplu al mărimii curente a fontului este aceasta? Răspunsul depinde de un număr pe care pagina nu-l poate ghici, mărimea fontului în vigoare acolo unde se folosește valoarea, așa că convertorul pune acel număr într-un câmp și îl folosește pe față.
Motivul pentru a scrie mărimile în em este că lucrurile care aparțin textului ar trebui să crească odată cu textul. Padding-ul din interiorul unui buton ar trebui să fie mai mare când eticheta butonului este mai mare. Spațiul dintre o pictogramă și legenda ei ar trebui să se lărgească odată cu legenda. Marginea de jos a unui titlu ar trebui să rămână în proporție cu titlul. În toate aceste cazuri valoarea în pixeli este greșită imediat ce mărimea fontului se schimbă, iar valoarea în em este corectă la orice mărime. Acesta este tot argumentul pentru em și este unul puternic.
Calculul se face în browserul dumneavoastră și nimic nu este încărcat. Mai jos găsiți formula, motivul pentru care em cere mai multă grijă decât rem, capcana imbricării care produce mărimi surprinzătoare, locurile unde em este unitatea potrivită și o metodă de a alege între em și rem într-o foaie de stil reală.
Formula și baza
em este egal cu px împărțit la mărimea fontului
Formula este o singură împărțire: em = px ÷ bază. Cu o bază de 16 px, o valoare de 24 px devine 1,5 em, 8 px devine 0,5 em, iar 20 px devine 1,25 em. Pagina arată baza lângă rezultat, ca în 24 px = 1,5 em (16 px), ca să puteți vedea ce s-a presupus. Aritmetica este aceeași ca pentru rem. Sensul este diferit.
Ce este baza
Pentru rem, baza este mărimea fontului elementului rădăcină. Pentru em, este mărimea fontului elementului unde se folosește valoarea sau, pentru proprietatea font-size în sine, a părintelui. De aceea em nu are un singur răspuns: aceeași valoare dintr-o foaie de stil înseamnă mărimi diferite în pixeli în locuri diferite. Dacă convertiți un padding pentru un buton al cărui text este de 14 px, tastați 14 ca bază. Dacă convertiți o margine pentru un titlu de 32 px, tastați 32.
Valoarea implicită când nu știți
Dacă vreți doar o cifră aproximativă, lăsați baza la 16, mărimea textului obișnuit într-un browser pe care nimeni nu l-a schimbat. Rezultatul este corect pentru un bloc de text normal și vă dă o idee despre proporție chiar dacă elementul se dovedește a avea altă mărime.
Ce păstrează conversia și ce nu poate
Păstrează proporția față de text
Rezultatul este proporția față de mărimea fontului în vigoare acolo unde se folosește valoarea. Scris în em, un spațiu crește și se micșorează odată cu textul de lângă el, și exact așa ar trebui să se comporte spațierea în jurul cuvintelor.
Nu vă poate da un singur număr pentru pagină
Aceasta este partea la care trebuie să fiți atent. Em este relativ la mărimea fontului elementului însuși sau, pentru font-size, a părintelui, nu la rădăcină. Deci nu există un singur răspuns pentru o pagină: același 1,5 em înseamnă 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 valabil peste tot, pentru asta este rem. Ca să comparați, convertiți px în rem și vedeți cum se comportă aceeași valoare în pixeli.
Rotunjirea
Împărțirea la 16 dă valori curate pentru multe mărimi și zecimale periodice pentru altele. O valoare ca 0,8125 em este în regulă într-o foaie de stil, dar ați putea prefera să rotunjiți la 0,8 sau 0,85 dacă mărimea exactă nu contează. Păstrați cifra completă acolo unde precizia contează.
Capcana imbricării
Cum se compun valorile em
Să presupunem că o listă are font-size: 0.875em, iar elementele ei au și ele font-size: 0.875em. Lista este 87,5% din părintele ei. Fiecare element este 87,5% din listă, adică aproximativ 76,6% din părinte. O listă imbricată într-un element se micșorează din nou, la aproximativ 67%. După trei niveluri textul este foarte mic și nimeni nu a scris asta intenționat. Aceasta se înțelege prin a spune că em se compune.
De ce contează când convertiți px în em
Dacă convertiți o valoare în pixeli în em pentru font-size, baza pe care trebuie să o folosiți este mărimea fontului părintelui, nu a elementului însuși. Multe greșeli vin din folosirea celei greșite. Pentru alte proprietăți, precum padding și margin, baza este mărimea fontului elementului însuși. Regula este ușor de spus și ușor de uitat: font-size se uită în sus, orice altceva se uită la sine.
Cum evitați surprizele
Folosiți em pentru spațierea care urmează textul și rem pentru mărimile fonturilor. Astfel mărimile fonturilor nu se compun niciodată, deoarece se raportează la rădăcină, iar spațierea își urmează în continuare propriul text. Este combinația la care ajung cele mai multe foi de stil moderne.
Mărimi uzuale
Tabelul de la piciorul paginii
Sub convertor se află un tabel cu mărimi uzuale la baza pe care ați setat-o: 8 px este 0,5 em, 10 px este 0,625, 12 px este 0,75, 14 px este 0,875, 16 px este 1, 18 px este 1,125, 20 px este 1,25, 24 px este 1,5, 32 px este 2, 48 px este 3 și 64 px este 4. La o bază de 16, acestea sunt aceleași numere ca pentru rem, motiv pentru care oamenii le confundă. Diferența este în ce reprezintă 16.
Schimbarea bazei pentru a se potrivi cu elementul
Dacă setați baza la 14 pentru un buton mic, tabelul se schimbă: 14 px este acum 1 em, 7 px este 0,5 em, iar 21 px este 1,5 em. Încercați și veți vedea cum un padding de 1,5 em are o altă mărime în pixeli într-un buton de 14 px decât într-unul de 18 px și de ce asta este util.
Cum convertiți px în em aici
Tastați valoarea în pixeli
Introduceți mărimea în pixeli în primul câmp. Zecimalele sunt acceptate.
Setați mărimea fontului la care se raportează em
Tastați mărimea fontului elementului sau a părintelui lui dacă convertiți un font-size. Dacă nu sunteți sigur, lăsați 16 și tratați rezultatul ca pe o aproximare.
Copiați valoarea în em
Folosiți cifra în CSS cu unitatea ei, ca în padding: 1.25em. Un număr fără unitate nu este valid pentru majoritatea proprietăților.
De unde vin aceste unități
Em în literele de plumb
Em este mai vechi decât web-ul. În literele de plumb era lățimea unui bloc turnat, numit după litera mare M, și era unitatea firească de spațiu orizontal pe rândul tipărit. Tipografii vorbesc și acum despre liniuțe em și spații em. În CSS ideea supraviețuiește într-o formă mai lejeră: un em este mărimea fontului curent.
Pixelul și rem
Pixelul CSS este o lungime de referință de aproximativ 1/96 dintr-un inch văzut la o distanță comodă de citit, nu un punct de pe ecranul dumneavoastră. Rem a fost adăugat ca să dea dezvoltatorilor o unitate relativă care nu se compune niciodată: este em-ul elementului rădăcină. Între ele, pixelul, em și rem acoperă cele trei nevoi: mărime fixă, mărime relativă la text și mărime relativă la pagină.
Unde em este alegerea potrivită
Padding în interiorul butoanelor și al câmpurilor de formular
Un buton cu padding: 0.5em 1em arată la fel în proporție la orice mărime de text. Măriți eticheta și tot butonul crește odată cu ea, ceea ce vreți de la o componentă care poate fi folosită într-o bară de instrumente și într-un banner mare.
Spațiul de lângă pictograme
O pictogramă urmată de o legendă are nevoie de un spațiu care se scalează odată cu legenda. O margine de 0.4em face asta; o margine de 6px nu.
Margini în jurul titlurilor și paragrafelor
Ritmul vertical dintr-un document este mai ușor de păstrat când spațierea paragrafelor este în em, deoarece urmează mărimea paragrafului. Marginea unui titlu în em rămâne în proporție pe măsură ce titlul își schimbă mărimea la puncte de întrerupere diferite.
Interogări media
Punctele de întrerupere scrise în em răspund la mărimea textului cititorului, astfel încât aranjarea trece la forma ei îngustă mai devreme pentru cineva care și-a mărit textul. În interogările media, em se raportează la valoarea implicită a browserului, nu la vreun element, deci nu se compune.
Capcane când convertiți px în em
Folosirea bazei greșite
Cea mai frecventă eroare. Pentru font-size, folosiți mărimea părintelui; pentru orice altceva, pe cea a elementului însuși. Verificați ce proprietate convertiți înainte de a tasta baza.
Uitarea că părintele poate fi tot în em
Dacă mărimea fontului părintelui este ea însăși în em, trebuie să urmați lanțul în sus ca să aflați mărimea reală. Când o foaie de stil se complică, treceți mărimile fonturilor la rem și păstrați em pentru spațiere.
Așteptarea unei singure cifre pentru o componentă întreagă
O componentă care conține text de mărimi diferite nu are o singură valoare em pentru părțile ei. Convertiți fiecare parte față de propria bază.
Amestecarea em și rem pentru aceeași proprietate
Un padding de 1rem lângă o margine de 1em este permis și adesea derutant. Alegeți o regulă, precum rem pentru mărimile fonturilor și em pentru spațiere, și respectați-o.
Întrebări pe care și le pun oamenii înainte de conversie
Câți em sunt 16 px?
Unul, dacă mărimea fontului în vigoare este 16 px. Dacă mărimea fontului elementului este 20 px, atunci 16 px sunt 0,8 em.
Este em mai bun decât rem?
Niciunul nu este mai bun. Rem este mai bun pentru mărimile fonturilor și aranjarea globală. Em este mai bun pentru spațierea care ar trebui să urmeze propriul text.
De ce este padding-ul meu mai mare decât mă așteptam?
Pentru că este relativ la mărimea fontului elementului, care poate fi mai mare decât ați presupus. Verificați mărimea calculată a fontului în instrumentele pentru dezvoltatori ale browserului.
Pot folosi zecimale?
Da. Valori precum 0.625em și 1.333em sunt normale.
Este numărul meu încărcat?
Nu. Aritmetica rulează în browserul dumneavoastră și nimic nu este trimis nicăieri.
Cum mă întorc?
Cu em în px, care înmulțește în loc să împartă.
Alegerea înțeleaptă când convertiți px în em
Hotărâți cui îi aparține valoarea
Dacă aparține textului, em este potrivit. Dacă aparține paginii, precum lățimea unei coloane sau spațiul dintre secțiuni, rem sau o unitate de fereastră de afișare se potrivește mai bine. Px în vw exprimă o mărime ca o parte din lățimea ecranului.
Scrieți intenția într-un comentariu
O linie ca padding: 0.75em 1.25em; /* 12px 20px la 16px */ face raționamentul vizibil. Când mărimea fontului se schimbă mai târziu, veți ști ce trebuiau să fie numerele.
Țineți mărimea fontului componentei într-un singur loc
Setați mărimea fontului pe elementul rădăcină al componentei și lăsați tot ce este înăuntru să se raporteze la ea. Atunci valorile em dinăuntru înseamnă același lucru peste tot în componentă și puteți converti px în em față de o singură bază.
Obiceiuri bune când convertiți px în em
Convertiți px în em o componentă pe rând
Nu încercați să convertiți px în em pentru o foaie de stil întreagă dintr-o dată. Luați o singură componentă, precum un card sau un buton, hotărâți mărimea fontului ei și convertiți fiecare dintre valorile ei de spațiere față de acea mărime. Când componenta este gata, testați-o la două sau trei mărimi de text. Apoi treceți la următoarea.
Folosiți un calculator pentru valorile ciudate, nu pentru cele rotunde
Valori precum 8, 16 și 24 de pixeli se convertesc în numere em ordonate la o bază de 16. Valori ciudate precum 22 sau 13 dau zecimale lungi. Când convertiți px în em pentru acestea, hotărâți dacă designul chiar are nevoie de cifra exactă sau dacă cea mai apropiată valoare em rotundă ar fi la fel de bună. Designerii sunt adesea mulțumiți să rotunjească, iar o foaie de stil ordonată este mai ușor de întreținut.
Păstrați o evidență a bazei
Un scurt comentariu lângă fiecare valoare em, spunând care a fost baza, ajută următoarea persoană. Dacă cineva schimbă mai târziu mărimea fontului componentei, va ști că spațierea o urmează prin design, nu din întâmplare. Scrierea asta o singură dată merită timpul pe care îl ia.
Comparați cu echivalentul rem
Dacă nu sunteți sigur dacă em sau rem se potrivește unei valori, convertiți px în em și în rem și întrebați-vă ce ar trebui să se întâmple când mărimea textului se schimbă. Dacă valoarea ar trebui să urmeze propriul text al elementului, luați em. Dacă ar trebui să urmeze pagina, luați rem.
Convertoare înrudite
Aceeași familie de instrumente acoperă conversiile vecine. Ca să vă întoarceți la pixeli, folosiți em în px. Pentru mărimi relative la rădăcină există px în rem și rem în px, iar pentru mărimi relative la ecran, px în vw și vw în px. Pentru culorile aceleiași foi de stil, HEX în RGB și HEX în HSL se ocupă de notații.
Un exemplu lucrat
Să presupunem că eticheta unui buton este de 14 px, iar designul dă butonului 10 px de padding vertical și 20 px de padding orizontal. Tastați 14 ca bază, 10 și citiți 0,714 em, tastați 20 și citiți 1,429 em. În foaia de stil scrieți padding: 0.714em 1.429em. Când același buton este folosit într-un banner mare cu o etichetă de 18 px, padding-ul devine 12,9 px și 25,7 px, în proporție. Dacă ați fi scris 10px și 20px, butonul ar fi arătat subțire în jurul textului mai mare.
O listă scurtă de verificare
Înainte de conversie
Hotărâți cărei proprietăți îi aparține valoarea și găsiți mărimea fontului față de care ar trebui să fie relativă.
În timpul conversiei
Tastați valoarea în pixeli și baza potrivită și copiați cifra em cu unitatea ei.
După conversie
Schimbați mărimea fontului componentei în browser și verificați că spațierea o urmează. Căutați valori em imbricate care se compun.
Greșeli frecvente
Folosirea mărimii rădăcinii ca bază pentru padding
Aceea este treaba lui rem. Em se raportează la mărimea fontului elementului însuși.
Folosirea em pentru fiecare mărime de font
Mărimile de font em imbricate se compun și vă surprind. Folosiți rem pentru mărimile fonturilor.
Rotunjirea la un număr frumos vizual, dar greșit
1,43 nu este același lucru cu 1,5 când este înmulțit cu un font mare. Păstrați destule cifre.
Numerele dumneavoastră rămân pe dispozitiv
Calculul se face local. Valorile dumneavoastră sunt folosite de propriul dumneavoastră browser și nimic nu este trimis nicăieri. Nu e nimic de șters după aceea și niciun cont de creat. Aceasta este calea simplă de a converti px în em.
Rezumat
Ca să convertiți px în em aici, tastați mărimea în pixeli și mărimea fontului la care se raportează și citiți imediat rezultatul, folosind formula em = px ÷ bază. Conversia păstrează proporția față de mărimea fontului în vigoare acolo unde se folosește valoarea. Nu poate da un singur răspuns pentru o pagină: em este relativ la mărimea fontului elementului însuși, sau a părintelui pentru font-size, deci același 1,5 em înseamnă 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 valabil peste tot, folosiți rem. Nimic nu este încărcat.