Home-theater-designers
Aiot oppia muutamia CSS-yksiköitä tekstin kirjasinkoon mukauttamiseen verkkosivuja luotaessa. Yksiköitä on monia, kuten pt, pc, ex jne., mutta useimmissa tapauksissa sinun tulee keskittyä kolmeen suosituimpiin yksikköihin: 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ä.
PÄIVÄN VIDEON TEKEMINEN
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.
| Yksikkö | Kuvaus |
|---|---|
| cm | senttimetriä |
| mm | millimetriä |
| sisään | tuumaa (1 tuuma = 96 pikseliä = 2,54 cm) |
| px * | pikseliä (1px = 1/96/1 tuumaa) |
| pt | pistettä (1 pt = 1/72/1 tuumaa) |
| pc | pata (1 kpl = 12 pt) |
Suhteelliset pituudet
Suhteelliset pituusyksiköt määrittävät pituuden suhteessa toiseen pituusominaisuuteen. Suhteelliset pituusyksiköt skaalautuvat paremmin eri renderöintivälineiden välillä.
| Yksikkö | Suhteessa johonkin | |
|---|---|---|
| sisään* | Suhteessa elementin fontin kokoon (2em tarkoittaa 2 kertaa nykyisen fontin kokoa) | |
| esim | Suhteessa nykyisen fontin x-korkeuteen (harvoin käytetty) | |
| ch | Suhteessa '0' (nolla) leveyteen | |
| rem* | Suhteessa juurielementin kirjasinkokoon | |
| vw | Suhteessa 1 %:iin katseluportin leveydestä* | |
| vh | Suhteessa 1 %:iin katseluportin korkeudesta* | |
| min | Suhteessa 1 %:iin näkymän* pienemmästä mittasuhteesta | |
| vmax | Suhteessa 1 %:iin näkymän* suuremmasta mittasuhteesta | |
| % | Suhteessa pääelementtiin |
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ä.
kuinka tehdä tekstin ääriviivat Photoshopissa
Tällöin laitteen pikselisuhde tulee esiin. 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="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;
}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. Minä (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 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;
}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.
hienoja asioita terminaalissa
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 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;
}
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.