A CSS-ben mi a különbség az em és a px között?


Válasz 1:

A végén mind pixelek

Végül a webböngésző azt mondja az operációs rendszernek, hogy mondja meg a képernyőmeghajtónak, hogy pixelekkel tegyen valamit a képernyőre.

De ez a „pixel” fizikai pixel. Ezt hívhatjuk „eszköz pixelnek”.

Nem az „eszköz pixelekről” beszél. A CSS Pixelekről beszél.

CSS pixel! == pixel

A „CSS Pixel” nagyjából hasonlít az eszköz pixeléhez. [1] A CSS Pixel erre a „referencia pixel” gondolatra támaszkodik, amely a látószöget jelent egy olyan eszköznél, amelynek pixelsűrűsége 96 dpi körül van, körülbelül egy kar távolságra. [2] A matematikai erő révén a „referencia pixel” végül 1,3 mm-es a képernyőn. De számos oka van, amelyek nem feltétlenül teljesülnek.

Fontos, hogy azzal az alapvető ponttal kezdjük, amely nem jelenti a pixel-et a képernyőn.

A CSS-ben különböző mértékegységek vannak

A mértékegységeinek két fő kategóriája van [3]:

  1. abszolút egységek relatív egységek

ha ez egy „abszolút egység”, akkor a mértékegység kapcsolatban áll a fizikai világ valamivel.

Ha ez relatív egység, akkor az értéket abszolút egységre kell kiszámítani.

Tehát px vs em

px egy „abszolút egység”; a CSS motor meg fogja mondani a böngészőnek, hogy ezt a „hosszúságot” használja a méretezéshez. A böngésző és az operációs rendszer kiszámítja, hogy ez a hosszúság hogyan viszonyul egy „eszköz pixelhez”, és hogyan renderelné azt. A Px statikus kapcsolatban áll azzal a „referencia képponttal”, amelyről korábban beszéltünk. px nem fog változni.

az em „relatív egység”. A CSS motor először kiszámítja ezt az értéket pixelhosszra. Miután kiszámította a pixel hosszát, elküldi ezt a kiszámított értéket a böngészőnek. Az em-et különösen a tartalmú elem relatív betűmérete alapján számítják ki. Az em értéke változhat; Ha megváltoztatja bármelyik szülő elem betűméretét, ez befolyásolja az em értékét.

A legjobb módszer az em-re való gondolkodáshoz, ha úgy tesznek, mintha az em-bit nincs ott, és az értéket szorzóként kezelik. például:

.foo {betűméret: 1.5em; / * zavaró * / betűméret: 1,5; / * Nem érvényes, de teljesen el kellett volna csinálni em * * / vonalmagasság: 1,5; / * megnézheti, hogy a sormagasság hogyan fogadja el az egység nélküli szorzót? * /}

Tehát az első nagy különbség az, hogy az egyik abszolút, a másik viszonylagos.

px és em alkalmazásban

A különböző helyzetek kiemelik az egyes egységek erősségeit és gyengeségeit [4].

Mivel a px abszolút mértékegység, nagy a kiszámíthatósága annak, amit a képernyőn lát. De nincs arányossága; a képpontban megadott tulajdonságok nem számítják újra, ha a szülőben beállítják a betűméretet.

Tehát sokat belefutsz ehhez:

törzs {betűméret: 16 képpont;} h1 {betűméret: 32 képpont; / * abszolút egységek betűmérethez * / padding: 8px 16px; / * abszolút egységek a párnázáshoz * /} .foo {betűméret: 12px; / * állítsa be a betűméretet a szülőben * /} / * írjon új szabálykészletet a dolgok arányosságának megőrzése érdekében * / .foo h1 {betűméret: 24 képpont; / * betűkészlet-szabály átírása, hogy a h1 2x normál legyen * / padding: 6px 12px; / * átírás 1/4-re és 1/2-re * /}

Mivel az em egy relatív egység az örökölt betűméret alapján, alacsony a kiszámíthatósága annak, amit el akar látni a képernyőn - különösen nagy csoportokban. De nagy arányosságot fog elérni; Az em méretű tulajdonságok újraszámolódnak, ha a szülőben beállítják a betűméretet.

test {betűméret: 16px;} h1 {betűméret: 2em; / * relatív egység * / padding: .25em .5em; / * a párnázás relatív egységei * /} .foo {betűméret: .75em; }

Tehát mentette a teljes szabálykészlet írását az em használatával. A betűméret kiszámítva 24 képpontra, a párnázat kiszámítása pedig 6 képpont 12 képpontra.

Tehát a nagy különbség az a képesség, hogy a dolgok arányosak legyenek - több kód írása nélkül!

Lábjegyzetek

[1] Szintaxis és alaptípusok

[2] CSS-értékek és -egységek, 3. szint

[3] Hogyan különböznek az "em", "px" és "%" egymástól a CSS-ben?

[4] Az érzékeny webhelyek arról szólnak, hogy miként mérik (a CSS-ben)


Válasz 2:

px pixel. Lehet, hogy kissé különbözik a különböző böngészőkben, de valószínű, hogy konzisztens ugyanazon környezetben és egy adott böngésző / eszköz webhelyén. A px értelme olyan dolgoknak, mint a vonal és a szélesség.

em megegyezik az aktuális elem betűméretével (ami általában öröklött). Tehát a betűméret megváltozásakor az em értéke is megváltozik. Ez akkor hasznos, ha el szeretne helyezni valamit a szöveg jelenlegi méretéhez viszonyítva. Ez azért is hasznos, mert más tartalomhoz viszonyítva, tehát valószínűbb, hogy képernyőkön dolgozik. Az em különösen hasznos a térköz, a margók és a szöveg körüli padolás beállítása.

rem a root em. Csakúgy, mint az em, hanem a jelenlegi betűmérethez viszonyítva inkább az eredeti dokumentum betűméretéhez viszonyítva. Ez azt jelenti, hogy a rem továbbra is konzisztens marad egy oldalon az aktuális betűkészlettől függetlenül. Sok esetben a rem-rel könnyebben lehet dolgozni, mert kiszámíthatóbb. Különösen akkor van értelme, ha a szegélyeknek konzisztensnek kell maradniuk egy dokumentumban, még akkor is, ha a helyi betűméret változik az elemek között.

Általában az em és rem emiatt könnyebben karbantartható egy oldalon, és az általános egyetértés jelenleg az em és rem használata, nem pedig a px. Az általános konszenzus nem mindig helyes, ám ez jó út, hacsak nincs jó oka valami más elvégzésére.


Válasz 3:

px pixel. Lehet, hogy kissé különbözik a különböző böngészőkben, de valószínű, hogy konzisztens ugyanazon környezetben és egy adott böngésző / eszköz webhelyén. A px értelme olyan dolgoknak, mint a vonal és a szélesség.

em megegyezik az aktuális elem betűméretével (ami általában öröklött). Tehát a betűméret megváltozásakor az em értéke is megváltozik. Ez akkor hasznos, ha el szeretne helyezni valamit a szöveg jelenlegi méretéhez viszonyítva. Ez azért is hasznos, mert más tartalomhoz viszonyítva, tehát valószínűbb, hogy képernyőkön dolgozik. Az em különösen hasznos a térköz, a margók és a szöveg körüli padolás beállítása.

rem a root em. Csakúgy, mint az em, hanem a jelenlegi betűmérethez viszonyítva inkább az eredeti dokumentum betűméretéhez viszonyítva. Ez azt jelenti, hogy a rem továbbra is konzisztens marad egy oldalon az aktuális betűkészlettől függetlenül. Sok esetben a rem-rel könnyebben lehet dolgozni, mert kiszámíthatóbb. Különösen akkor van értelme, ha a szegélyeknek konzisztensnek kell maradniuk egy dokumentumban, még akkor is, ha a helyi betűméret változik az elemek között.

Általában az em és rem emiatt könnyebben karbantartható egy oldalon, és az általános egyetértés jelenleg az em és rem használata, nem pedig a px. Az általános konszenzus nem mindig helyes, ám ez jó út, hacsak nincs jó oka valami más elvégzésére.