Conversie rem în px Root em ↔ Pixels Gratuit Online Sigur
Scrieți o valoare în rem ș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 rem în px
| rem | 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 aveți nevoie să convertiți rem în px
Deschideți o foaie de stil și vedeți padding: 2.25rem pe un card și font-size: 0.8125rem pe o legendă. Sunt valori bune, scrise așa cum ar trebui scris CSS-ul modern, dar nu vă spun nimic la prima vedere. Cât de mare este acel spațiu interior al cardului pe ecran? Va fi legenda lizibilă? Se potrivește cu cei 36 px și 13 px din fișierul de design primit? Ca să aflați, convertiți rem în px: înmulțiți cu dimensiunea fontului rădăcinii și citiți răspunsul în unitatea pe care o folosesc uneltele de design. Este sensul invers față de cel obișnuit și este ceea ce faceți când citiți cod, când verificați o machetă față de un build sau când explicați o pagină cuiva care gândește în pixeli.
Conversia este simplă; ce o face să merite o pagină este baza. Un rem nu este o mărime, ci un multiplu al unei mărimi, dimensiunea fontului elementului rădăcină. Într-un browser căruia nimeni nu i-a spus altfel, această dimensiune este de 16 px, deci 1 rem este 16 px, 2.25 rem este 36 px, iar 0.8125 rem este 13 px. Dar rădăcina poate fi schimbată de foaia de stil, iar cititorul o poate schimba în browser, și atunci fiecare valoare rem din pagină se mută odată cu ea. De aceea pagina cere baza și o folosește, în loc s-o ascundă.
Calculul se face în browserul dumneavoastră și nimic nu este încărcat. Mai jos veți găsi formula, un tabel cu valori uzuale, ce păstrează conversia și ce nu poate păstra, situațiile în care dezvoltatorii au nevoie să convertească rem în px și câteva obiceiuri care fac o foaie de stil bazată pe rem ușor de citit.
Formula și baza
px este egal cu rem înmulțit cu baza
Formula este o singură înmulțire: px = rem × bază. Cu baza obișnuită de 16 px, 1.5 rem devine 24 px, 0.75 rem devine 12 px, iar 4 rem devine 64 px. Pagina tipărește baza lângă rezultat, deci o linie precum 1.5 rem = 24 px (16 px) arată ce a presupus și vedeți imediat dacă se potrivește cu proiectul dumneavoastră.
Cum aflați baza
Căutați în foaia de stil o regulă pe html sau :root care setează font-size. Dacă nu există niciuna, baza este valoarea implicită a browserului, 16 px. Dacă există, de pildă 62.5%, luați acel procent din 16: 62.5% dă 10 px. În uneltele de dezvoltator ale browserului puteți și selecta elementul rădăcină și citi dimensiunea fontului calculată, care este numărul de scris în câmpul bazei.
Când dimensiunea rădăcinii este fluidă
Unele site-uri fac dimensiunea rădăcinii să crească odată cu fereastra, folosind o expresie clamp. Atunci 1 rem nu are deloc o singură valoare în pixeli: este 15 px pe un telefon și 18 px pe un monitor lat. În acest caz orice conversie este o instantanee. Introduceți baza pe care o vedeți la lățimea care vă interesează și înțelegeți că răspunsul este valabil doar la acea lățime.
Ce păstrează conversia și ce nu poate păstra
Păstrează proporția
Un rem este oricât ar fi dimensiunea fontului rădăcinii, deci o pagină scrisă în rem își păstrează forma când acea dimensiune se schimbă. Când convertiți rem în px, valoarea în pixeli este aceeași proporție făcută concretă pentru o anumită bază. Raportul dintre două mărimi, de exemplu un titlu de 2 rem față de un text de 1 rem, nu se schimbă oricum l-ați converti, iar de acel raport depinde o pagină bună.
Nu poate cunoaște setările cititorului
Numărul depinde în întregime de bază. Dacă cititorul și-a mărit dimensiunea implicită a textului în browser, lucru pe care mulți oameni îl fac și au dreptul să-l facă, atunci 1 rem nu mai este 16 px pentru el, iar cifra pe care o vedeți este corectă doar pentru baza din câmp. Tratați valoarea în pixeli ca pe un mod de a înțelege designul, nu ca pe o promisiune despre ce va vedea fiecare vizitator.
Rotunjirea
Fiindcă baza este de obicei un număr întreg, rezultatul înmulțirii este de obicei exact. 0.8125 rem este exact 13 px la o bază de 16; 0.6875 rem este exact 11 px. Dacă obțineți o zecimală lungă, este un semn că valoarea rem a fost calculată dintr-o altă bază decât cea pe care ați introdus-o.
Valori uzuale
Tabelul din josul paginii
Pagina include un tabel cu valorile în pixeli care corespund cifrelor rem uzuale la baza pe care o setați: 0.5 rem 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, iar 4 este 64. Acestea sunt valorile care apar cel mai des în spațieri și în scările tipografice, iar a le ști pe de rost face o foaie de stil lizibilă dintr-o privire.
Citirea unei foi de stil în pixeli
Un exercițiu util este să luați o foaie de stil pe care nu ați scris-o și să traduceți o dată valorile ei principale în pixeli, notând rezultatele. O dimensiune a textului de 1 rem, titluri de 1.5 și 2.25 rem, un spațiu de container de 2 rem: în pixeli, 16, 24, 36 și 32. Văzută așa, logica designului apare și o puteți compara cu fișierul de design fără calculator.
Cum convertiți rem în px aici
Introduceți valoarea rem
Scrieți mărimea în rem în primul câmp. Zecimalele sunt acceptate, deci 0.8125 merge la fel de bine ca 1.
Setați baza
Lăsați 16 dacă CSS-ul dumneavoastră nu schimbă dimensiunea rădăcinii. Schimbați-l dacă o schimbă. Rezultatul se actualizează în timp ce tastați.
Citiți valoarea în pixeli
Răspunsul apare imediat, cu baza afișată lângă el, ca să puteți vedea ce s-a presupus. Copiați-l în notițe sau comparați-l cu fișierul de design.
De unde vin aceste unități
Pixelul CSS
Când ecranele au încetat să 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 lungime de referință: aproximativ 1/96 dintr-un inci văzut de la o distanță de citire confortabilă. Un pixel dintr-o foaie de stil nu este deci un punct de pe ecran, ci o unitate de lungime pe care browserul o transpune în câte puncte are nevoie ecranul.
Rem-ul
Em-ul este mai vechi decât web-ul: în literele de plumb era lățimea unui bloc turnat, numit după litera majusculă M, iar în CSS înseamnă dimensiunea fontului în vigoare, motiv pentru care se schimbă pe măsură ce imbricați elemente. Rem-ul a fost adăugat tocmai ca să scape de asta: este em-ul elementului rădăcină și nu se compune niciodată. Ca să vedeți diferența în cifre, convertiți px în em și comparați cu ce obțineți când convertiți rem în px.
Când convertesc dezvoltatorii rem în px
Verificarea unui build față de fișierul de design
Un designer predă un fișier în pixeli; dezvoltatorul a scris codul în rem. Ca să verifice dacă pagina se potrivește, convertesc rem în px și compară numerele. O nepotrivire iese la iveală imediat: 1.375 rem este 22 px, iar dacă designul spune 24, una dintre ele este greșită.
Citirea unui cod necunoscut
Când moșteniți o foaie de stil, valorile rem ascund mărimile reale. Convertirea câtorva dintre cele principale vă dă o hartă a designului: cât de mare este textul, cât de late sunt spațiile dintre coloane, unde cad punctele de întrerupere.
Scrierea rapoartelor de erori și a documentației
Cei care testează o pagină descriu în pixeli ce văd. Un dezvoltator care spune că spațiul interior este de 2.5 rem înseamnă puțin pentru un tester; 40 px înseamnă ceva. Conversia face ca cele două părți să se înțeleagă.
Setarea valorilor care trebuie să fie exacte în pixeli
Unele lucruri trebuie să fie un număr exact de pixeli ai dispozitivului sau arată neclar: un chenar de un pixel, o pictogramă desenată pe o grilă de 24 px. Dacă o mărime trebuie să cadă pe grila de pixeli, convertirea rem în px vă spune dacă o face la baza dumneavoastră.
Capcane când convertiți rem în px
Uitarea unei dimensiuni schimbate a rădăcinii
Dacă rădăcina este setată la 62.5% sau la o expresie clamp, factorul standard de 16 nu se aplică. Rezultatul este greșit cu raportul celor două baze. Verificați întotdeauna mai întâi baza.
Confuzia dintre rem și em
Em este relativ la dimensiunea fontului propriu elementului, nu la rădăcină. O valoare de 1.5em într-un titlu de 24 px înseamnă 36 px, dar într-un paragraf de 16 px înseamnă 24 px. Această pagină convertește rem, care nu are o asemenea ambiguitate. Pentru em, vedeți em în px.
Presupunerea că ecranul arată aceiași pixeli
Un pixel CSS nu este un pixel al dispozitivului. Pe un ecran cu densitate mare, un pixel CSS poate fi doi sau trei pixeli ai dispozitivului. Conversia dă pixeli CSS, pe care îi folosesc atât uneltele de design, cât și foaia de stil.
Rotunjirea prea devreme
Dacă rotunjiți 13.333 px la 13 și apoi convertiți înapoi, obțineți 0.8125 rem, nu cei 0.8333 de la care ați pornit. Păstrați valoarea rem originală când contează.
Întrebări pe care și le pun oamenii înainte de conversie
Câți pixeli are 1 rem?
Șaisprezece, într-un browser a cărui valoare implicită nu a fost schimbată.
Câți pixeli are 2 rem?
Treizeci și doi la baza implicită. La o bază de 10 ar fi 20.
De ce îmi arată browserul altceva?
Setarea cititorului sau o regulă din foaia de stil a schimbat dimensiunea rădăcinii. Priviți dimensiunea calculată a fontului elementului rădăcină în uneltele de dezvoltator.
Este rem același lucru cu em?
Nu. Rem se referă la elementul rădăcină, iar em se referă la elementul însuși.
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 rem, care împarte în loc să înmulțească.
Obiceiuri care fac o foaie de stil rem ușor de citit
Scrieți valoarea în pixeli într-un comentariu
O linie precum gap: 1.5rem; /* 24px */ costă câteva caractere și îi scutește pe următorul cititor de o conversie. Înregistrează și baza pe care ați presupus-o.
Folosiți o scară mică
Un proiect care folosește doar o mână de valori rem, precum 0.5, 1, 1.5, 2 și 3, este ușor de învățat: după o zi le știți în pixeli fără să vă gândiți. Când convertiți rem în px pentru o asemenea foaie de stil, nu faceți decât să confirmați ce vă amintiți.
Dați nume valorilor
Cu proprietăți personalizate, precum --space-md: 1.5rem, foaia de stil descrie intenția în loc de numere. Numele poartă sensul, iar numărul stă într-un singur loc.
Testați cu altă dimensiune implicită
Măriți dimensiunea implicită a textului în browser și priviți pagina. Dacă rămâne închegată, aspectul este cu adevărat construit în rem. Dacă se strică, ceva a rămas în pixeli.
Cum folosiți bine valoarea în pixeli după ce convertiți rem în px
Comparați rapoarte, nu doar numere
Când convertiți rem în px pentru o foaie de stil întreagă, priviți rapoartele dintre mărimi, nu doar mărimile în sine. O scară tipografică în care fiecare treaptă este de aproximativ 1.25 ori precedenta dă 16, 20, 25, 31 și 39 de pixeli; o scară de 1.5 dă 16, 24, 36 și 54. Recunoașterea raportului vă spune ce a intenționat designerul și vă lasă să extindeți scara consecvent când aveți nevoie de o mărime nouă.
Traduceți pentru cei care gândesc în pixeli
Nu toți din echipă citesc rem. Managerii de proiect, redactorii și clienții lucrează adesea după capturi de ecran și cer ca un titlu să fie puțin mai mare. Dacă puteți spune că titlul este acum de 36 px și ar fi de 40 px la 2.5 rem, discuția este scurtă. Pagina este utilă ca punte rapidă între cele două vocabulare.
Verificați zonele de atingere și mărimile minime
Recomandările pentru ecrane tactile cer ținte de cel puțin aproximativ 44 px, iar cele pentru text cer un corp de text de în jur de 16 px sau mai mult. Ambele sunt exprimate în pixeli. Ca să verificați o foaie de stil scrisă în rem față de ele, convertiți rem în px și vedeți dacă butoanele și textul trec de prag.
Țineți cont de cazul mărit
Valoarea pe care o obțineți este pentru baza pe care ați introdus-o. Dacă cititorii dumneavoastră pot mări textul, încercați din nou conversia cu o bază de 20 sau 24 și vedeți ce cere pagina de la ecran. Un card care este confortabil la 16 poate depăși marginea la 24, iar cel mai bun moment ca să aflați este înainte de publicarea paginii.
Convertoare asemănătoare
Aceeași familie de unelte acoperă conversiile învecinate. Ca să vă întoarceți la rem, folosiți px în rem. Pentru mărimi relative la element există px în em și em în px, iar pentru mărimi relative la ecran, px în vw și vw în px. Pentru culorile din aceeași foaie de stil, HEX în RGB și HSL în HEX vă stau la îndemână, iar pentru numele de clase, text în kebab-case transformă o frază într-un nume pe care CSS îl acceptă.
Un exemplu lucrat
Să spunem că revizuiți un pull request, iar foaia de stil are o secțiune hero cu padding: 5rem 1.5rem, un titlu de 3.5rem și un paragraf de introducere de 1.25rem. Fișierul de design spune 80 px și 24 px de spațiu interior, un titlu de 56 px și o introducere de 20 px. Introduceți 5 și citiți 80 px, introduceți 1.5 și citiți 24, introduceți 3.5 și citiți 56, introduceți 1.25 și citiți 20. Toate patru se potrivesc, deci build-ul este fidel. Dacă titlul ar fi fost de 3.25 rem, ați fi citit 52 și ați fi observat diferența înainte să ajungă la designer.
O scurtă listă de verificare
Înainte de conversie
Aflați baza: regula rădăcinii din foaia de stil sau dimensiunea calculată din uneltele de dezvoltator.
În timpul conversiei
Introduceți valoarea rem, verificați baza afișată lângă rezultat și notați cifra în pixeli.
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 valoarea implicită, nu o regulă. Verificați rădăcina.
Tratarea pixelilor ca definitivi
Răspunsul este valabil pentru o singură bază. Un cititor cu o valoare implicită mai mare vede pixeli mai mari.
Confuzia dintre rem și em
Arată la fel și se comportă diferit. Folosiți pagina potrivită pentru fiecare.
Numerele dumneavoastră rămân pe dispozitiv
Calculul se face local. Valorile dumneavoastră sunt folosite de propriul browser și nimic nu este trimis nicăieri. Nu rămâne nimic de șters după aceea și nu trebuie creat niciun cont. Aceasta este calea simplă de a converti rem în px.
Rezumat
Ca să convertiți rem în px aici, introduceți mărimea în rem și citiți-o imediat în pixeli, folosind formula px = rem × bază. Baza pornește de la 16 px, valoarea implicită a unui browser, și o puteți schimba ca să se potrivească CSS-ului dumneavoastră. Conversia păstrează proporția, deoarece un rem este oricât ar fi dimensiunea fontului rădăcinii, și nu poate cunoaște setările cititorului, deci cifra este corectă doar pentru baza din câmp. Tabelul cu valori uzuale, de la 0.5 rem la 8 px până la 4 rem la 64 px, vă ajută să citiți o foaie de stil dintr-o privire. Nimic nu este încărcat.