Px vs. Em vs. Rem: Melyik CSS-egységet használja?

Px vs. Em vs. Rem: Melyik CSS-egységet használja?

Meg fog tanulni néhány CSS-egységet a szöveg betűméretének testreszabásához weboldalak készítése során. Sok mértékegység létezik, például pt, pc, ex stb., de a legtöbb esetben a három legnépszerűbb egységre kell összpontosítania: px, em és rem. Sok fejlesztő általában nem érti, mi a különbség ezek között az egységek között; így az alábbiakban ezeknek az egységeknek a részletes magyarázata található.





MAKEUSEOF A NAP VIDEÓJA

Mielőtt továbblépne, vegye figyelembe, hogy kétféle egységhossz létezik: abszolút és relatív .



Abszolút hosszúságok

Az abszolút hossz mértékegységei rögzítettek, és az ezek bármelyikében kifejezett hosszúság pontosan ennek a méretnek fog megjelenni.





Abszolút hosszúság mértékegységek használata nem javasolt a képernyőn, mert a képernyő mérete nagyon eltérő. Használhatók azonban, ha a kimeneti adathordozó ismert, például nyomtatott elrendezéshez.

Mértékegység Leírás
cm centiméter
mm milliméter
ban ben hüvelyk (1 hüvelyk = 96 képpont = 2,54 cm)
px* képpont (1 képpont = 1/96/1 hüvelyk)
pt pont (1 pt = 1/72/1 hüvelyk)
pc ásó (1 db = 12 pont)

Relatív hosszúságok

A relatív hosszúság mértékegységei egy másik hossztulajdonsághoz viszonyított hosszúságot adnak meg. A relatív hosszúság mértékegységei jobban skálázódnak a különböző megjelenítési médiumok között.



Mértékegység Viszonyítva
ban ben* Az elem betűméretéhez viszonyítva (a 2em az aktuális betűméret kétszeresét jelenti)
volt Az aktuális betűtípus x-magasságához viszonyítva (ritkán használt)
ch A '0' (nulla) szélességéhez viszonyítva
rem* A gyökérelem betűméretéhez viszonyítva
vw A nézetablak szélességének 1%-ához képest*
vh A nézetablak magasságának 1%-ához képest*
min A nézetablak* kisebb méretének 1%-ához képest
vmax A nézetablak* nagyobb méretének 1%-ához képest
% A szülőelemhez viszonyítva

1. Px (pixel)

A pixel valószínűleg a leggyakrabban használt egység a CSS-ben, és nagyon népszerű a weboldalakon található szöveg betűméretének beállításakor. Egy képpont (1 képpont) a nyomtatási médiában a hüvelyk 1/96-od része.

A számítógép képernyőjén azonban ezek általában nem kapcsolódnak tényleges méretekhez, például centiméterekhez és hüvelykekhez, mint gondolnád; csak kicsinek, de láthatónak vannak meghatározva. Az, hogy mit tekintenek láthatónak, az eszköztől függ.



A különböző eszközök képernyőjén eltérő számú pixel van hüvelykenként, ezt pixelsűrűségnek nevezik. Ha az eszköz képernyőjén lévő fizikai képpontok számát használná az eszközön lévő tartalom méretének meghatározásához, akkor problémát okozna, hogy a dolgok minden méretű képernyőn ugyanúgy nézzenek ki.

Itt jön a képbe az eszköz pixelaránya. Ez lényegében csak egy módszer annak kiszámítására, hogy egy CSS pixel (1 képpont) mennyi helyet foglal el az eszköz képernyőjén, ami lehetővé teszi, hogy egy másik eszközhöz képest ugyanolyan méretűnek tűnjön.



Alább egy példa: -

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

Kimenet

hogyan kell csatlakoztatni az xbox 1 vezérlőt
webtartalom-méret a pixel-css-mértékegységben

A felső doboz úgy néz ki, mint egy nagyobb képernyőn, például egy laptopon, az alsó pedig az, ahogyan amikor egy kisebb képernyőn, például egy telefonon jeleníti meg .

Figyelje meg, hogy a szöveg mindkét mezőben azonos méretű, alapvetően így működik a pixel. Segítségével a webes tartalom (nem csak a szöveg) azonos méretűnek tűnhet minden eszközön.

2. Én (M)

Az em egység a nevét a nagy „M” (em) betűről kapta, mivel a legtöbb CSS egység a tipográfiából származik. A szülőelem aktuális betűméretét használja alapként. Használható egy elem betűméretének növelésére vagy kicsinyítésére a szülőtől örökölt betűméret alapján.

Tegyük fel, hogy van egy szülő div, amelynek betűmérete 16 képpont. Ha létrehoz egy bekezdéselemet abban a divben, és 1 em betűméretet ad neki, a bekezdés betűmérete 16 képpont lesz.

Ha azonban egy másik bekezdést ad meg a 2em betűmérettel, az 32 képpontot jelent. Tekintsük az alábbi példát:

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

Kimenet

webtartalom em css mértékegységben méretezett

Megtekintheti, hogyan tudják felnagyítani a szöveg méretét, és hogyan befolyásolja azt a szülőtárolótól örökölt aktuális betűméret. Nem tanácsos ezeket használni, különösen összetett szerkezetű oldalakon.

Ha nem megfelelően használja, léptékezési problémákba ütközhet, ahol az elemek mérete nem megfelelő a DOM-fában lévő méretek összetett öröklődése alapján.

hogyan lehet mentési adatokat átvinni a ps3 -ról a ps3 -ra

3. Rem (Root Em)

A Rem majdnem ugyanúgy működik, mint az em, de a fő különbség az, hogy a rem csak az oldal gyökérelemének betűméretére hivatkozik, nem pedig a szülő betűméretére. A gyökér betűméret a felhasználó által a böngésző beállításaiban vagy Ön, a fejlesztő által megadott alapértelmezett betűméret.

A webböngésző alapértelmezett betűmérete általában 16 képpont, ezért az 1 rem 16 képpont, a 2 rem pedig 32 képpont. Abban az esetben azonban, ha a gyökér betűméretet például 10 képpontra módosítják; 1 rem 10 képpont, 2 rem 20 képpont lesz.

Íme egy példa, hogy világosabb legyen a dolog:

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

Kimenet

webtartalom rem css mértékegységben méretezett

Amint láthatja, a REM egységekkel definiált bekezdéseket teljesen nem zavarja a tárolónkban megadott betűméret, és szigorúan a a HTML elemválasztóban meghatározott gyökér betűméret.

Px vs. Em vs. Rem: melyik egység a legjobb?

Az Em használata nem ajánlott, mivel a beágyazott elemek összetett hierarchiája lehetséges. A REM általában megfelelően méreteződik a böngésző beállításaiban megadott új alapértelmezett/alap betűmérettel, szemben a PX-szel. Ez megmagyarázza, miért érdemes REM-et használni, amikor szöveges tartalommal dolgozik weboldalain. A REM megnyeri a versenyt. A REM segítségével a tartalom jobb formázása és méretezése színesebbé teszi webhelyét, mivel ideális a webhelyek készítői számára. A tartalom pontos mérése határozza meg webhelye megjelenését és hangulatát, azonban kreatívnak kell lennie.