Px vs. Em vs. Rem: Aling CSS Unit ang Dapat Mong Gamitin?

Matututo ka ng ilang CSS unit para sa pag-customize ng font-size ng text kapag gumagawa ng mga web page. Maraming unit gaya ng pt, pc, ex, atbp., ngunit sa karamihan ng mga kaso dapat kang tumuon sa tatlong pinakasikat na unit: px, em, at rem. Hindi karaniwang naiintindihan ng maraming developer kung ano ang mga pagkakaiba sa pagitan ng mga unit na ito; kaya, nasa ibaba ang isang detalyadong paliwanag ng mga yunit na ito.

MAKEUSEOF VIDEO OF THE DAY

Bago magpatuloy, tandaan na mayroong dalawang uri ng haba ng yunit: ganap at kamag-anak .

Mga Ganap na Haba

Ang mga yunit ng ganap na haba ay naayos, at ang isang haba na ipinahayag sa alinman sa mga ito ay lilitaw nang eksakto sa laki na iyon.

Ang mga absolute length unit ay hindi inirerekomenda para sa paggamit sa screen, dahil iba-iba ang laki ng screen. Gayunpaman, magagamit ang mga ito kung kilala ang output medium, tulad ng para sa isang naka-print na layout.

Yunit	Paglalarawan
cm	sentimetro
mm	millimeters
sa	pulgada (1in = 96px = 2.54cm)
px *	mga pixel (1px = 1/96th ng 1in)
pt	puntos (1pt = 1/72 ng 1in)
pc	mga pala (1pc = 12pt)

Mga Kamag-anak na Haba

Ang mga yunit ng kaugnay na haba ay tumutukoy sa isang haba na nauugnay sa isa pang property ng haba. Mas mahusay ang sukat ng mga yunit ng kaugnay na haba sa pagitan ng iba't ibang medium ng pag-render.

kung paano mag-download ng mga video sa youtube sa camera roll

Yunit	May kaugnayan sa
sa*	May kaugnayan sa laki ng font ng elemento (2em ay nangangahulugang 2 beses ang laki ng kasalukuyang font)
ex	May kaugnayan sa x-taas ng kasalukuyang font (bihirang ginagamit)
ch	May kaugnayan sa lapad ng '0' (zero)
rem*	May kaugnayan sa laki ng font ng elemento ng ugat
vw	May kaugnayan sa 1% ng lapad ng viewport*
vh	May kaugnayan sa 1% ng taas ng viewport*
min	May kaugnayan sa 1% ng mas maliit na dimensyon ng viewport*
vmax	May kaugnayan sa 1% ng mas malaking dimensyon ng viewport
%	May kaugnayan sa elemento ng magulang

1. Px (Pixel)

Ang Pixel ay marahil ang pinakaginagamit na unit sa CSS at napakasikat pagdating sa pagtatakda ng font-size ng text sa mga webpage. Tinutukoy ang isang pixel (1px) bilang 1/96th ng isang pulgada sa print media.

Gayunpaman, sa mga screen ng computer, ang mga ito ay karaniwang hindi nauugnay sa mga aktwal na sukat tulad ng mga sentimetro at pulgada tulad ng iniisip mo; ang mga ito ay tinukoy lamang na maliit ngunit nakikita. Ang itinuturing na nakikita ay nakadepende sa device.

Ang iba't ibang device ay may iba't ibang bilang ng mga pixel bawat pulgada sa kanilang mga screen, na kilala bilang pixel density. Kung ginamit mo ang bilang ng mga pisikal na pixel sa screen ng isang device upang matukoy ang laki ng content sa device na iyon, magkakaroon ka ng problema sa paggawa ng mga bagay na pareho sa mga screen ng lahat ng laki.

Doon pumapasok ang ratio ng pixel ng device. Ito ay isang paraan lamang upang kalkulahin kung gaano karaming espasyo ang aabutin ng isang CSS pixel (1px) sa screen ng device na magbibigay-daan sa hitsura nito sa parehong laki kapag inihambing sa isa pang device.

Nasa ibaba ang isang halimbawa:-

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

output

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

Ang itaas na kahon ay kung ano ang hitsura nito kapag ipinapakita sa isang mas malaking screen tulad ng isang laptop, at ang ilalim na kahon ay kung ano ang hitsura nito kapag ipinapakita sa isang mas maliit na screen, tulad ng isang telepono .

Pansinin kung paano ang teksto sa parehong mga kahon ay may parehong laki, Iyan talaga kung paano gumagana ang pixel. Nakakatulong ito sa web content (hindi lang text) na magkapareho ang laki sa mga device.

Ang usb aparato ay hindi maaaring magsimula ng code 10

2. Ako (M)

Nakuha ng em unit ang pangalan nito mula sa malaking titik na 'M' (em) dahil karamihan sa mga unit ng CSS ay nagmula sa typography. Ginagamit nito ang kasalukuyang font-size ng parent element bilang base nito. Maaari itong gamitin upang palakihin o pababain ang laki ng font ng isang elemento batay sa laki ng font na minana mula sa magulang.

Sabihin nating mayroon kang parent div na may font-size na 16px. Kung gagawa ka ng elemento ng paragraph sa div na iyon at bibigyan ito ng font-size na 1em, ang laki ng font ng paragraph ay magiging 16px.

Gayunpaman, kung bibigyan mo ng isa pang talata ang laki ng font na 2em na isasalin sa 32px. Isaalang-alang ang halimbawa sa ibaba:

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

output

nilalaman ng web na may sukat sa em css unit ng pagsukat

Makikita mo kung paano nila mapapalaki ang laki ng text at kung paano ito naaapektuhan ng kasalukuyang laki ng font na minana mula sa parent container. Hindi ipinapayong gamitin ang mga ito, lalo na sa loob ng mga kumplikadong structured na pahina.

gumagalaw ang mouse sa sarili nitong windows 10

Kung hindi ginamit nang maayos, maaari kang magkaroon ng mga problema sa pag-scale kung saan maaaring hindi maayos ang laki ng mga elemento batay sa isang kumplikadong inheritance ng mga laki sa DOM tree.

3. Rem (Root Em)

Ang Rem ay gumagana halos kapareho ng em, ngunit ang pangunahing pagkakaiba ay ang rem ay tumutukoy lamang sa laki ng font ng elemento ng ugat sa pahina kaysa sa laki ng font ng magulang. Ang root font-size ay ang default na font-size na tinukoy ng user sa kanilang mga setting ng browser o ng ikaw, ang developer.

Ang default na laki ng font ng isang web browser ay karaniwang 16px kaya ang 1rem ay magiging 16px at ang 2rem ay magiging 32px. Gayunpaman, sa isang kaso kung saan ang root font-size ay binago sa 10px halimbawa; Ang 1rem ay magiging 10px at ang 2rem ay magiging 20px.

Narito ang isang halimbawa upang gawing mas malinaw ang mga bagay:

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

output

nilalaman ng web na may sukat sa rem css unit ng pagsukat

Gaya ng nakikita mo, ang mga talata na tinukoy sa mga unit ng REM ay ganap na hindi naaabala ng laki ng font na idineklara sa aming lalagyan at mahigpit na nai-render kaugnay ng laki ng font ng ugat na tinukoy sa tagapili ng elemento ng HTML.

Px vs. Em vs. Rem: Aling Unit ang Pinakamahusay?

Hindi inirerekomenda ang Em dahil sa posibilidad na magkaroon ng kumplikadong hierarchy ng mga nested na elemento. Ang REM ay karaniwang nai-scale nang naaangkop sa bagong default/base na laki ng font na tinukoy sa mga setting ng browser bilang kabaligtaran sa PX. Ipinapaliwanag nito kung bakit dapat kang gumamit ng REM kapag nagtatrabaho sa nilalamang teksto sa iyong mga web page. Nanalo ang REM sa karera. Ang mas mahusay na pag-istilo at pag-scale ng iyong content gamit ang REM ay nagdaragdag ng flair sa iyong site dahil perpekto ito para sa mga tagalikha ng website. Ang mga on-point na sukat ng iyong nilalaman ay magdidikta sa hitsura at pakiramdam ng iyong website, gayunpaman, kakailanganin mong maging malikhain.