Px proti Em proti Rem: katero enoto CSS naj uporabite?

Px proti Em proti Rem: katero enoto CSS naj uporabite?

Naučili se boste nekaj enot CSS za prilagajanje velikosti pisave besedila pri izdelavi spletnih strani. Obstaja veliko enot, kot so pt, pc, ex itd., vendar se v večini primerov osredotočite na tri najbolj priljubljene enote: px, em in rem. Mnogi razvijalci običajno ne razumejo, kakšne so razlike med temi enotami; zato je spodaj podrobna razlaga teh enot.





MAKEUSEOF VIDEO DNEVA

Preden nadaljujete, upoštevajte, da obstajata dve vrsti dolžin enot: absolutno in relativno .



obrežite sliko v krog

Absolutne dolžine

Enote absolutne dolžine so fiksne in dolžina, izražena v kateri koli od teh, bo prikazana kot točno ta velikost.





Enote absolutne dolžine niso priporočljive za uporabo na zaslonu, ker se velikosti zaslona zelo razlikujejo. Vendar jih je mogoče uporabiti, če je izhodni medij znan, na primer za natisnjeno postavitev.

Enota Opis
cm centimetrov
mm milimetrov
v palcev (1in = 96px = 2,54 cm)
px * slikovnih pik (1 slikovnih pik = 1/96 od 1 in)
točka točke (1 točka = 1/72 od 1 in)
pc pik (1pc = 12pt)

Relativne dolžine

Enote relativne dolžine določajo dolžino glede na drugo lastnost dolžine. Enote relativne dolžine se bolje prilagajajo med različnimi upodabljajočimi mediji.



Enota Glede na
v* Glede na velikost pisave elementa (2em pomeni 2-kratno velikost trenutne pisave)
npr Glede na x-višino trenutne pisave (redko uporabljena)
pogl Glede na širino '0' (nič)
rem* Glede na velikost pisave korenskega elementa
vw Glede na 1 % širine vidnega polja*
vh Glede na 1 % višine vidnega polja*
min Glede na 1 % manjše dimenzije vidnega polja*
vmax Glede na 1 % večjo dimenzijo vidnega polja*
% Glede na nadrejeni element

1. Px (piksel)

Pixel je verjetno najpogosteje uporabljena enota v CSS in je zelo priljubljen, ko gre za nastavitev velikosti pisave besedila na spletnih straneh. En piksel (1 slikovna pika) je v tiskanih medijih definiran kot 1/96 palca.

Na računalniških zaslonih pa običajno niso povezani z dejanskimi merami, kot so centimetri in palci, kot si morda mislite; definirani so kot majhni, a vidni. Kaj je vidno, je odvisno od naprave.



Različne naprave imajo različno število slikovnih pik na palec na svojih zaslonih, kar je znano kot gostota slikovnih pik. Če bi uporabili število fizičnih slikovnih pik na zaslonu naprave za določanje velikosti vsebine v tej napravi, bi imeli težave, da bi stvari izgledale enako na zaslonih vseh velikosti.

Tu nastopi razmerje slikovnih pik naprave. To je v bistvu samo način za izračun, koliko prostora bo piksel CSS (1 slikovna pika) zavzel na zaslonu naprave, kar ji bo omogočilo, da bo videti enake velikosti v primerjavi z drugo napravo.



Spodaj je primer: -

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

izhod

web-content-sized-in-pixel-css-unit-of-measurement

Zgornje polje je videti, ko je prikazano na večjem zaslonu, kot je prenosni računalnik, spodnje polje pa, kako je videti ko je prikazan na manjšem zaslonu, kot je telefon .

Opazite, da je besedilo v obeh poljih enake velikosti. To je v bistvu, kako deluje piksel. Pomaga, da je spletna vsebina (ne le besedilo) videti enake velikosti v različnih napravah.

2. Jaz (M)

Enota em je dobila ime po veliki črki 'M' (em), saj večina enot CSS izvira iz tipografije. Kot osnovo uporablja trenutno velikost pisave nadrejenega elementa. Uporablja se lahko za povečanje ali zmanjšanje velikosti pisave elementa glede na velikost pisave, podedovano od starša.

Recimo, da imate nadrejeni element div z velikostjo pisave 16 slikovnih pik. Če ustvarite element odstavka v tem divu in mu dodelite velikost pisave 1em, bo velikost pisave odstavka 16 slikovnih pik.

Vendar, če drugemu odstavku dodelite velikost pisave 2em, bo to pomenilo 32 slikovnih pik. Razmislite o spodnjem primeru:

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

izhod

velikost spletne vsebine v merskih enotah em css

Vidite lahko, kako lahko em poveča velikost besedila in kako na to vpliva trenutna velikost pisave, podedovana iz nadrejenega vsebnika. Ni priporočljivo uporabljati em, zlasti na straneh s kompleksno strukturo.

Če se ne uporablja pravilno, lahko naletite na težave s skaliranjem, kjer elementi morda niso pravilno odmerjeni glede na kompleksno dedovanje velikosti v drevesu DOM.

3. Rem (Root Em)

Rem deluje skoraj enako kot em, vendar je glavna razlika v tem, da se rem sklicuje samo na velikost pisave korenskega elementa na strani in ne na nadrejeno velikost pisave. Korenska velikost pisave je privzeta velikost pisave, ki jo določi uporabnik v nastavitvah brskalnika ali vi, razvijalec.

Privzeta velikost pisave spletnega brskalnika je običajno 16px, zato bo 1rem 16px in 2rem 32px. Vendar pa v primeru, ko je korenska velikost pisave na primer spremenjena na 10 slikovnih pik; 1rem bo 10px, 2rem pa 20px.

Tukaj je primer, da bodo stvari jasnejše:

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

izhod

windows 10 se prebudi iz spanja sam
velikost spletne vsebine v merski enoti rem css

Kot lahko vidite, odstavke, definirane z enotami REM, popolnoma ne moti velikost pisave, navedena v našem vsebniku, in so strogo upodobljeni glede na velikost korenske pisave, določena v izbirniku elementov HTML.

Px proti Em proti Rem: katera enota je najboljša?

Em ni priporočljivo zaradi možnosti kompleksne hierarhije ugnezdenih elementov. REM se običajno ustrezno prilagodi z novo privzeto/osnovno velikostjo pisave, določeno v nastavitvah brskalnika, v nasprotju s PX. To pojasnjuje, zakaj bi morali pri delu z besedilno vsebino na svojih spletnih straneh uporabljati REM. REM zmaga na dirki. Boljše oblikovanje in prilagajanje vaše vsebine z REM vašemu spletnemu mestu doda pridih, saj je idealen za ustvarjalce spletnih mest. Sprotne meritve vaše vsebine bodo narekovale videz in občutek vašega spletnega mesta, vendar boste morali biti ustvarjalni.