Convertor pixeli (px) în rem
24 px înseamnă 1,5 rem la baza implicită de 16 px, iar 14 px înseamnă 0,875 rem. Calculul este o singură împărțire: pixelii împărțiți la mărimea de bază a fontului. Introduceți dimensiunea din machetă în primul câmp, iar dacă pagina are altă bază, scrieți-o în câmpul Font-size de bază.
Ce este rem și de ce se scriu dimensiunile în pixeli ca rem?
Machetele dau dimensiunile în pixeli: titlul de 28 px, distanța dintre două secțiuni de 32 px. Pixelul din CSS este o unitate fixă, pe care standardul o definește ca 1/96 dintr-un inch[1]. De aceea convertorul px în inchi numără, la rezoluția lui implicită, 96 de pixeli într-un inch. rem este o unitate relativă: un rem este egal cu mărimea calculată a fontului elementului html, elementul rădăcină al paginii[1].
Pentru că rem se calculează mereu din elementul rădăcină, nu se înmulțește în elementele imbricate, cum face em, pe care îl transformă convertorul em în px. Ca să transformați orice dimensiune din pixeli în rem, vă ajunge mărimea fontului elementului html. După conversie, dimensiunea urmează setarea cititorului: un titlu de 24 px rămâne 24 px cu setarea implicită și devine 30 px la cititorul care a ales Mare în Chrome sau Dimensiune mare a fontului în Edge.
60px în regula .hero și 220px în regula care reunește clasele .heading și .sub-heading. La baza de 16 px prima devine 3.75rem, a doua 13.75rem, iar apoi amândouă cresc odată cu setarea cititorului. Fotografie: Ferenc Almasi, Unsplash.Câți rem au 24 px?
24 px înseamnă 1,5 rem la baza implicită de 16 px. Formula este o singură împărțire: rem = px ÷ mărimea de bază a fontului. Fiecare 16 px fac 1 rem, iar un pixel înseamnă 0,0625 rem. Astfel, 8 px înseamnă 0,5 rem. Iar 32 px înseamnă 2 rem.
Dacă foaia de stil folosește altă bază, împărțiți la aceea. Cu tehnica 62,5 %, baza devine 10 px, iar 24 px înseamnă 2,4 rem. La o bază de 20 px, aceiași 24 px înseamnă 1,2 rem. Scrieți baza în al treilea câmp, iar convertorul vă dă valoarea pe care o treceți în foaia de stil.
Unele dimensiuni nu se împart exact la 16, de aceea rezultatul apare cu cel mult patru zecimale. De exemplu, 13 px înseamnă 0,8125 rem, iar CSS acceptă acest număr așa cum este. Câmpul rezultatului arată virgulă, dar butonul Copiați rezultatul copiază 0.8125 cu punct, așa că îl puteți lipi direct și scrie rem după el.
Cu ce formulă se transformă pixelii în rem?
Formula este rem = px ÷ font-size, unde font-size este mărimea fontului elementului html. Luați un titlu de 28 px din machetă. La baza de 16 px rezultă 28 ÷ 16 = 1,75, așa că în foaia de stil scrieți font-size: 1.75rem.
Dimensiunile care se împart exact la 4 dau o valoare cu cel mult două zecimale: de exemplu, 12 px înseamnă 0,75 rem. Celelalte dimensiuni pare dau trei zecimale, ca 14 px, adică 0,875 rem, iar cele impare dau patru, ca 15 px, adică 0,9375 rem. O dimensiune ca 13,5 px ar avea și a cincea zecimală, așa că rezultatul se rotunjește la patru zecimale: 0,8438 rem.
Pentru direcția inversă folosiți convertorul rem în px. Dacă aveți nevoie de o valoare relativă la mărimea fontului elementului părinte, transformați dimensiunea cu convertorul px în em. Dacă dimensiunea din fișier este în puncte (pt), transformați-o întâi în pixeli cu convertorul pt în px.
font-size:13px devine 0.8125rem. Iar margin:16px 0 20px devine 1rem 0 1.25rem. Fotografie: Rahul Mishra, Unsplash.Tabel de conversie px în rem la trei mărimi de bază
| Dimensiunea în pixeli | rem la baza de 16 px | rem la baza de 10 px | rem la baza de 20 px |
|---|---|---|---|
| 1 px | 0,0625 rem | 0,1 rem | 0,05 rem |
| 2 px | 0,125 rem | 0,2 rem | 0,1 rem |
| 4 px | 0,25 rem | 0,4 rem | 0,2 rem |
| 6 px | 0,375 rem | 0,6 rem | 0,3 rem |
| 8 px | 0,5 rem | 0,8 rem | 0,4 rem |
| 10 px | 0,625 rem | 1 rem | 0,5 rem |
| 11 px | 0,6875 rem | 1,1 rem | 0,55 rem |
| 12 px | 0,75 rem | 1,2 rem | 0,6 rem |
| 13 px | 0,8125 rem | 1,3 rem | 0,65 rem |
| 14 px | 0,875 rem | 1,4 rem | 0,7 rem |
| 15 px | 0,9375 rem | 1,5 rem | 0,75 rem |
| 16 px | 1 rem | 1,6 rem | 0,8 rem |
| 17 px | 1,0625 rem | 1,7 rem | 0,85 rem |
| 18 px | 1,125 rem | 1,8 rem | 0,9 rem |
| 20 px | 1,25 rem | 2 rem | 1 rem |
| 22 px | 1,375 rem | 2,2 rem | 1,1 rem |
| 24 px | 1,5 rem | 2,4 rem | 1,2 rem |
| 25 px | 1,5625 rem | 2,5 rem | 1,25 rem |
| 26 px | 1,625 rem | 2,6 rem | 1,3 rem |
| 28 px | 1,75 rem | 2,8 rem | 1,4 rem |
| 30 px | 1,875 rem | 3 rem | 1,5 rem |
| 32 px | 2 rem | 3,2 rem | 1,6 rem |
| 36 px | 2,25 rem | 3,6 rem | 1,8 rem |
| 40 px | 2,5 rem | 4 rem | 2 rem |
| 44 px | 2,75 rem | 4,4 rem | 2,2 rem |
| 48 px | 3 rem | 4,8 rem | 2,4 rem |
| 50 px | 3,125 rem | 5 rem | 2,5 rem |
| 56 px | 3,5 rem | 5,6 rem | 2,8 rem |
| 60 px | 3,75 rem | 6 rem | 3 rem |
| 64 px | 4 rem | 6,4 rem | 3,2 rem |
| 72 px | 4,5 rem | 7,2 rem | 3,6 rem |
| 80 px | 5 rem | 8 rem | 4 rem |
| 96 px | 6 rem | 9,6 rem | 4,8 rem |
| 100 px | 6,25 rem | 10 rem | 5 rem |
| 120 px | 7,5 rem | 12 rem | 6 rem |
| 128 px | 8 rem | 12,8 rem | 6,4 rem |
| 160 px | 10 rem | 16 rem | 8 rem |
| 192 px | 12 rem | 19,2 rem | 9,6 rem |
| 200 px | 12,5 rem | 20 rem | 10 rem |
| 256 px | 16 rem | 25,6 rem | 12,8 rem |
| 320 px | 20 rem | 32 rem | 16 rem |
| 400 px | 25 rem | 40 rem | 20 rem |
Cum se scriu în rem rânduri dintr-o foaie de stil?
| Rândul în pixeli | rem la baza de 16 px | rem la baza de 10 px (62,5 %) |
|---|---|---|
| font-size: 16px | 1rem | 1.6rem |
| font-size: 14px | 0.875rem | 1.4rem |
| font-size: 28px | 1.75rem | 2.8rem |
| padding: 12px 24px | 0.75rem 1.5rem | 1.2rem 2.4rem |
| margin-bottom: 32px | 2rem | 3.2rem |
| border-radius: 8px | 0.5rem | 0.8rem |
| max-width: 1200px | 75rem | 120rem |
| @media (min-width: 768px) | 48rem | 48rem |
@media (min-width: 48rem) a început să se aplice la lățimea de 768 px. Când am mărit fontul browserului la 20 px, a început să se aplice la lățimea de 960 px.Ce scrieri acceptă și calculează convertorul px în rem?
| Ce scrieți sau lipiți | Calculul convertorului | Ce se întâmplă cu această scriere |
|---|---|---|
| Primul câmp: dimensiunea în pixeli, baza de 16 px | ||
| 24 | 1,5 rem | Doar numărul, cum apare dimensiunea în panoul de măsuri al aplicației de design. |
| 24px | 1,5 rem | Unitatea lipită de număr: citim numărul și ignorăm px. |
| 24 pixeli | 1,5 rem | Unitatea scrisă în română, după un spațiu: luăm numărul și ignorăm cuvântul. |
| 13,5 | 0,8438 rem | Dimensiune cu virgulă zecimală: rezultatul apare cu patru zecimale după rotunjire. |
| 1.200 | 0,075 rem | Un punct singur îl citim întotdeauna ca separator zecimal, așa că socotim 1,2 pixeli. Sub câmp apare o indicație, iar o mie două sute se scrie 1200 sau 1 200. |
| 1,200 | 0,075 rem | Virgula o citim pe această pagină ca zecimală chiar dacă o urmează trei cifre, deci dimensiunea este 1,2 px, iar sub câmp apare o indicație. Pentru o mie două sute scrieți 1200 sau 1 200. |
| 1200px | 75 rem | Lățimea unui container cu unitate și fără separator de mii: face 75 rem. |
| padding: 20px; | 1,25 rem | Un rând întreg din foaia de stil: luăm numărul și ignorăm numele proprietății și punctul și virgula. |
| −8px | -0,5 rem | Semnul minus tipografic „−” din fața numărului îl citim ca semn negativ, ca într-o margine negativă. |
| Câmpul „Font-size de bază”: convertorul calculează baza | ||
| 62,5 % | 10 px | Procentul așa cum îl scrieți pentru elementul html: 62,5 % din baza implicită de 16 px înseamnă 10. |
| font-size: 18px | 18 px | Rând copiat din foaia de stil: luăm 18 ca bază. |
Cum transform dimensiunile din Figma sau o foaie de stil întreagă din px în rem?
Pentru câteva dimensiuni ajunge convertorul. Când dimensiunile sunt multe, aplicațiile de design și instrumentele de build pot calcula singure rem.
O dimensiune din machetă
Copiați dimensiunea în pixeli din panoul de măsuri și lipiți-o în primul câmp. Dacă pagina setează o mărime de font pentru elementul html, scrieți-o în câmpul Font-size de bază înainte să copiați rezultatul.Dev Mode în Figma
În planurile plătite, Dev Mode afișează dimensiunile direct în rem. Denumirile de aici sunt în engleză, ca în interfața Figma. În secțiunea Code a panoului Inspect faceți clic pe Inspect settings lângă meniul de limbaj și alegeți unitatea rem. Ca să schimbați baza, alegeți din același loc Set unit scale… și scrieți baza în fereastra Unit scale.O funcție în Sass
Sass împarte numerele cu funcțiamath.div()din modululsass:math[3]. Funcția@function rem($px) { @return math.div($px, 16px) * 1rem; }face carem(24px)să fie1.5rem.PostCSS pentru o foaie de stil întreagă
Pluginul postcss-pxtorem transformă px în rem în fișierele CSS la build[4]. Baza lui implicită este 16, iar cu setările implicite transformă doar proprietățile fontului: font, font-size, line-height și letter-spacing. Media query-urile rămân în pixeli.
Convertiți Pixeli în alte unități
Surse
- CSS Values and Units Module Level 4 — W3C
- Media Queries Level 4 — W3C
- sass:math — Sass
- postcss-pxtorem — GitHub
- <length> CSS type — MDN Web Docs
- Web Content Accessibility Guidelines (WCAG) 2.2 — W3C
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 px în rem
Câți rem au 16 px?
16 px înseamnă 1 rem la baza implicită de 16 px. Cu tehnica 62,5 %, adică la baza de 10 px, înseamnă 1,6 rem.
Câți rem au 14 px și 12 px?
La baza de 16 px, 14 px înseamnă 0,875 rem, iar 12 px înseamnă 0,75 rem.
Înseamnă 24 px întotdeauna 1,5 rem?
Acest lucru e valabil doar la baza de 16 px. Dacă pagina scrie altă mărime pentru elementul html, împărțiți la ea: la baza de 10 px, 24 px înseamnă 2,4 rem, iar la baza de 20 px înseamnă 1,2 rem.
De ce împărțim la 16?
Pentru că 16 px este o mărime implicită obișnuită a fontului în browsere, pe care utilizatorul o poate schimba din setările lui[5]. În măsurătoarea noastră, Chrome, Edge și Firefox foloseau această mărime înainte de orice schimbare a setărilor.
Schimbă tehnica 62,5 % valorile rem din media query-uri?
Nu. Regula @media (min-width: 48rem) începe să se aplice de la 768 px și cu tehnica, și fără ea, pentru că rem dintr-un media query se calculează din valoarea inițială a mărimii fontului[2]. De aceea transformați limitele media query-urilor împărțind la 16.
Care este diferența dintre conversia px în rem și conversia în em?
rem se calculează din mărimea fontului elementului html, deci împărțiți la aceeași bază în toată pagina. em se calculează din mărimea fontului elementului părinte, deci împărțiți la mărimea părintelui. Pentru acest calcul există convertorul px în em.
Trebuie scrisă o bordură de 1px în rem?
Dacă vreți ca bordura să rămână groasă de un pixel la orice setare, lăsați-o 1px. Dacă o scrieți 0.0625rem, la cititorul care a ales baza de 20 grosimea ei devine 1,25 px. Și pluginul postcss-pxtorem lasă proprietatea border în pixeli cu setările implicite[4].
Crește textul scris în rem odată cu setarea cititorului?
Da. Textul scris în rem crește odată cu mărimea fontului pe care cititorul o alege în browser, iar textul scris în pixeli rămâne la fel. Criteriul 1.4.4 Resize Text din WCAG se ocupă de această situație: textul să poată fi mărit până la 200 % fără pierderi de conținut sau de funcționalitate[6].
Ajutați-ne să ne îmbunătățim instrumentele
Ați găsit o dimensiune care dă alt rezultat în browserul dumneavoastră sau aveți o idee pentru convertor? Scrieți-ne.