Px vs. Em vs. Rem: Ce unitate CSS ar trebui să utilizați?

Px vs. Em vs. Rem: Ce unitate CSS ar trebui să utilizați?

Veți învăța câteva unități CSS pentru a personaliza dimensiunea fontului textului atunci când construiți pagini web. Există multe unități, cum ar fi pt, pc, ex etc., dar în majoritatea cazurilor ar trebui să vă concentrați pe cele mai populare trei unități: px, em și rem. Mulți dezvoltatori nu înțeleg de obicei care sunt diferențele dintre aceste unități; deci, mai jos este o explicație detaliată a acestor unități.





REALIZAREA VIDEOCLIPULUI ZILEI

Înainte de a continua, rețineți că există două tipuri de lungimi de unități: absolut și relativ .



Lungimi absolute

Unitățile de lungime absolută sunt fixe și o lungime exprimată în oricare dintre acestea va apărea exact ca dimensiunea respectivă.





Unitățile de lungime absolută nu sunt recomandate pentru utilizare pe ecran, deoarece dimensiunile ecranului variază foarte mult. Cu toate acestea, ele pot fi utilizate dacă mediul de ieșire este cunoscut, cum ar fi pentru un aspect tipărit.

Unitate Descriere
cm centimetri
mm milimetri
în inci (1in = 96px = 2,54 cm)
px * pixeli (1px = 1/96 din 1 in)
pct puncte (1pt = 1/72 din 1in)
pc pică (1 buc = 12 puncte)

Lungimi relative

Unitățile de lungime relativă specifică o lungime relativă la o altă proprietate de lungime. Unitățile de lungime relativă se scalează mai bine între diferitele medii de randare.



Unitate Relativ la
în* Raportat la dimensiunea fontului elementului (2em înseamnă de 2 ori dimensiunea fontului curent)
ex Raportat la înălțimea x a fontului curent (folosit rar)
cap Raportat la lățimea lui „0” (zero)
rem* Relativ la dimensiunea fontului elementului rădăcină
vw Relativ la 1% din lățimea ferestrei de vizualizare*
vh Relativ la 1% din înălțimea ferestrei de vizualizare*
min Relativ la 1% din dimensiunea mai mică a ferestrei*
vmax Relativ la 1% din dimensiunea mai mare a ferestrei*
% Relativ la elementul părinte

1. Px (Pixel)

Pixel este probabil cea mai folosită unitate în CSS și sunt foarte populare atunci când vine vorba de setarea dimensiunii fontului textului pe paginile web. Un pixel (1px) este definit ca 1/96 de inch în suportul de imprimare.

Cu toate acestea, pe ecranele computerelor, acestea nu sunt de obicei legate de măsurători reale, cum ar fi centimetri și inci, așa cum ați putea crede; sunt doar definite ca fiind mici, dar vizibile. Ceea ce este considerat vizibil depinde de dispozitiv.



Dispozitivele diferite au un număr diferit de pixeli pe inch pe ecranele lor, ceea ce este cunoscut sub numele de densitate de pixeli. Dacă ați folosit numărul de pixeli fizici de pe ecranul unui dispozitiv pentru a determina dimensiunea conținutului de pe acel dispozitiv, ați avea o problemă ca lucrurile să arate la fel pe ecranele de toate dimensiunile.

Aici intervine raportul pixelilor dispozitivului. Este, în esență, doar o modalitate de a calcula cât spațiu va ocupa un pixel CSS (1px) pe ecranul dispozitivului, ceea ce îi va permite să arate aceeași dimensiune în comparație cu un alt dispozitiv.



Mai jos este un exemplu: -

<div class="container"> 
     <div> 
       <h1>This is a paragraph</h1> 
       <p> 
         Lorem ipsum, dolor sit amet consectetur adipisicing elit. 
         Reprehenderit incidunt perferendis iure veritatis cupiditate delectus 
         omnis at! Officiis praesentium officia, nemo veniam consequatur 
         nostrum sunt aliquid ipsam, corporis quas quaerat. Lorem ipsum dolor 
         sit amet consectetur adipisicing elit. Hic quam beatae voluptatibus 
         amet possimus iure impedit assumenda distinctio aliquid debitis, autem 
         vel ullam aut, quod corporis ratione atque ducimus dolorum. 
       </p> 
     </div> 
   </div> 
.container { 
  width: 100%; 
  height: 100vh; 
  display: flex; 
  justify-content: center; 
  align-items: center; 
} 
.container div { 
  max-width: 500px; 
  padding: 5px 20px; 
  border: 1px grey solid; 
  border-radius: 10px; 
} 
p { 
  font-size: 16px; 
}

ieșire

de ce iphone-ul meu nu trimite mesaje text
dimensiunea-conținutului-web-în-pixel-css-unitate-de-măsură

Caseta de sus este așa cum arată când este afișată pe un ecran mai mare precum un laptop, iar caseta de jos este așa cum arată când este afișat pe un ecran mai mic, cum ar fi un telefon .

Observați cum textul din ambele casete este de aceeași dimensiune. Practic, așa funcționează pixelul. Ajută conținutul web (nu doar textul) să arate aceeași dimensiune pe dispozitive.

2. Eu (M)

Unitatea em și-a primit numele de la litera mare „M” (em), deoarece majoritatea unităților CSS provin din tipografie. Folosește dimensiunea fontului curent a elementului părinte ca bază. Poate fi folosit pentru a mări sau reduce dimensiunea fontului unui element pe baza mărimii fontului moștenit de la părinte.

Să presupunem că aveți un div părinte care are o dimensiune a fontului de 16 px. Dacă creați un element paragraf în acel div și îi dați o dimensiune a fontului de 1em, dimensiunea fontului paragrafului va fi de 16px.

Cu toate acestea, dacă dați unui alt paragraf dimensiunea fontului de 2em care se va traduce la 32px. Luați în considerare exemplul de mai jos:

   <div class="div-one"> 
      <p class="one-em">1 em based on 10px</p> 
      <p class="two-em">2 em based on 10px</p> 
  </div> 
    <div class="div-two"> 
     <p class="one-em">1 em based on 10px</p> 
     <p class="two-em">2 em based on 10px</p> 
    </div> 
   </div> 
.div-one { 
  font-size: 15px; 
} 
.div-two { 
  font-size: 20px; 
} 
.one-em { 
  font-size: 1em; 
} 
.two-em { 
  font-size: 2em; 
}

ieșire

cum să combinați două conturi de facebook
conținut web dimensionat în unitatea de măsură em css

Puteți vedea cum poate mări dimensiunea textului și cum este afectat de dimensiunea curentă a fontului moștenit de la containerul părinte. Nu este recomandabil să le folosiți, mai ales în cadrul paginilor structurate complexe.

Dacă nu este utilizat în mod corespunzător, este posibil să întâmpinați probleme de scalare în care elementele ar putea să nu fie dimensionate corespunzător pe baza unei moșteniri complexe de dimensiuni în arborele DOM.

3. Rem (Root Em)

Rem funcționează aproape la fel ca em, dar principala diferență este că rem face referire doar la dimensiunea fontului elementului rădăcină de pe pagină, mai degrabă decât la dimensiunea fontului părintelui. Mărimea fontului rădăcină este dimensiunea fontului implicită specificată fie de utilizator în setările browserului, fie de dvs., dezvoltatorul.

Dimensiunea implicită a fontului a unui browser web este de obicei de 16 px, prin urmare 1 rem va fi de 16 px și 2 rem va fi de 32 px. Cu toate acestea, într-un caz în care dimensiunea fontului rădăcină este schimbată la 10px, de exemplu; 1rem va fi de 10px și 2rem va fi de 20px.

Iată un exemplu pentru a clarifica lucrurile:

   <div class="div-one"> 
     <!-- EM --> 
     <p class="one-em">1 em based on container (40px)</p> 
     <p class="two-em">2 em based on container (40px)</p> 
     <!-- REM --> 
     <p class="one-rem">1 rem based on root (16px)</p> 
     <p class="two-rem">2 rem based on root (16px)</p> 
   </div> 
.div-one { 
  font-size: 40px; 
} 
.one-em { 
  font-size: 1em; 
} 
.two-em { 
  font-size: 2em; 
} 
.one-rem { 
  font-size: 1rem; 
} 
.two-rem { 
  font-size: 2rem; 
}

ieșire

conținut web dimensionat în unitatea de măsură rem css

După cum puteți vedea, paragrafele definite cu unitățile REM sunt complet netulburate de dimensiunea fontului declarată în containerul nostru și sunt redate strict în raport cu dimensiunea fontului rădăcină definită în selectorul de elemente HTML.

Px vs. Em vs. Rem: care unitate este cea mai bună?

Em nu este recomandat din cauza posibilității de a avea o ierarhie complexă de elemente imbricate. REM este de obicei scalat corespunzător cu noua dimensiune implicită/de bază a fontului specificată în setările browserului, spre deosebire de PX. Aceasta explică de ce ar trebui să utilizați REM atunci când lucrați cu conținut text pe paginile dvs. web. REM câștigă cursa. O mai bună stilizare și scalare a conținutului dvs. cu REM adaugă fler site-ului dvs., deoarece este ideal pentru creatorii de site-uri web. Măsurătorile punctuale ale conținutului dvs. vor dicta aspectul site-ului dvs., cu toate acestea, va trebui să fiți creativ.