Convertor rem în pixeli (px)
Un rem este egal cu 16 px la mărimea implicită a fontului, deci 1,5 rem înseamnă 24 px. Calculul este o singură înmulțire: valoarea în rem ori mărimea de bază a fontului. Introduceți valoarea în primul câmp, iar dacă pagina are altă bază, scrieți-o în câmpul Font-size de bază.
Ce este unitatea rem și ce este pixelul în CSS?
rem este o unitate de lungime relativă din CSS. Valoarea ei este egală cu mărimea calculată a fontului elementului rădăcină al paginii, adică a elementului html[1]. Dacă fontul elementului html are 16 px, fiecare rem din pagină înseamnă 16 px. Când această mărime se schimbă, toate dimensiunile scrise în rem se schimbă odată cu ea.
Pixelul (px) din CSS este o unitate fixă, pe care standardul o definește ca 1/96 dintr-un inch[1]. De aceea un inch înseamnă în CSS 96 px, iar convertorul inchi în px pornește de la o rezoluție implicită de 96 de pixeli pe inch. În sens general, pixelul este un element component, de obicei foarte mic, al imaginilor grafice digitale[2]. Pixelul din CSS nu se schimbă când cititorul modifică mărimea fontului în browser. Aplicațiile de design, precum Figma, afișează și ele dimensiunile în pixeli, așa că transformarea rem în pixeli vă ajută să comparați foaia de stil cu macheta.
:root dintr-o pagină HTML indică chiar elementul html, așa că mărimea fontului scrisă aici devine baza fiecărei valori rem. În partea vizibilă a fotografiei, selectorul conține variabile de culoare și nu setează mărimea fontului, deci baza rămâne cea din browser. Fotografie: Pankaj Patel, Unsplash.Câți pixeli are 1 rem?
1 rem este egal cu 16 px cât timp mărimea de bază a fontului rămâne la valoarea implicită, adică 16 px în Chrome, Edge și Firefox. Formula este o singură înmulțire: px = rem × mărimea de bază a fontului. Astfel, 1,5 rem înseamnă 24 px. Iar 0,875 rem înseamnă 14 px, adică mărimea textului text-sm din Tailwind CSS[3].
Numărul 16 este doar o valoare implicită și se poate schimba din două părți. Prima este foaia de stil: regula html { font-size: 62.5% } face baza 10 px, așa că 1,5 rem devine 15 px. A doua este chiar cititorul. Când am ales Mare în lista Dimensiunea fontului din Setările Chrome, mărimea fontului elementului html a devenit 20 px, iar 1 rem a devenit și el 20 px.
De aceea convertorul are un al treilea câmp pentru baza paginii dumneavoastră, ca să obțineți pixelii pe care îi vede cititorul ei. Dacă nu cunoașteți baza, porniți de la 16, numărul aflat deja în câmp, valoarea implicită a celor trei browsere.
Cum transform rem în px? Formula și un exemplu
Formula este px = rem × font-size, unde font-size este mărimea fontului elementului html. Luați ca exemplu o distanță de 1,25 rem. La baza implicită de 16 px ea dă 1,25 × 16 = 20 px. La o bază de 20 px aceeași distanță devine 25 px.
Tehnica 62,5 % setează mărimea fontului elementului html la 62,5 % din valoarea implicită, așa că baza devine 10 px, fiindcă 62,5 % din 16 înseamnă 10. Atunci valorile se citesc direct: 2,4 rem înseamnă 24 px. Dacă cititorul crește mărimea fontului din browser la 20 px, baza devine 12,5 px, iar 2,4 rem devine 30 px. Câmpul Font-size de bază al convertorului acceptă procentul așa cum îl scrieți în foaia de stil și îl calculează din 16 px. Scrieți 62,5 %, iar convertorul va lucra cu baza de 10 px.
Aceeași formulă funcționează invers prin împărțire, iar exact asta face convertorul px în rem. Unitatea em se calculează din mărimea fontului elementului părinte, iar pentru ea există convertorul em în px, cu un câmp pentru mărimea părintelui. Dacă dimensiunea este scrisă în puncte (pt), unitatea de mărime a fontului din editoarele de text, transformați-o întâi în pixeli cu convertorul pt în px.
14px, apoi 0.875rem. Al doilea rând vine după primul, așa că browserul aplică 0.875rem. La baza de 16 px rezultatul rămâne 14 px, fiindcă 0,875 × 16 = 14. La baza de 20 px textul devine 17,5 px. Fotografie: Nick Karvounis, Unsplash.Tabel de conversie rem în px la trei mărimi de bază
| Valoarea în rem | La 16 px (implicit) | La 10 px (62,5 %) | La 20 px (Mare) |
|---|---|---|---|
| 0,125 rem | 2 px | 1,25 px | 2,5 px |
| 0,25 rem | 4 px | 2,5 px | 5 px |
| 0,375 rem | 6 px | 3,75 px | 7,5 px |
| 0,5 rem | 8 px | 5 px | 10 px |
| 0,625 rem | 10 px | 6,25 px | 12,5 px |
| 0,75 rem | 12 px | 7,5 px | 15 px |
| 0,8 rem | 12,8 px | 8 px | 16 px |
| 0,875 rem | 14 px | 8,75 px | 17,5 px |
| 0,9 rem | 14,4 px | 9 px | 18 px |
| 1 rem | 16 px | 10 px | 20 px |
| 1,1 rem | 17,6 px | 11 px | 22 px |
| 1,125 rem | 18 px | 11,25 px | 22,5 px |
| 1,2 rem | 19,2 px | 12 px | 24 px |
| 1,25 rem | 20 px | 12,5 px | 25 px |
| 1,3 rem | 20,8 px | 13 px | 26 px |
| 1,375 rem | 22 px | 13,75 px | 27,5 px |
| 1,4 rem | 22,4 px | 14 px | 28 px |
| 1,5 rem | 24 px | 15 px | 30 px |
| 1,6 rem | 25,6 px | 16 px | 32 px |
| 1,625 rem | 26 px | 16,25 px | 32,5 px |
| 1,75 rem | 28 px | 17,5 px | 35 px |
| 1,8 rem | 28,8 px | 18 px | 36 px |
| 1,875 rem | 30 px | 18,75 px | 37,5 px |
| 2 rem | 32 px | 20 px | 40 px |
| 2,25 rem | 36 px | 22,5 px | 45 px |
| 2,5 rem | 40 px | 25 px | 50 px |
| 2,75 rem | 44 px | 27,5 px | 55 px |
| 3 rem | 48 px | 30 px | 60 px |
| 3,5 rem | 56 px | 35 px | 70 px |
| 3,75 rem | 60 px | 37,5 px | 75 px |
| 4 rem | 64 px | 40 px | 80 px |
| 4,5 rem | 72 px | 45 px | 90 px |
| 5 rem | 80 px | 50 px | 100 px |
| 6 rem | 96 px | 60 px | 120 px |
| 8 rem | 128 px | 80 px | 160 px |
| 10 rem | 160 px | 100 px | 200 px |
| 16 rem | 256 px | 160 px | 320 px |
| 20 rem | 320 px | 200 px | 400 px |
| 32 rem | 512 px | 320 px | 640 px |
Câți pixeli au mărimile de font din Tailwind CSS?
| Clasa Tailwind | Valoarea în rem | Pixeli la 16 | Pixeli la 20 |
|---|---|---|---|
| text-xs | 0,75 rem | 12 px | 15 px |
| text-sm | 0,875 rem | 14 px | 17,5 px |
| text-base | 1 rem | 16 px | 20 px |
| text-lg | 1,125 rem | 18 px | 22,5 px |
| text-xl | 1,25 rem | 20 px | 25 px |
| text-2xl | 1,5 rem | 24 px | 30 px |
| text-3xl | 1,875 rem | 30 px | 37,5 px |
| text-4xl | 2,25 rem | 36 px | 45 px |
| text-5xl | 3 rem | 48 px | 60 px |
| text-6xl | 3,75 rem | 60 px | 75 px |
| text-7xl | 4,5 rem | 72 px | 90 px |
| text-8xl | 6 rem | 96 px | 120 px |
| text-9xl | 8 rem | 128 px | 160 px |
Ce bază setează fiecare opțiune de mărime a fontului din Chrome și Edge?
| Opțiunea din Chrome | Opțiunea din Edge | Baza, adică 1 rem | 0,875 rem | 1,5 rem | 2 rem |
|---|---|---|---|---|---|
| Foarte mică | Dimensiune foarte mică a fontului | 9 px | 7,88 px | 13,5 px | 18 px |
| Mic | Dimensiune mică a fontului | 12 px | 10,5 px | 18 px | 24 px |
| Medie (recomandată) | Dimensiune medie a fontului (recomandată) | 16 px | 14 px | 24 px | 32 px |
| Mare | Dimensiune mare a fontului | 20 px | 17,5 px | 30 px | 40 px |
| Foarte mare | Dimensiune foarte mare a fontului | 24 px | 21 px | 36 px | 48 px |
Ce scrieri acceptă și calculează acest convertor?
| Ce scrieți sau lipiți | Calculul convertorului | Ce se întâmplă cu această scriere |
|---|---|---|
| Primul câmp: valoarea în rem, baza de 16 px | ||
| 1,5 | 24 px | Virgulă zecimală, cum se scriu numerele în română: 1,5 se înmulțește cu 16. |
| 1.5 | 24 px | Punctul îl citim ca virgulă zecimală, ca în CSS. |
| 1.875rem | 30 px | Punctul lipit de rem îl citim ca virgulă zecimală, ca în CSS. Sub câmp apare o indicație cu a doua citire posibilă, 1875. |
| 1.875 | 30 px | Un punct singur îl citim întotdeauna ca separator zecimal, și fără unitate, așa că socotim 1,875 rem. Sub câmp apare o indicație, iar o mie opt sute șaptezeci și cinci se scrie 1875 sau 1 875. |
| .875rem | 14 px | Valoare dintr-un fișier CSS comprimat, fără zero înaintea punctului: o citim ca 0,875 și ignorăm cuvântul rem. |
| font-size: 1.5rem; | 24 px | Un rând întreg din foaia de stil: luăm numărul și ignorăm numele proprietății și punctul și virgula. |
| --text-sm: 0.875rem; | 14 px | Un rând din variabilele temei Tailwind CSS: cele două cratime de la începutul numelui nu contează ca semn minus. |
| margin-top: -0.5rem; | -8 px | O margine negativă din foaia de stil: minusul lipit de număr contează, așa că rezultatul iese negativ. |
| 3/4 | 12 px | Fracție ordinară: 3 împărțit la 4 dă 0,75 rem. |
| Câmpul „Font-size de bază”: convertorul calculează baza | ||
| 62,5 % | 10 px | Procent scris în română, cu virgulă și spațiu: se calculează din baza implicită de 16 px, iar 62,5 % din 16 înseamnă 10. |
| 62.5% | 10 px | Procent scris ca în CSS, cu punct și fără spațiu: rezultatul este același. |
| 125% | 20 px | Procent peste 100 %: 125 % din 16 înseamnă 20, cât baza pe care o dă opțiunea Mare din Chrome. |
| font-size: 20px | 20 px | Rând copiat din instrumentele pentru dezvoltatori: luăm numărul și ignorăm numele proprietății și unitatea. |
| 18,5 | 18,5 px | Bază cu parte zecimală după virgulă, acceptată cât timp rămâne între 1 și 100. |
Cum schimb mărimea de bază a fontului în Chrome, Edge, Firefox și Safari?
În Chrome, Edge și Firefox, mărimea aleasă de cititor devine baza fiecărei valori rem din paginile pe care le deschide. Denumirile sunt cele din interfața în limba română a fiecărui browser.
Chrome
Deschideți Setări, apoi Aspect, și alegeți mărimea din lista Dimensiunea fontului. Butonul Personalizați fonturile deschide o pagină cu glisoarele Dimensiunea fontului și Dimensiunea minimă a fontului.Edge
Deschideți Setări, apoi Aspect și Fonturi, și alegeți din lista Dimensiune font. Numele opțiunilor încep cu „Dimensiune”, iar cea din mijloc este Dimensiune medie a fontului (recomandată). Sub listă se află Dimensiune minimă a fontului.Firefox
Deschideți Setări, apoi Accesibilitate, și în secțiunea Fonturi alegeți un număr din lista Mărime fonturi. Butonul Setări avansate deschide fereastra Fonturi, cu lista Fonturi pentru și câmpul Dimensiunea minimă a fontului. Paginile în limba română folosesc grupul de litere latine, la fel ca paginile în engleză.Safari pe Mac
În meniul Safari selectați Configurări, apoi faceți clic pe Avansat. Aici Safari setează doar limita de jos: activați Nu utilizați niciodată font mai mic de și alegeți un număr. Apple recomandă 12 sau 14 dacă nu sunteți sigur ce să alegeți[4].
De ce se scriu mărimile textului în rem?
Textul scris în rem crește când cititorul mărește fontul în browser, iar textul scris în pixeli rămâne la fel. Despre acest lucru vorbește criteriul 1.4.4 Resize Text din WCAG, ghidul W3C pentru accesibilitatea conținutului web: „Except for captions and images of text, text can be resized without assistive technology up to 200 percent without loss of content or functionality.”[5] Adică, în afară de subtitrări și de imaginile cu text, textul poate fi mărit până la 200 % fără tehnologii de asistență și fără pierderi de conținut sau de funcționalitate. Citatul este în engleză, limba originalului. Conversia în pixeli ajută la comparația cu macheta, iar foaia de stil rămâne în rem.
Convertiți alte unități în Pixeli
Surse
- CSS Values and Units Module Level 4 — W3C
- Pixel — Wikipedia în limba română
- font-size — Tailwind CSS
- Modificarea configurărilor Avansat în Safari pe Mac — Apple
- Web Content Accessibility Guidelines (WCAG) 2.2 — W3C
- <length> CSS type — MDN Web Docs
Toate valorile din tabele le-am calculat pornind de la definițiile unităților și le-am verificat prin calcul înainte de publicare. Datele istorice și denumirile unităților locale se bazează pe sursele enumerate mai sus.
Ultima verificare a conținutului: · redactat și verificat de echipa Arteon
Întrebări frecvente despre conversia rem în px
Este 1 rem întotdeauna egal cu 16 px?
1 rem este egal cu 16 px cât timp mărimea de bază a fontului rămâne la valoarea implicită[6]. Dacă pagina scrie altă mărime pentru elementul html sau cititorul schimbă mărimea fontului din browser, se schimbă și 1 rem. Cu opțiunea Mare din Chrome, de exemplu, 1 rem devine 20 px.
Câți pixeli are 1,5 rem?
1,5 rem înseamnă 24 px la baza implicită de 16 px. La baza de 10 px înseamnă 15 px, iar la baza de 20 px înseamnă 30 px.
Câți pixeli au 2 rem și 0,5 rem?
La baza de 16 px, 2 rem înseamnă 32 px, iar 0,5 rem înseamnă 8 px. Ambele se schimbă odată cu baza: la 20 px, 2 rem devine 40 px, iar 0,5 rem devine 10 px.
Care este diferența dintre rem și em?
rem se calculează mereu din mărimea fontului elementului html, deci are aceeași valoare în toată pagina. em se calculează din mărimea fontului elementului părinte, așa că 1.5em într-un element cu fontul de 20 px înseamnă 30 px. Pentru em folosiți convertorul em în px.
Schimbă zoomul pe pagină valoarea lui 1 rem?
În măsurătoarea noastră din Chrome, 1 rem a rămas 16 px după ce pagina a fost mărită la 125 %. Zoom pe pagină mărește tot conținutul odată, și ce e scris în rem, și ce e scris în pixeli. Schimbarea mărimii fontului schimbă doar valoarea lui rem.
Schimbă mărimea minimă a fontului calculul rem?
În măsurătoarea noastră din Chrome și Firefox nu l-a schimbat. Am setat mărimea minimă la 12 px pe o pagină cu html { font-size: 62.5% }. 2,4 rem a rămas 24 px, deci rem se calcula în continuare din baza de 10 px.
Cum aflu baza unui site?
Deschideți instrumentele pentru dezvoltatori din Chrome, selectați elementul html în panoul Elemente, deschideți fila Calculate și căutați font-size. Numărul de acolo este baza din care se calculează acum rem pe pagina respectivă, după ce s-au combinat setarea site-ului și setarea cititorului.
Folosește Tailwind CSS unități rem?
Da, mărimile de font din Tailwind CSS sunt scrise în rem. Clasa text-base are 1 rem, adică 16 px la baza implicită, iar clasa text-2xl are 1,5 rem, adică 24 px.
De ce rezultatul iese cu zecimale, de exemplu 17,5 px?
Înmulțirea cu o bază diferită de 16 poate da o fracție: 0,875 rem la baza de 20 px înseamnă 17,5 px. Convertorul afișează cel mult două zecimale, iar browserul acceptă astfel de fracțiuni de pixel în pagină.
Ajutați-ne să ne îmbunătățim instrumentele
Ați găsit o valoare care dă alt rezultat în browserul dumneavoastră sau aveți o idee pentru convertor? Scrieți-ne.