Px vs. Em vs. Rem: Katero enoto CSS bi morali uporabiti?

Naučili se boste nekaj enot CSS za prilagajanje velikosti pisave besedila pri izdelavi spletnih strani. Obstaja veliko enot, kot so pt, pc, ex itd., vendar se v večini primerov osredotočite na tri najbolj priljubljene enote: px, em in rem. Mnogi razvijalci običajno ne razumejo, kakšne so razlike med temi enotami; zato je spodaj podrobna razlaga teh enot.

Preden nadaljujete, upoštevajte, da obstajata dve vrsti dolžin enot: absolutno in relativno.

Absolutne dolžine

Enote absolutne dolžine so fiksne in dolžina, izražena v kateri koli od teh, bo prikazana kot točno ta velikost.

Enote absolutne dolžine niso priporočljive za uporabo na zaslonu, ker se velikosti zaslona zelo razlikujejo. Vendar jih je mogoče uporabiti, če je izhodni medij znan, na primer za natisnjeno postavitev.

Relativne dolžine

Enote relativne dolžine določajo dolžino glede na drugo lastnost dolžine. Enote relativne dolžine se bolje prilagajajo med različnimi upodabljajočimi mediji.

1. Px (piksel)

Pixel je verjetno najpogosteje uporabljena enota v CSS in je zelo priljubljen, ko gre za nastavitev velikosti pisave besedila na spletnih straneh. En piksel (1 slikovna pika) je v tiskanih medijih definiran kot 1/96 palca.

Na računalniških zaslonih pa običajno niso povezani z dejanskimi merami, kot so centimetri in palci, kot si morda mislite; definirani so kot majhni, a vidni. Kaj je vidno, je odvisno od naprave.

Različne naprave imajo različno število slikovnih pik na palec na svojih zaslonih, kar je znano kot gostota slikovnih pik. Če bi uporabili število fizičnih slikovnih pik na zaslonu naprave za določanje velikosti vsebine v tej napravi, bi imeli težave, da bi stvari izgledale enako na zaslonih vseh velikosti.

Tu nastopi razmerje slikovnih pik naprave. To je v bistvu le način za izračun, koliko prostora bo piksel CSS (1 slikovna pika) zavzel na zaslonu naprave, kar bo omogočilo, da bo videti enake velikosti v primerjavi z drugo napravo.

Spodaj je primer: -

<razred div="posoda">
<div>
<h1>To je odstavek</h1>
<str>
 Lorem ipsum, dolor sit amet consectetur adipisicing elit.
 Reprehenderit incidunt perferendis iure veritatis cupiditate delectus
 omnis pri! 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 acceptenda distinctio aliquid debitis, autem
 vel ullam aut, quod corporis ratione atque ducimus dolorum.
</str>
</div>
</div>

.posoda {
 širina: 100 %;
 višina: 100vh;
 zaslon: flex;
 justify-content: center;
 align-items: center;
}
.posodadiv {
 največja širina: 500 slikovnih pik;
 oblazinjenje: 5px 20px;
 obroba: 1px siva polna;
 polmer roba: 10px;
}
p {
 velikost pisave: 16px;
}

izhod

Zgornje polje je videti, ko je prikazano na večjem zaslonu, kot je prenosni računalnik, spodnje polje pa, kako je videti ko je prikazan na manjšem zaslonu, kot je telefon.

Opazite, da je besedilo v obeh poljih enake velikosti. To je v bistvu, kako deluje piksel. Pomaga, da je spletna vsebina (ne le besedilo) videti enake velikosti v različnih napravah.

2. Em (M)

Enota em je dobila ime po veliki črki 'M' (em), saj večina enot CSS izvira iz tipografije. Kot osnovo uporablja trenutno velikost pisave nadrejenega elementa. Uporablja se lahko za povečanje ali zmanjšanje velikosti pisave elementa glede na velikost pisave, podedovano od starša.

Recimo, da imate nadrejeni element div z velikostjo pisave 16 slikovnih pik. Če ustvarite element odstavka v tem divu in mu dodelite velikost pisave 1em, bo velikost pisave odstavka 16 slikovnih pik.

Vendar, če drugemu odstavku dodelite velikost pisave 2em, bo to pomenilo 32 slikovnih pik. Razmislite o spodnjem primeru:

<razred div="div-ena">
<p razred="one-em">1 em na podlagi 10 slikovnih pik</str>
<p razred="dva-em">2 em na podlagi 10 slikovnih pik</str>
</div>
<razred div="div-dva">
<p razred="one-em">1 em na podlagi 10 slikovnih pik</str>
<p razred="dva-em">2 em na podlagi 10 slikovnih pik</str>
</div>
</div>

.div-ena {
 velikost pisave: 15px;
}
.div-dva {
 velikost pisave: 20px;
}
.one-em {
 velikost pisave: 1em;
}
.dva-em {
 velikost pisave: 2em;
}

izhod

Vidite lahko, kako lahko em poveča velikost besedila in kako na to vpliva trenutna velikost pisave, podedovana iz nadrejenega vsebnika. Ni priporočljivo uporabljati em, zlasti na straneh s kompleksno strukturo.

Če se ne uporablja pravilno, lahko naletite na težave s skaliranjem, kjer elementi morda niso pravilno odmerjeni glede na zapleteno dedovanje velikosti v drevesu DOM.

3. Rem (Root Em)

Rem deluje skoraj enako kot em, vendar je glavna razlika ta, da se rem sklicuje samo na velikost pisave korenskega elementa na strani in ne na nadrejeno velikost pisave. Korenska velikost pisave je privzeta velikost pisave, ki jo določi uporabnik v nastavitvah brskalnika ali vi, razvijalec.

Privzeta velikost pisave spletnega brskalnika je običajno 16px, zato bo 1rem 16px in 2rem 32px. Vendar pa v primeru, ko je korenska velikost pisave na primer spremenjena na 10 slikovnih pik; 1rem bo 10px, 2rem pa 20px.

Tukaj je primer, da bodo stvari jasnejše:

<razred div="div-ena">
<!-- EM -->
<p razred="one-em">1 em na podlagi vsebnika (40 slikovnih pik)</str>
<p razred="dva-em">2 em na podlagi vsebnika (40 slikovnih pik)</str>
<!-- REM -->
<p razred="eno-rem">1 rem na podlagi korena (16 slikovnih pik)</str>
<p razred="dvo-rem">2 rem temelji na korenu (16 slikovnih pik)</str>
</div>

.div-ena {
 velikost pisave: 40px;
}
.one-em {
 velikost pisave: 1em;
}
.dva-em {
 velikost pisave: 2em;
}
.en-rem {
 velikost pisave: 1 rem;
}
.dvo-rem {
 velikost pisave: 2rem;
}

izhod

Kot lahko vidite, odstavke, definirane z enotami REM, popolnoma ne moti velikost pisave, navedena v našem vsebniku, in so strogo upodobljeni glede na velikost korenske pisave, določena v izbirniku elementov HTML.

Px vs. Em vs. Rem: katera enota je najboljša?

Em ni priporočljivo zaradi možnosti kompleksne hierarhije ugnezdenih elementov. REM se običajno ustrezno prilagodi z novo privzeto/osnovno velikostjo pisave, določeno v nastavitvah brskalnika, v nasprotju s PX. To pojasnjuje, zakaj bi morali pri delu z besedilno vsebino na svojih spletnih straneh uporabljati REM. REM zmaga na dirki. Boljše oblikovanje in prilagajanje vaše vsebine z REM vašemu spletnemu mestu doda pridih, saj je idealen za ustvarjalce spletnih mest. Sprotne meritve vaše vsebine bodo narekovale videz in občutek vašega spletnega mesta, vendar boste morali biti ustvarjalni.