U CSS-u, koja je razlika između em i px?


Odgovor 1:

Na kraju, sve su to pikseli

Konačno, web preglednik poručuje operativnom sustavu da kaže upravljačkom programu za prikaz da nešto stavi na ekran u pikselima.

Ali, taj "piksel" je fizički piksel. To je ono što bismo mogli nazvati "piksel uređaja".

Ne govorite o "pikselima uređaja". Govorite o CSS Pixels.

CSS piksela! == piksela

"CSS pixel" otprilike je svojevrsno približan pikselu uređaja. [1] CSS Pixel oslanja se na tu ideju o "referentnom pikselu", to je vizualni kut na uređaju s gustoćom piksela od 96 dpi, otprilike na udaljenosti ruke. biti 1,3 mm na ekranu. Ali, postoji niz razloga zbog kojih to možda nije slučaj.

Važno je započeti s osnovnom točkom koja px ne znači, "piksel na zaslonu".

U CSS-u postoje različite mjerne jedinice

Postoje dvije glavne kategorije vaših mjernih jedinica [3]:

  1. apsolutne jedinice relativne jedinice

ako je to "apsolutna jedinica", tada ta mjerna jedinica ima odnos prema nečemu u fizičkom svijetu.

Ako je to relativna jedinica, vrijednost se izračunava u apsolutnoj jedinici.

Znači px vs em

px je "apsolutna jedinica"; CSS motor će reći pregledniku da tu dužinu koristi za određivanje veličine. Preglednik i OS će razvrstati kako se ta duljina uspoređuje s "pikselom uređaja" i prikazati je. Px ima statički odnos prema onom "referentnom pikselu" o kojem smo razgovarali ranije. px to se neće promijeniti.

em je "relativna jedinica". CSS motor prvo će izračunati tu vrijednost u duljini piksela. Nakon što izračuna dužinu piksela, on će izračunatu vrijednost poslati na preglednik. em, posebno se izračunava na osnovu relativne veličine slova koji sadrži element. Vrijednost em se može mijenjati; ako promijenite veličinu fonta bilo kojeg roditeljskog elementa, to će utjecati na vrijednost em.

Najbolji način da se zamisli em je pretvarati se da ih bit nije, i tretirati vrijednost kao množitelj. npr:

.foo {font-size: 1.5em; / * zbunjujuće * / veličina fonta: 1,5; / * Nije valjano, ali u potpunosti je trebalo to učiniti umjesto da ga nazovemo em * / line-height: 1,5; / * pogledajte kako visina crte prihvaća multiplikator bez jedinice? * /}

Dakle, prva velika razlika je da je jedna apsolutna, druga relativna.

px i em u primjeni

Različite situacije će istaknuti prednosti i slabosti svake jedinice [4].

Budući da je px apsolutna mjerna jedinica, imate veliku predvidljivost za ono što se prikazuje na zaslonu. Ali nemate proporcionalnost; svojstva veličine px ne preračunavaju ako prilagodite veličinu fonta u roditelju.

Znači, nailazite na ovo puno:

tijelo {font-size: 16px;} h1 {font-size: 32px; / * apsolutne jedinice za veličinu fonta * / padding: 8px 16px; / * apsolutne jedinice za oblaganje * /} .foo {font-size: 12px; / * prilagodite veličinu fonta u roditelju * /} / * napišite novu skup pravila kako bi stvari bile proporcionalne * / .foo h1 {font-size: 24px; / * prepisivanje pravila fonta da bi h1 2x bio normalan * / padding: 6px 12px; / * prepisivanje za 1/4 i 1/2 * /}

Budući da je em relativna jedinica koja se temelji na naslijeđenoj veličini fonta, mogli biste imati nisku predvidljivost za ono što se prikazuje na zaslonu - posebno u velikim timovima. Ali imat ćete visoku proporcionalnost; svojstva veličine em će se preračunati ako prilagodite veličinu fonta u roditelju.

tijelo {font-size: 16px;} h1 {font-size: 2em; / * relativna jedinica * / padding: .25em .5em; / * relativne jedinice za oblaganje * /} .foo {font-size: .75em; }

Tako ste spremili pisanje cijelog skupa pravila pomoću em. Veličina fonta izračunata je na 24 px, a padding izračunava se na 6px 12px.

Dakle, velika razlika je mogućnost proporcionalne veličine stvari - bez pisanja više koda!

fusnote

[1] Sintaksa i osnovne vrste podataka

[2] CSS modul vrijednosti i jedinice razina 3

[3] Kako se "em" "px" i "%" međusobno razlikuju u CSS-u?

[4] Odgovarajuće web stranice odnose se na to kako mjerite (u svom CSS-u)


Odgovor 2:

px je piksela. Možda se malo razlikuje u različitim preglednicima, ali vjerojatno je dosljedan u istom okruženju i na web mjestu na određenom pregledniku / uređaju. px ima smisla za stvari poput širine crte i granice.

em je jednaka veličini fonta trenutnog elementa (koji se uglavnom nasljeđuje). Dakle, kako se mijenja veličina fonta, mijenja se i vrijednost em. Ovo je praktično kad želite razmaknuti nešto u odnosu na trenutnu veličinu teksta. Također je korisna jer je u odnosu na ostale sadržaje, tako da je vjerojatnije da će raditi preko ekrana. em je posebno korisno postavljanje razmaka, margina i podmetanja oko teksta.

rem je korijen em. To je baš poput em, ali umjesto da je u odnosu na trenutnu veličinu fonta, u odnosu na izvornu veličinu fonta dokumenta. To znači da će opaska ostati dosljedna na cijeloj stranici, bez obzira na trenutni font. U mnogim je situacijama s Remom lakše raditi jer je predvidljiviji. Posebno ima smisla za margine koje trebaju ostati dosljedne u dokumentu, čak i kad se lokalne veličine slova mijenjaju između elemenata.

Em i Rem su općenito lakše održavati na stranici, a trenutno je opći konsenzus upotreba em i rem, a ne px. Opći konsenzus nije uvijek u pravu, ali to je dobar put ako nemate dobar razlog za nešto drugo.


Odgovor 3:

px je piksela. Možda se malo razlikuje u različitim preglednicima, ali vjerojatno je dosljedan u istom okruženju i na web mjestu na određenom pregledniku / uređaju. px ima smisla za stvari poput širine crte i granice.

em je jednaka veličini fonta trenutnog elementa (koji se uglavnom nasljeđuje). Dakle, kako se mijenja veličina fonta, mijenja se i vrijednost em. Ovo je praktično kad želite razmaknuti nešto u odnosu na trenutnu veličinu teksta. Također je korisna jer je u odnosu na ostale sadržaje, tako da je vjerojatnije da će raditi preko ekrana. em je posebno korisno postavljanje razmaka, margina i podmetanja oko teksta.

rem je korijen em. To je baš poput em, ali umjesto da je u odnosu na trenutnu veličinu fonta, u odnosu na izvornu veličinu fonta dokumenta. To znači da će opaska ostati dosljedna na cijeloj stranici, bez obzira na trenutni font. U mnogim je situacijama s Remom lakše raditi jer je predvidljiviji. Posebno ima smisla za margine koje trebaju ostati dosljedne u dokumentu, čak i kad se lokalne veličine slova mijenjaju između elemenata.

Em i Rem su općenito lakše održavati na stranici, a trenutno je opći konsenzus upotreba em i rem, a ne px. Opći konsenzus nije uvijek u pravu, ali to je dobar put ako nemate dobar razlog za nešto drugo.