Vodič za CSS jedinice: CSS em, rem, vh, vw i još mnogo toga, objašnjeno

Programiranje

Jedinice

Mnogi CSS svojstva kao što su width, margin, padding, font-sizeitd uzeti dužine. CSS ima način da izrazi duljinu u više jedinica. Duljina je kombinacija broja i jedinice bez razmaka. Npr. 5px, 0.9emItd.

Duljina

Jedinice zajedničke duljine

CSS koristi nekoliko jedinica za izražavanje duljine. Stariji, koje podržavaju svi preglednici, su:

  • rem - "r" znači "root": "root em" -, što je jednako veličini fonta fiksiranoj na korijenski element (gotovo uvijek).
  • vh i vw - Mnoge tehnike responzivnog web dizajna oslanjaju se uvelike na postotna pravila. Međutim, CSS postotne mjere nisu uvijek najbolje rješenje za sve probleme. Mjera vh jednaka je 1/100 visine vidnog polja. Tako, na primjer, ako je visina preglednika 800px, 1vh je jednak 8px, i, slično, ako je širina okvira za prikaz 650px, 1vw je ekvivalentan 6,5px.
  • vmin i vmax - ove su jedinice povezane s maksimalnom ili minimalnom vrijednošću vh i vw . Na primjer, ako je preglednik postavljen na 1200px širine i visine 600px, 1vmin bi bio 6px, a 1vmax bi bio 12px. Međutim, ako je širina postavljena na 700px, a visina postavljena na 1080px, vmin bi bio jednak 7px, a vmax 10,8px.
  • ex i ch - Te se jedinice, slično em i rem , oslanjaju na trenutni font i veličinu fonta. Međutim, za razliku od em i rem , ove se jedinice također oslanjajufont-familyjer se određuju na temelju mjera specifičnih za svaki font. Jedinica ch ("jedinica znakova") definirana je kao širina nule znaka ("0"). Ex jedinica je definirana kao „trenutni x-visina tekuće fonta ili polovice 1em”. Visina-x datog fonta visina je malog "x" tog fonta. Često je srednja oznaka fonta.

Dvije su opće vrste jedinica koje se koriste za duljinu i veličinu u CSS-u: relativne i apsolutne.

Relativne jedinice

Relativne jedinice mijenjaju se u odnosu na trenutnu veličinu fonta elementa ili druge postavke. Neke su relativne jedinice

em

  • širina velikog slova M font-sizetrenutnog elementa.
  • Veličine fontova nasljeđuju se od nadređenih elemenata.

Primjer:

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

Ovdje

jednak će 32pxbudući da font-sizeje trenutni ili nadređeni element 16px.

rem

  • korijen emili širina velikog slova M zadane baze font-size.
  • Veličine nadređenih fontova neće imati učinka.

Primjer:

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

Ovdje

biti će jednaka 24pxjer je zadana baza font-sizeje 16px.

%

  • postotna veličina u odnosu na veličinu roditelja.

Primjer:

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

Budući da je širina roditelja jednaka 400px, širina unutarnjeg paragrafa bila bi 300pxili 75% od 400px.

vw

  • širina pogleda ili 1/100 širine vidnog polja

Primjer:

body { width: 100vw; }

bodyPunjenja širina prikaza, bilo da je 417px, 690px, ili bilo širine.

vh

  • visina pogleda ili 1/100 od visine vidnog polja

Primjer:

div { height: 50vh; }

Ovo divće ispuniti polovicu visine okvira za prikaz, bilo da je to 1080px, 1300px ili bilo koja visina.

Apsolutne jedinice

Apsolutne jedinice bit će iste bez obzira na veličinu zaslona ili druge postavke. Neke apsolutne jedinice su

px

  • piksel
  • broj piksela odnosi se na kvalitetu zaslona uređaja za gledanje

in, cm,mm

  • inč, centimetar, milimetar
  • Inč je inč na malom zaslonu ili velikom zaslonu

pt, pc

  • bodova (1/72 inča) i picas (12 bodova)

Primjer

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

font-size: 24pxOdlomak s prikazat će se kao 24 piksela na zaslonu telefona, tableta ili radne površine.

Prikazat divće se kao 3 inča širok, a borderna divkućištu će biti debljine 3/72 inča, bez obzira na veličinu zaslona.