Px vs. Em vs. Rem: Ktorú jednotku CSS by ste mali použiť?

Px vs. Em vs. Rem: Ktorú jednotku CSS by ste mali použiť?

Naučíte sa niekoľko jednotiek CSS na prispôsobenie veľkosti písma textu pri vytváraní webových stránok. Existuje veľa jednotiek ako pt, pc, ex atď., ale vo väčšine prípadov by ste sa mali zamerať na tri najobľúbenejšie jednotky: px, em a rem. Mnoho vývojárov zvyčajne nechápe, aké sú rozdiely medzi týmito jednotkami; takže nižšie je podrobné vysvetlenie týchto jednotiek.





VYUŽITIE VIDEA DŇA

Pred pokračovaním si všimnite, že existujú dva typy dĺžok jednotiek: absolútne a príbuzný .



Absolútne dĺžky

Jednotky absolútnej dĺžky sú pevné a dĺžka vyjadrená v ktorejkoľvek z nich sa bude javiť ako presne táto veľkosť.





Jednotky absolútnej dĺžky sa neodporúčajú používať na obrazovke, pretože veľkosti obrazovky sa veľmi líšia. Môžu sa však použiť, ak je známe výstupné médium, napríklad pre vytlačený návrh.

Jednotka Popis
cm centimetre
mm milimetrov
v palce (1 palec = 96 pixelov = 2,54 cm)
px * pixelov (1 pixel = 1/96 z 1 palca)
pt bodov (1 bod = 1/72 z 1 palca)
pc piky (1ks = 12pt)

Relatívne dĺžky

Jednotky relatívnej dĺžky určujú dĺžku vzhľadom na inú vlastnosť dĺžky. Jednotky relatívnej dĺžky sa lepšie škálujú medzi rôznymi vykresľovacími médiami.



Jednotka Vzhľadom k
v* Vo vzťahu k veľkosti písma prvku (2em znamená 2-násobok veľkosti aktuálneho písma)
napr Relatívne k výške x aktuálneho písma (zriedka používané)
ch Relatívne k šírke '0' (nula)
rem* Relatívne k veľkosti písma koreňového prvku
vw Relatívne k 1 % šírky zobrazovanej oblasti*
vh Relatívne k 1 % výšky zobrazovanej oblasti*
min Relatívne k 1 % menšieho rozmeru výrezu*
vmax Relatívne k 1 % väčšieho rozmeru výrezu*
% Vo vzťahu k rodičovskému prvku

1. pixel (pixel)

Pixel je pravdepodobne najpoužívanejšou jednotkou v CSS a je veľmi populárny, pokiaľ ide o nastavenie veľkosti písma textu na webových stránkach. Jeden pixel (1 pixel) je v tlačových médiách definovaný ako 1/96 palca.

Na obrazovkách počítačov však zvyčajne nesúvisia so skutočnými mierami, ako sú centimetre a palce, ako si možno myslíte; sú definované ako malé, ale viditeľné. Čo sa považuje za viditeľné, závisí od zariadenia.



Rôzne zariadenia majú na svojich obrazovkách rôzny počet pixelov na palec, čo je známe ako hustota pixelov. Ak by ste na určenie veľkosti obsahu na tomto zariadení použili počet fyzických pixelov na obrazovke zariadenia, mali by ste problém, aby veci vyzerali rovnako na obrazovkách všetkých veľkostí.

Tu prichádza na scénu pomer pixelov zariadenia. Je to v podstate len spôsob, ako vypočítať, koľko miesta zaberie pixel CSS (1 pixel) na obrazovke zariadenia, čo mu umožní vyzerať rovnako veľké v porovnaní s iným zariadením.



hodinky z hliníka alebo nehrdzavejúcej ocele

Nižšie je uvedený príklad: -

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

výkon

web-content-sized-in-pixel-css-jednotka-merná jednotka

Horné pole vyzerá, keď je zobrazené na väčšej obrazovke, napríklad prenosný počítač, a spodné pole je, ako to vyzerá pri zobrazení na menšej obrazovke, napríklad na telefóne .

Všimnite si, že text v oboch poliach má rovnakú veľkosť. V podstate tak funguje pixel. Pomáha webovému obsahu (nielen textu) vyzerať rovnako veľké na všetkých zariadeniach.

2. Ja (M)

Jednotka em dostala svoj názov podľa veľkého písmena „M“ (em), keďže väčšina jednotiek CSS pochádza z typografie. Ako základ používa aktuálnu veľkosť písma nadradeného prvku. Môže sa použiť na zväčšenie alebo zmenšenie veľkosti písma prvku na základe veľkosti písma zdedenej od rodiča.

Povedzme, že máte nadradený div, ktorý má veľkosť písma 16px. Ak vytvoríte prvok odseku v tomto prvku div a priradíte mu veľkosť písma 1 em, veľkosť písma odseku bude 16 pixelov.

Ak však dáte ďalšiemu odseku veľkosť písma 2em, preloží sa to na 32px. Zvážte príklad nižšie:

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

výkon

veľkosť webového obsahu v em css jednotkách merania

Môžete vidieť, ako môže em zväčšiť veľkosť textu a ako to ovplyvňuje aktuálna veľkosť písma zdedená z nadradeného kontajnera. Neodporúča sa ich používať, najmä v rámci zložitých štruktúrovaných stránok.

Ak sa nepoužije správne, môžete naraziť na problémy so škálovaním, keď prvky nemusia mať správnu veľkosť na základe komplexného dedenia veľkostí v strome DOM.

3. Rem (root Em)

Rem funguje takmer rovnako ako em, ale hlavný rozdiel je v tom, že rem odkazuje iba na veľkosť písma koreňového prvku na stránke a nie na veľkosť písma rodiča. Koreňová veľkosť písma je predvolená veľkosť písma určená používateľom v nastaveniach prehliadača alebo vami, vývojárom.

Predvolená veľkosť písma webového prehliadača je zvyčajne 16px, takže 1rem bude 16px a 2rem bude 32px. Avšak v prípade, keď sa veľkosť koreňového písma zmení napríklad na 10px; 1rem bude mať 10px a 2rem bude 20px.

Tu je príklad, aby to bolo jasnejšie:

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

výkon

webový obsah veľkosti v rem css mernej jednotke

Ako vidíte, odseky definované s jednotkami REM sú úplne nenarušené veľkosťou písma deklarovanou v našom kontajneri a sú striktne vykreslené vzhľadom na veľkosť koreňového písma definovaná v selektore elementov HTML.

Px vs. Em vs. Rem: Ktorá jednotka je najlepšia?

Em sa neodporúča kvôli možnosti mať zložitú hierarchiu vnorených prvkov. REM je zvyčajne primerane škálované s novou predvolenou/základnou veľkosťou písma špecifikovanou v nastaveniach prehliadača na rozdiel od PX. To vysvetľuje, prečo by ste mali používať REM pri práci s textovým obsahom na vašich webových stránkach. REM vyhráva preteky. Lepší štýl a škálovanie vášho obsahu pomocou REM dodajú vášmu webu šmrnc, pretože je ideálny pre tvorcov webových stránok. Presné merania vášho obsahu budú diktovať vzhľad a dojem z vášho webu, budete však musieť byť kreatívni.