CSS-i üksuse juhend: CSS em, rem, vh, vw ja palju muud, selgitatud

Ühikud

Paljud CSS omadused meeldib width, margin, padding, font-sizejne võtab pikkus. CSS-i abil saab pikkust väljendada mitme ühikuna. Pikkus on numbri ja ühiku kombinatsioon tühikuteta. Nt 5px, 0.9emjne

Pikkus

Ühised pikkuse ühikud

CSS kasutab pikkuse väljendamiseks mitu ühikut. Vanemad, mida kõik brauserid toetavad, on:

  • rem - “r” tähistab “root”: “root em” -, mis võrdub juurelemendile fikseeritud fondisuurusega (peaaegu alati).
  • vh ja vw - paljud tundlikud veebidisaini tehnikad tuginevad suuresti protsendireeglitele. Kuid CSS-i protsendimõõdikud ei ole alati kõigi probleemide jaoks parim lahendus. Meede vh on võrdne 1/100 kõrgus vaateava. Näiteks kui brauseri kõrgus on 800 pikslit, võrdub 1vh 8 pikslit ja samamoodi, kui vaateava laius on 650 pikslit, võrdub 1vw 6,5 piksliga.
  • vmin ja vmax - need ühikud on seotud vh ja vw maksimaalse või minimaalse väärtusega. Näiteks kui brauseri väärtuseks määrati 1200px ja laiuseks 600px, oleks 1vmin 6px ja 1vmax 12px. Kui aga laiuseks seatakse 700 pikslit ja kõrguseks 1080 pikslit, võrdub vmin 7 pikslit ja vmax 10,8 pikslit.
  • ex ja ch - need üksused, mis on sarnased em-le ja rem-ile , tuginevad praegusele fondile ja fondi suurusele. Kuid erinevalt em-st ja rem-ist toetuvad ka need üksused,font-familykuna need määratakse kindlaks iga fondi spetsiifiliste meetmete põhjal. Ch ühiku ( "märgiga unit") on defineeritud kui laius iseloomu nulli ( "0"). Ex ühikuks "praegune x-kõrgus praeguse fondi või pool 1em". Antud fondi kõrgus-x on selle fondi väiketähe „x” kõrgus. Sageli on see fondi keskmine märk.

CSS-is kasutatakse kahte üldist tüüpi pikkust ja suurust: suhteline ja absoluutne.

Suhtelised ühikud

Suhtelised üksused muutuvad võrreldes elemendi praeguse fondisuuruse või muude seadistustega. Mõned suhtelised üksused on

em

  • font-sizepraeguse elemendi tähe M laius .
  • Fondisuurused on päritud vanemelementidelt.

Näide:

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

Siin

on võrdne, 32pxkuna font-sizepraeguse või vanema elemendi väärtus on 16px.

rem

  • root emehk vaikebaasi suure tähe M laius font-size.
  • Vanemate fondisuurustel pole mingit mõju.

Näide:

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

Siin

on võrdne, 24pxkuna vaikebaas font-sizeon 16px.

%

  • suuruse protsent vanema suuruse suhtes.

Näide:

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

Kuna vanema laius on 400px, oleks sisemise graafiku laius 300pxehk 75% 400px.

vw

  • vaate laius ehk 1/100 vaateava laiusest

Näide:

body { width: 100vw; }

bodyTäita laius vaateava, kas see on 417px, 690px, või mis tahes laiusega.

vh

  • vaate kõrgus ehk 1/100 vaateava kõrgusest

Näide:

div { height: 50vh; }

See divtäidab poole vaateakna kõrgusest, olgu see siis 1080px, 1300px või mõni muu kõrgus.

Absoluutsed ühikud

Absoluutsed ühikud on samad, olenemata ekraani suurusest või muudest seadetest. Mõned absoluutsed ühikud on

px

  • pikslit
  • pikslite arv on võrdeline kuvaseadme ekraani kvaliteediga

in, cm,mm

  • toll, sentimeeter, millimeeter
  • Toll on väikese või suure ekraani toll

pt, pc

  • punkti (1/72 tolli) ja pikasid (12 punkti)

Näide

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

font-size: 24pxLõiguga koos kuvatakse telefoni, tahvelarvuti või töölaua ekraanil 24 pikslit.

divIlmub nagu 3 tolli lai ja borderaasta divon 3/72 tolli paks, sõltumata ekraani suurusest.