Conversie px în rem Pixels ↔ Root em Gratuit Online Sigur
Scrieți o valoare în px și o citiți pe loc în rem. 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 rem
| px | rem |
|---|---|
| 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 convertesc designerii și dezvoltatorii px în rem
Instrumentele de design vorbesc în pixeli. O machetă spune că titlul are 32 px, spațiul dintre secțiuni are 48 px, butonul are 16 px de padding. Foile de stil, scrise bine, vorbesc în rem. Distanța dintre aceste două limbaje este locul unde stă această pagină: tastați o mărime în pixeli și o citiți în rem, ca numărul pe care îl puneți în CSS să însemne ce a vrut să spună designerul. A converti px în rem este un gest mic, dar se face de sute de ori în viața unui site, iar o bază greșită transformă o aranjare îngrijită într-una ușor greșită peste tot deodată.
Motivul pentru care merită să vă ocupați de rem este accesibilitatea și flexibilitatea. Un rem este un multiplu al mărimii fontului rădăcinii, pe care un browser o setează la 16 px dacă nu i se spune altfel și pe care un cititor o poate schimba liber în setările sale. O aranjare scrisă în rem își păstrează deci forma când cineva cu vedere slabă mărește textul implicit: litere, spațiere și casete cresc împreună. O aranjare scrisă în pixeli nu urmează, iar cititorul care a cerut text mai mare primește litere mai mari în casete înghesuite sau nimic deloc. De aceea aproape orice ghid de stil modern spune același lucru: folosiți rem pentru litere și spațiere.
Această pagină face aritmetica în browserul dumneavoastră. Nimic nu este încărcat, iar ceea ce depinde conversia, mărimea de bază, este scrisă mai jos și stă într-un câmp pe care îl puteți schimba, în loc să fie presupusă pe la spatele dumneavoastră. Mai jos găsiți formula, tabelul cu mărimi uzuale, motivele pentru care baza contează, capcanele în care cad cei care convertesc px în rem în grabă și un scurt ghid de folosire a rezultatului în foi de stil reale.
Formula și baza
rem este egal cu px împărțit la bază
Formula este o singură împărțire: rem = px ÷ bază. Cu baza obișnuită de 16 px, o mărime de 24 px devine 1,5 rem, 32 px devine 2 rem, iar 8 px devine 0,5 rem. Pagina arată rezultatul în timp ce tastați și arată baza pe care a folosit-o, deci linia 24 px = 1,5 rem (16 px) vă spune exact ce s-a presupus.
De unde vine 16
Baza pornește de la 16 px pentru că aceasta folosește un browser când nimeni nu spune altfel. Nu este o lege a web-ului; este valoarea implicită a valorii implicite și este stabilă de zeci de ani. Dacă CSS-ul dumneavoastră nu atinge niciodată mărimea fontului rădăcinii, 1 rem este 16 px pentru majoritatea vizitatorilor. Dacă o atinge, baza este ce ați setat.
Trucul cu 62,5% și de ce îl folosesc oamenii
Unele foi de stil setează mărimea rădăcinii la 62,5%, ceea ce face ca 1 rem să fie egal cu 10 px pe un browser implicit, astfel încât 24 px este pur și simplu 2,4 rem, iar aritmetica se face ușor în minte. Funcționează, dar are un cost: toată pagina depinde acum de acel procent, iar orice componentă care se așteaptă la 16 ca bază va ieși prea mică. Dacă proiectul dumneavoastră face asta, tastați 10 în câmpul bazei de pe această pagină și fiecare cifră se va potrivi cu CSS-ul dumneavoastră.
Ce păstrează conversia și ce nu poate
Păstrează proporția
Un rem este oricât ar fi mărimea fontului rădăcinii, deci o aranjare scrisă în rem își păstrează forma când acea mărime se schimbă. Acesta este tot motivul pentru a o scrie așa. Când convertiți px în rem, numărul pe care îl obțineți este aceeași proporție pe care o avea valoarea în pixeli la baza aleasă, exprimată acum într-un fel care se scalează.
Nu poate ști setările cititorului dumneavoastră
Numărul depinde în întregime de bază. Dacă CSS-ul dumneavoastră setează o altă mărime pe elementul rădăcină sau cititorul a schimbat mărimea implicită a textului în browser, ceea ce mulți oameni fac și au dreptul să facă, atunci 1 rem nu este 16 px pentru ei. Cifra de pe pagină este corectă doar pentru baza din câmp. Aceasta nu este un defect al instrumentului, ci natura unității: este relativă, iar o unitate relativă nu are o valoare fixă în care să convertească.
Rotunjirea
Împărțirea la 16 dă rezultate curate pentru multe mărimi uzuale (16, 24, 32, 48, 64) și zecimale periodice pentru altele (10 px este 0,625 rem; 13 px este 0,8125). Pagina dă atâtea cifre câte are nevoie numărul, iar dumneavoastră hotărâți câte să păstrați în foaia de stil. Browserele se descurcă fără probleme cu zecimale lungi, dar o valoare rotunjită precum 0.8125rem este mai ușor de citit și de întreținut decât una cu zece cifre.
Mărimi uzuale
Tabelul de la piciorul paginii
Sub convertor găsiți un tabel cu mărimi uzuale: 8 px este 0,5 rem, 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. Acestea sunt mărimile care apar cel mai des în scări tipografice și în sisteme de spațiere, iar a le avea în față vă scutește de o conversie.
O scară construită pe rem
Un obicei util este să alegeți un mic set de valori rem și să le refolosiți: 0,5, 1, 1,5, 2, 3 și 4 pentru spațiere și 0,875, 1, 1,25, 1,5, 2 pentru litere. Designerii numesc asta o scară, iar ea păstrează un site coerent vizual. Când o machetă vă dă o valoare ciudată precum 22 px, folosiți convertorul ca să vedeți că este 1,375 rem și apoi hotărâți dacă rotunjiți la cea mai apropiată valoare din scara dumneavoastră.
Cum convertiți px în rem aici
Tastați valoarea în pixeli
Introduceți mărimea în pixeli în primul câmp. Zecimalele sunt acceptate, deci 13,5 px funcționează la fel ca 14.
Verificați baza
Lăsați-o la 16 dacă CSS-ul dumneavoastră nu schimbă mărimea rădăcinii. Schimbați-o dacă o schimbă. Rezultatul se actualizează în timp ce tastați.
Copiați valoarea în rem
Citiți cifra și folosiți-o în CSS, cu unitatea scrisă după ea: font-size: 1.5rem. Nu uitați unitatea, deoarece un număr gol înseamnă altceva la majoritatea proprietăților.
De unde vin aceste unități
Pixelul CSS nu este pixelul ecranului dumneavoastră
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 o lungime de referință: aproximativ 1/96 dintr-un inch văzut la o distanță comodă de citit. Tot restul de pe această pagină se construiește pe asta. Em este mai vechi decât web-ul: în literele de plumb era lățimea unui bloc turnat, numit după litera mare M, iar în CSS înseamnă mărimea fontului în vigoare, motiv pentru care se schimbă pe măsură ce imbricați elemente. Rem a fost adăugat tocmai ca să scape de asta: este em-ul elementului rădăcină și nu se compune niciodată.
De ce există rem
Înainte de rem, dezvoltatorii dimensionau totul în em sau în procente, iar elementele imbricate se înmulțeau între ele: o listă într-o listă într-o listă se micșora sau creștea la fiecare nivel. Rem le-a dat un singur reper fix, rădăcina, și a eliminat compunerea. Dacă vreți să le comparați pe cele două, convertiți px în em și vedeți cum aceeași valoare în pixeli depinde de elementul în care se află.
Unde întâlniți rem în practică
Litere
Textul de bază este de obicei 1 rem, titlurile 1,25 până la 3 rem, literele mici 0,75 până la 0,875 rem. Scrierea lor în rem îi lasă pe cititor să mărească întreaga pagină schimbând o singură setare a browserului.
Spațiere și aranjare
Marginile, padding-ul și spațiile în rem păstrează spațiul alb proporțional cu literele. Când textul crește, crește și spațiul din jurul lui, iar aranjarea rămâne echilibrată în loc să înghesuie litere mai mari în vechile casete.
Interogări media
Punctele de întrerupere scrise în em sau rem răspund la mărimea textului cititorului, astfel încât o aranjare trece la forma ei îngustă mai devreme pentru cineva care și-a mărit textul. Este o rafinare care merită cunoscută, deși pixelii rămân obișnuiți la punctele de întrerupere.
Ce să lăsați în pixeli
Chenarele subțiri, umbrele casetelor și pictogramele subțiri arată adesea cel mai bine la mărimi fixe în pixeli, pentru că un chenar de 0.0625rem care crește la 0.1rem cu text mare nu ajută pe nimeni. Folosiți rem pentru ce trebuie să se scaleze și pixeli pentru ce nu.
Capcane când convertiți px în rem
Uitarea că baza nu este întotdeauna 16
Dacă un proiect setează html { font-size: 62.5% } sau folosește o mărime fluidă a rădăcinii, factorul este altul. Verificați foaia de stil înainte de a avea încredere într-un număr de la orice convertor, inclusiv acesta.
Convertirea mărimii rădăcinii însăși
Dacă setați mărimea rădăcinii în pixeli, setarea browserului cititorului este suprascrisă și beneficiul lui rem se pierde. Setați rădăcina ca procent sau lăsați-o în pace, astfel încât preferința utilizatorului să fie respectată.
Folosirea rem într-o componentă care își setează propria mărime de font
Rem se raportează întotdeauna la rădăcină, nu la componentă. Un buton cu o mărime de font de 14 px și un padding de 1rem are un padding care nu urmează propriul text al butonului. Dacă vreți o spațiere care urmează textul elementului, aceea este treaba lui em.
Amestecarea unităților fără un plan
O foaie de stil care folosește px pentru o margine, rem pentru următoarea și em pentru a treia este greu de urmărit. Alegeți o regulă: rem pentru litere și spațiere, pixeli pentru chenare și umbre, și respectați-o.
Întrebări pe care și le pun oamenii înainte de conversie
Câți rem sunt 16 px?
Unul, pe un browser implicit. Șaisprezece împărțit la baza de șaisprezece.
Este rem mai bun decât px?
Pentru litere și spațiere, este alegerea mai bună în majoritatea proiectelor, deoarece respectă setările cititorului. Pixelii rămân potriviți pentru lucrurile care nu trebuie să se scaleze.
De ce diferă rezultatul meu de al altui site?
Probabil o altă bază. Verificați câmpul: unele instrumente presupun 10, altele 16, altele 14. Această pagină arată baza lângă rezultat.
Trebuie să rotunjesc?
Nu. Browserele acceptă zecimale lungi. Rotunjiți doar pentru lizibilitate.
Este numărul meu încărcat?
Nu. Aritmetica rulează în browserul dumneavoastră și nimic nu este trimis nicăieri.
Cum mă întorc?
Cu rem în px, care înmulțește în loc să împartă.
Alegerea înțeleaptă când convertiți px în rem
Hotărâți o bază pentru proiect și respectați-o
Orice ați alege, faceți din ea o decizie și scrieți-o în documentația proiectului. O echipă care nu cade de acord asupra bazei produce componente care nu se potrivesc între ele.
Convertiți în etapa de design, nu în ultimul moment
Dacă convertiți px în rem în timp ce citiți macheta, construiți scara în design și observați devreme valorile ciudate. Dacă o faceți la sfârșit, le descoperiți ca pe un morman de numere inconsecvente.
Luați în calcul și unitățile ferestrei de afișare
Pentru titluri care trebuie să umple ecranul, px în vw exprimă o mărime ca parte din fereastra de afișare. Se scalează altfel decât rem, iar cele două sunt adesea combinate.
Obiceiuri care fac mai ușor să convertiți px în rem
Țineți un tabel de conversie în minte
Cu o bază de 16, câteva repere acoperă cea mai mare parte din muncă: 4 px este 0,25 rem, 8 px este 0,5, 12 px este 0,75, 16 px este 1, 24 px este 1,5 și 32 px este 2. Când o machetă vă dă o valoare între ele, puteți estima înainte de a converti px în rem pe pagină și folosiți convertorul doar ca să confirmați. După câteva săptămâni veți ști tabelul fără să vă uitați.
Lăsați sistemul de design să facă treaba
Dacă echipa dumneavoastră ține jetoane de design, precum spacing-2 sau font-lg, stocați-le o dată în rem și lăsați pe toată lumea să se refere la nume. Atunci nimeni nu mai trebuie să convertească px în rem, iar o schimbare a scării se face într-un singur loc. Convertorul este instrumentul pe care îl folosiți când scrieți jetoanele, nu când le folosiți.
Scrieți valoarea în pixeli într-un comentariu
O linie precum padding: 1.25rem; /* 20px */ costă câteva caractere și scutește următorul dezvoltator de a căuta un calculator. Înregistrează și ce bază ați presupus, ceea ce ajută dacă mărimea rădăcinii este schimbată mai târziu.
Testați cu o setare schimbată a browserului
Dovada că o pagină este construită în rem este că rezistă la o mărime implicită mai mare a textului. Schimbați setarea în browser, reîncărcați și priviți. Componentele care se strică sunt cele la care ceva a fost lăsat în pixeli sau la care o înălțime fixă a tăiat textul.
Convertoare înrudite
Aceeași familie de instrumente acoperă conversiile vecine. Ca să vă întoarceți la pixeli, folosiți rem în px. 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. Dacă munca dumneavoastră include culori pe lângă mărimi, HEX în RGB, RGB în HEX și HEX în HSL se ocupă de notațiile foii de stil.
Un exemplu lucrat
Să presupunem că o machetă dă unui titlu de card 28 px, unui padding de card 20 px și unui spațiu dintre carduri 12 px, iar proiectul dumneavoastră folosește baza implicită de 16 px. Tastați 28 și citiți 1,75 rem, tastați 20 și citiți 1,25 rem, tastați 12 și citiți 0,75 rem. În foaia de stil scrieți font-size: 1.75rem, padding: 1.25rem și gap: 0.75rem. Un vizitator care ridică mărimea textului din browser la 20 px vede același card, scalat cu un sfert: titlul are 35 px, padding-ul 25 px și spațiul 15 px, totul în proporție. Dacă ați fi scris pixeli, titlul ar fi rămas la 28, iar cardul ar fi arătat greșit.
O listă scurtă de verificare
Înainte de conversie
Aflați baza pe care o folosește CSS-ul dumneavoastră. Hotărâți care mărimi ar trebui să se scaleze și care nu.
În timpul conversiei
Tastați valoarea în pixeli, verificați baza arătată lângă rezultat și copiați cifra rem cu unitatea ei.
După conversie
Testați pagina cu o mărime implicită mai mare a textului în browser și căutați casetele care nu-și mai țin textul.
Greșeli frecvente
Presupunerea că 1 rem este întotdeauna 16 px
Este doar când nimeni nu a schimbat mărimea rădăcinii, iar unii cititori au făcut-o. Scrieți aranjarea astfel încât să funcționeze și la alte mărimi.
Setarea mărimii rădăcinii în pixeli
Suprascrie alegerea cititorului. Folosiți un procent sau nu o setați.
Convertirea a tot
Nu orice mărime trebuie să se scaleze. Lăsați chenarele și umbrele în pixeli.
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 rem.
Rezumat
Ca să convertiți px în rem aici, tastați mărimea în pixeli și citiți-o imediat în rem, folosind formula rem = px ÷ 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: o aranjare scrisă în rem își păstrează forma când mărimea fontului rădăcinii se schimbă. Nu poate ști setările cititorului dumneavoastră, deci cifra este corectă doar pentru baza din câmp. Mărimile uzuale din tabelul de sub convertor, de la 8 px la 0,5 rem până la 64 px la 4 rem, vă scutesc de repetarea aritmeticii. Nimic nu este încărcat.