Px naspram Em naspram Rem: Koju CSS jedinicu trebate koristiti?

Px naspram Em naspram Rem: Koju CSS jedinicu trebate koristiti?

Naučit ćete nekoliko CSS jedinica za prilagođavanje veličine fonta teksta prilikom izrade web stranica. Postoje mnoge jedinice kao što su pt, pc, ex itd., ali u većini slučajeva trebali biste se usredotočiti na tri najpopularnije jedinice: px, em i rem. Mnogi programeri obično ne razumiju koje su razlike između ovih jedinica; pa je u nastavku detaljno objašnjenje ovih jedinica.





MAKEUSEOF VIDEO DANA

Prije nastavka imajte na umu da postoje dvije vrste jediničnih duljina: apsolutni i relativna .



Apsolutne duljine

Jedinice apsolutne duljine su fiksne, a duljina izražena u bilo kojoj od njih pojavit će se kao točno ta veličina.





Jedinice apsolutne duljine ne preporučuju se za korištenje na zaslonu jer se veličine zaslona jako razlikuju. Međutim, mogu se koristiti ako je izlazni medij poznat, kao na primjer za ispisani izgled.

Jedinica Opis
cm centimetra
mm milimetara
u inča (1 in = 96 px = 2,54 cm)
px * piksela (1px = 1/96 od 1 inča)
točka bodovi (1 pt = 1/72 od 1 inča)
PC pik (1pc = 12pt)

Relativne duljine

Jedinice relativne duljine određuju duljinu u odnosu na drugo svojstvo duljine. Jedinice relativne duljine bolje se skaliraju između različitih medija za iscrtavanje.



Jedinica U odnosu na
u* U odnosu na veličinu fonta elementa (2em znači 2 puta veću veličinu od trenutnog fonta)
pr U odnosu na x-visinu trenutnog fonta (rijetko se koristi)
CH U odnosu na širinu '0' (nula)
rem* U odnosu na veličinu fonta korijenskog elementa
vw U odnosu na 1% širine okvira za prikaz*
vh U odnosu na 1% visine prozora*
min U odnosu na 1% manje dimenzije okvira za prikaz*
vmax U odnosu na 1% veće dimenzije okvira za prikaz*
% U odnosu na nadređeni element

1. Px (piksel)

Pixel je vjerojatno najkorištenija jedinica u CSS-u i vrlo je popularan kada se radi o postavljanju veličine fonta teksta na web stranicama. Jedan piksel (1px) definiran je kao 1/96 inča u tiskanim medijima.

Međutim, na računalnim zaslonima oni obično nisu povezani sa stvarnim mjerama kao što su centimetri i inči kao što možda mislite; samo su definirani kao mali, ali vidljivi. Što se smatra vidljivim ovisi o uređaju.



Različiti uređaji imaju različit broj piksela po inču na svojim zaslonima, što je poznato kao gustoća piksela. Ako ste upotrijebili broj fizičkih piksela na zaslonu uređaja za određivanje veličine sadržaja na tom uređaju, imali biste problema da stvari izgledaju jednako na zaslonima svih veličina.

kako izbrisati svoj hotmail račun

Tu dolazi omjer piksela uređaja. To je u biti samo način da se izračuna koliko će prostora CSS piksel (1px) zauzeti na zaslonu uređaja što će mu omogućiti da izgleda iste veličine u usporedbi s drugim uređajem.



Ispod je primjer: -

<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; 
}

izlaz

web-sadržaj veličine-u-pikselu-css-jedinica-mjere

Gornji okvir je kako izgleda kada se prikaže na većem ekranu kao što je prijenosno računalo, a donji okvir je kako izgleda kada se prikazuje na manjem ekranu, poput telefona .

Primijetite kako je tekst u oba okvira iste veličine. To je u osnovi način na koji piksel radi. Pomaže da web sadržaj (ne samo tekst) izgleda iste veličine na svim uređajima.

2. Ja (M)

Jedinica em dobila je ime po velikom slovu 'M' (em) jer većina CSS jedinica dolazi iz tipografije. Koristi trenutnu veličinu fonta nadređenog elementa kao osnovu. Može se koristiti za povećavanje ili smanjivanje veličine fonta elementa na temelju veličine fonta naslijeđene od roditelja.

kako očistiti ostalu pohranu na iphoneu

Recimo da imate nadređeni div čija je veličina fonta 16 px. Ako stvorite element odlomka u tom divu i date mu veličinu fonta od 1em, veličina fonta odlomka bit će 16px.

Međutim, ako drugom odlomku date veličinu fonta od 2em, to će se prevesti u 32 px. Razmotrite primjer u nastavku:

   <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; 
}

izlaz

web sadržaj veličine u em css mjernoj jedinici

Možete vidjeti kako em može povećati veličinu teksta i kako na to utječe trenutna veličina fonta naslijeđena od nadređenog spremnika. Nije preporučljivo koristiti em, osobito unutar složeno strukturiranih stranica.

Ako se ne koristi ispravno, možete naići na probleme s skaliranjem pri čemu elementi možda neće imati odgovarajuću veličinu na temelju složenog nasljeđivanja veličina u DOM stablu.

zašto se moj iPhone ne povezuje s računalom

3. Rem (Root Em)

Rem radi gotovo isto kao i em, ali glavna je razlika u tome što rem upućuje samo na veličinu fonta korijenskog elementa na stranici, a ne na roditeljsku veličinu fonta. Osnovna veličina fonta je zadana veličina fonta koju odredi korisnik u svojim postavkama preglednika ili vi, razvojni programer.

Zadana veličina fonta web-preglednika obično je 16px, stoga će 1rem biti 16px, a 2rem 32px. Međutim, u slučaju kada je korijenska veličina fonta promijenjena na 10px na primjer; 1rem će biti 10px, a 2rem će biti 20px.

Evo primjera da stvari budu jasnije:

   <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; 
}

izlaz

web sadržaj veličine u rem css mjernoj jedinici

Kao što možete vidjeti, odlomci definirani REM jedinicama potpuno su neometani veličinom fonta deklariranom u našem spremniku i strogo su prikazani u odnosu na korijenska veličina fonta definirana u biraču HTML elementa.

Px vs. Em vs. Rem: Koja je jedinica najbolja?

Em se ne preporučuje zbog mogućnosti postojanja složene hijerarhije ugniježđenih elemenata. REM se obično prikladno skalira s novom zadanom/osnovnom veličinom fonta navedenom u postavkama preglednika za razliku od PX-a. Ovo objašnjava zašto biste trebali koristiti REM kada radite s tekstualnim sadržajem na svojim web stranicama. REM pobjeđuje u utrci. Bolji stil i skaliranje vašeg sadržaja s REM-om dodaju šarm vašem web-mjestu jer je idealan za kreatore web-mjesta. Mjerenja vašeg sadržaja na mjestu odredit će izgled i dojam vaše web stranice, međutim, morat ćete biti kreativni.