Px vs. Em vs. Rem: Mitä CSS-yksikköä sinun tulisi käyttää?

Aiot oppia muutamia CSS-yksiköitä tekstin kirjasinkoon mukauttamiseen verkkosivuja luotaessa. Yksiköitä on monia, kuten pt, pc, ex jne., mutta useimmissa tapauksissa kannattaa keskittyä kolmeen suosituimpiin yksikköön: px, em ja rem. Monet kehittäjät eivät yleensä ymmärrä, mitä eroja näiden yksiköiden välillä on; joten alla on yksityiskohtainen selitys näistä yksiköistä.

Ennen kuin jatkat, huomaa, että yksikköpituuksia on kahdenlaisia: ehdoton ja suhteellinen.

Absoluuttiset pituudet

Absoluuttiset pituusyksiköt ovat kiinteitä, ja millä tahansa näistä ilmaistu pituus näkyy täsmälleen saman kokoisena.

Absoluuttisen pituuden yksiköitä ei suositella käytettäväksi näytöllä, koska näytön koot vaihtelevat niin paljon. Niitä voidaan kuitenkin käyttää, jos tulostusväline on tiedossa, esimerkiksi painetussa asettelmassa.

Suhteelliset pituudet

Suhteelliset pituusyksiköt määrittävät pituuden suhteessa toiseen pituusominaisuuteen. Suhteelliset pituusyksiköt skaalautuvat paremmin eri renderöintivälineiden välillä.

1. Px (pikseli)

Pixel on luultavasti eniten käytetty yksikkö CSS: ssä, ja se on erittäin suosittu verkkosivujen tekstin fonttikoon asettamisessa. Yksi pikseli (1px) määritellään 1/96 tuumaa tulostusmateriaalissa.

Tietokoneen näytöillä ne eivät kuitenkaan yleensä liity todellisiin mittoihin, kuten senttimetreihin ja tuumiin, kuten luulisi; ne on vain määritelty pieniksi mutta näkyviksi. Se, mitä pidetään näkyvänä, riippuu laitteesta.

Eri laitteiden näytöillä on eri määrä pikseleitä tuumaa kohti, mikä tunnetaan pikselitiheydellä. Jos käyttäisit laitteen näytön fyysisten pikselien määrää määrittääksesi laitteen sisällön koon, sinulla olisi ongelma saada asiat näyttämään samalta kaikenkokoisilla näytöillä.

Tässä tulee esiin laitteen pikselisuhde. Se on pohjimmiltaan vain tapa laskea, kuinka paljon tilaa CSS-pikseli (1px) vie laitteen näytöltä, jotta se näyttää samankokoiselta toiseen laitteeseen verrattuna.

Alla on esimerkki: -

<div class="kontti">
<div>
<h1>Tämä on kappale</h1>
<s>
 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 oletus differentio aliquid debitis, autem
 vel ullam aut, quod corporis ratione atque ducimus dolorum.
</s>
</div>
</div>

.container {
 leveys: 100 %;
 korkeus: 100vh;
 näyttö: flex;
 perustella-sisältö: keskus;
 kohdista kohteet: keskellä;
}
.containerdiv {
 suurin leveys: 500 pikseliä;
 täyte: 5px 20px;
 reuna: 1px harmaa kiinteä;
 reunan säde: 10px;
}
p {
 fontin koko: 16px;
}

ulostulo

Ylälaatikko näyttää siltä, ​​miltä se näyttää suuremmalla näytöllä, kuten kannettavalla tietokoneella, ja alalaatikko on miltä se näyttää kun se näytetään pienemmällä näytöllä, kuten puhelimessa.

Huomaa, kuinka teksti molemmissa laatikoissa on samankokoinen. Näin pikseli periaatteessa toimii. Se auttaa verkkosisältöä (ei vain tekstiä) näyttämään samankokoiselta kaikissa laitteissa.

2. Em (M)

Em-yksikkö on saanut nimensä isosta M-kirjaimesta (em), koska useimmat CSS-yksiköt ovat peräisin typografiasta. Se käyttää perustanaan pääelementin nykyistä fonttikokoa. Sillä voidaan suurentaa tai pienentää elementin kirjasinkokoa ylätason fontin koon perusteella.

Oletetaan, että sinulla on ylätason div, jonka fonttikoko on 16 kuvapistettä. Jos luot kappaleelementin kyseiseen diviin ja annat sille kirjasinkooksi 1em, kappaleen fonttikoko on 16 kuvapistettä.

Jos kuitenkin annat toiselle kappaleelle fonttikoon 2em, se muuttuu 32 kuvapisteeksi. Harkitse alla olevaa esimerkkiä:

<div class="div-one">
<p luokka ="yksi-em">1 em 10px perusteella</s>
<p luokka ="kaksi-em">2 em 10px perusteella</s>
</div>
<div class="div-kaksi">
<p luokka ="yksi-em">1 em 10px perusteella</s>
<p luokka ="kaksi-em">2 em 10px perusteella</s>
</div>
</div>

.div-one {
 fontin koko: 15px;
}
.div-kaksi {
 fontin koko: 20px;
}
.one-em {
 fontin koko: 1em;
}
.kaksi-em {
 fontin koko: 2em;
}

ulostulo

Voit nähdä, kuinka ne voivat skaalata tekstin kokoa ja miten pääsäiliöstä peritty nykyinen fonttikoko vaikuttaa siihen. Ei ole suositeltavaa käyttää niitä etenkään monimutkaisilla jäsennellyillä sivuilla.

Jos niitä ei käytetä oikein, saatat kohdata skaalausongelmia, joissa elementtejä ei ehkä ole mitoitettu oikein DOM-puun monimutkaisen kokoperinnön vuoksi.

3. Rem (Root Em)

Rem toimii lähes samalla tavalla kuin em, mutta suurin ero on, että rem viittaa vain sivun juurielementin fonttikokoon emoelementin fonttikoon sijaan. Juurifontin koko on oletusfontin koko, jonka joko käyttäjä määrittää selaimen asetuksissa tai sinä, kehittäjä.

Web-selaimen oletusfonttikoko on yleensä 16 kuvapistettä, joten 1 rem on 16 kuvapistettä ja 2 rem 32 kuvapistettä. Kuitenkin, jos juurifontin koko muutetaan esimerkiksi 10px: ksi; 1 rem on 10 pikseliä ja 2 rem on 20 kuvapistettä.

Tässä on esimerkki asioiden selventämiseksi:

<div class="div-one">
<!-- EM-->
<p luokka ="yksi-em">1 em säilön perusteella (40px)</s>
<p luokka ="kaksi-em">2 em säilön perusteella (40px)</s>
<!-- REM-->
<p luokka ="yksi-rem">1 rem perustuu juuriin (16px)</s>
<p luokka ="kaksirem">2 rem perustuu juuriin (16px)</s>
</div>

.div-one {
 fonttikoko: 40px;
}
.one-em {
 fontin koko: 1em;
}
.kaksi-em {
 fontin koko: 2em;
}
.one-rem {
 fontin koko: 1 rem;
}
.kaksi-rem {
 fontin koko: 2rem;
}

ulostulo

Kuten näet, säilössämme ilmoitettu kirjasinkoko ei häiritse REM-yksiköillä määritettyjä kappaleita, ja ne hahmonnetaan tiukasti suhteessa HTML-elementtivalitsimessa määritetty juurifontin koko.

Px vs. Em vs. Rem: Mikä yksikkö on paras?

Em ei suositella, koska sisäkkäisten elementtien hierarkia voi olla monimutkainen. REM skaalataan yleensä sopivasti uudella oletus-/peruskirjasinkoolla, joka on määritetty selaimen asetuksissa, toisin kuin PX. Tämä selittää, miksi sinun pitäisi käyttää REM: ää, kun työskentelet tekstisisällön kanssa verkkosivuillasi. REM voittaa kilpailun. Sisällön parempi muotoilu ja skaalaaminen REM: n avulla lisäävät sivustosi tyylikkyyttä, koska se on ihanteellinen verkkosivustojen luojille. Sisällön tarkat mittaukset määräävät verkkosivustosi ulkoasun ja tuntuman, mutta sinun on kuitenkin oltava luova.