CSS-yksikön opas: CSS em, rem, vh, vw, and more, Explained

Yksiköt

Monet CSS-ominaisuuksia like width, margin, padding, font-sizejne ota pituus. CSS: llä on tapa ilmaista pituus useina yksikköinä. Pituus on numeron ja yksikön yhdistelmä ilman välilyöntiä. Esim 5px. 0.9emJne.

Pituus

Yhteiset pituusyksiköt

CSS käyttää useita yksiköitä pituuden ilmaisemiseen. Vanhemmat, joita kaikki selaimet tukevat, ovat:

  • rem - "r" tarkoittaa "root": "root em" -, joka on yhtä suuri kuin juurielementtiin kiinnitetty kirjasinkoko (melkein aina).
  • vh ja vw - Monet reagoivat web-suunnittelutekniikat luottavat suuresti prosenttisääntöihin. CSS-prosenttilukemat eivät kuitenkaan aina ole paras ratkaisu kaikkiin ongelmiin. Mitta vh on yhtä suuri kuin 1/100 näkymän korkeudesta. Joten esimerkiksi, jos selaimen korkeus on 800 kuvapistettä, 1vh on yhtä suuri kuin 8 kuvapistettä ja vastaavasti, jos näkymän leveys on 650 kuvapistettä, 1vw vastaa 6,5 ​​kuvapistettä.
  • vmin ja vmax - Nämä yksiköt liittyvät vh: n ja vw: n enimmäis- tai vähimmäisarvoon. Esimerkiksi, jos selaimen asetukseksi on asetettu 1200 kuvapistettä leveys ja korkeus 600 kuvapistettä, 1vmin olisi 6px ja 1vmax 12px. Jos kuitenkin leveydeksi asetettiin 700 kuvapistettä ja korkeudeksi 1080 kuvapistettä, vmin olisi yhtä suuri kuin 7 kuvapistettä ja vmax 10,8 kuvapistettä.
  • ex ja ch - Nämä yksiköt, jotka ovat samanlaisia ​​kuin em ja rem , perustuvat nykyiseen kirjasimeen ja kirjasinkokoon. Toisin kuin em ja rem , myös nämä yksiköt luottavat,font-familykoska ne määritetään kullekin kirjasimelle ominaisten toimenpiteiden perusteella. Ch yksikkö ( ”merkki yksikkö”) on määritelty leveys merkki nolla ( ”0”). Ex yksikkö määritellään ”ovat nykyisten x-korkeus fontin tai puoli on 1em”. Tietyn kirjasimen korkeus-x on kyseisen fontin pienten ”x” -korkeuksien korkeus. Se on usein kirjasimen keskimerkki.

CSS: ssä on kahta yleistä pituus- ja kokoyksikköä: suhteellinen ja absoluuttinen.

Suhteelliset yksiköt

Suhteelliset yksiköt muuttuvat suhteessa elementin nykyiseen kirjasinkokoon tai muihin asetuksiin. Jotkut suhteelliset yksiköt ovat

em

  • font-sizenykyisen elementin ison kirjaimen M leveys .
  • Kirjasinkoot peritään pääelementeistä.

Esimerkki:

div { font-size: 16px; } div h3 { font-size: 2rem; }

Tässä

on sama 32px, koska font-sizenykyisen tai vanhempi elementti on 16px.

rem

  • juuri em, tai oletuskannan ison kirjaimen M leveys font-size.
  • Vanhempien kirjasinkokoilla ei ole vaikutusta.

Esimerkki:

body { font-size: 16px; } p { font-size: 1.5rem; }

Tässä

on yhtä suuri 24pxkuin oletuskanta font-sizeon 16px.

%

  • prosenttiosuus suhteessa vanhempien kokoon.

Esimerkki:

div { width: 400px; } div p { width: 75%; }

Koska vanhemman leveys on 400px, sisäisen kuvaajan leveys olisi 300pxtai 75% 400px.

vw

  • näkymän leveys tai 1/100-osa näkymän leveydestä

Esimerkki:

body { width: 100vw; }

bodyTäyttää leveys näkymän, onko tämä 417px, 690px, tai mikä tahansa leveys.

vh

  • näkymän korkeus tai 1/100 katseluikkunan korkeudesta

Esimerkki:

div { height: 50vh; }

Tämä divtäyttää puolet näkymän korkeudesta, olipa se sitten 1080px, 1300px tai mikä tahansa korkeus.

Absoluuttiset yksiköt

Absoluuttiset yksiköt ovat samat riippumatta näytön koosta tai muista asetuksista. Jotkut absoluuttiset yksiköt ovat

px

  • pikseli
  • pikselimäärät ovat suhteessa katselulaitteen näytön laatuun

in, cm,mm

  • tuuma, senttimetri, millimetri
  • Tuuma on tuuma pienellä tai suurella näytöllä

pt, pc

  • pistettä (1/72 tuumaa) ja picaa (12 pistettä)

Esimerkki

p { font-size: 24px; } div { width: 3in; border-width: 3pt; }

Kappaleen kanssa font-size: 24pxnäkyy 24 kuvapistettä puhelimen, tabletin tai työpöydän näytöllä.

divNäkyy kuin 3 tuumaa leveä, ja borderon divon 3/72 tuumaa paksu, riippumatta näytön koko.