37 Mõõtühikud

Mitmele CSS omaduste väärtuste puhul tuleb kirja panna pikkusväärtus. Näiteks width, margin, padding, font-size jt.

Sellisel juhul järgneb väärtusele mõõtühik (tühikut ei tohi väärtuse ja mõõtühiku vahele jätta). Näiteks: 20px, 3cm, 4em jne.

Mõne CSS omaduse puhul saab kasutada ka negatiivseid väärtusi.

Mõõtühikud jaotatakse kahte suuremasse gruppi: absoluutsed ja suhtelised mõõtühikud.

Absoluutsed mõõtühikud

Absoluutsetel mõõtühikutel on kindel väärtus ning kõik nad kuvatakse alati kindlalt just sama suurusega. Absoluutsete mõõtühikute kasutamisel tuleb olla ettevaatlik kuna ekraanide suurused ja resolutsioonid on veebilehe külastajatel varieeruvad. Absoluutsed mõõtühikud:

  • cm – sentimeeter
  • mm – millimeeter
  • in (inches) – toll = 2.54cm
  • pt – punkt = 1/72 tolli
  • pc – pica = 12 punkti

Absoluutseid ühikuid on mõistlik kasutada vaid seal, kus võib nende peale kindel olla. Näiteks kasutada punkti trükkimiseks mõeldud kujunduses teksti fondi suuruse ja reavahe määramisel ning millimeetrit ja sentimeetrit piltide suuruse määramisel.

Absoluutsete mõõtühikute alla kuulub ka piksel:

  • px – piksel = 1/96in

Kuna aga piksli suurus oleneb osaliselt ka kasutaja ekraani resolutsioonist, siis saab teda mõningal määral lugeda ka suhteliseks ühikuks. Pikslid sobivad hästi kasutamiseks koos rastergraafikaga, näiteks sättimiseks tekstiblokki sama laiaks kui taustapilt.

Suhtelised mõõtühikud

Suhtelised mõõtühikud on defineeritud suhtega mõnesse absoluutsesse mõõtühikusse. Suhtelisi mõõtühikuid on parem kasutada juhtudel, kui on teada, et veebilehte külastatakse mitmete erinevate seadmetega. Suhtelised mõõtühikud:

  • em – suurus oleneb omadusest font-size (2em on kaks korda suurem kui parasjagu on fondi suurus).
  • ex – suurus oleneb kasutusel oleva fondi kõrgusest (kasutatakse väga harva).
  • ch – suurus oleneb numbri 0 laiusest.
  • rem – suurus oleneb juurelemendi suurusest.
  • vw – suurus on 1% brauseri akna laiusest.
  • vh – suurus on 1% brauseri akna kõrgusest.
  • vmin – suurus on 1% brauseri väiksemast dimensioonist.
  • vmax – suur on 1% brauseri suuremast dimensioonist.
  • % – suurus oleneb elemendist, milles antud element sisaldub.

Enim leiab suhtelistest mõõtühikutest kasutust em ja rem.

Antud mõõtühikud sobivad hästi pikkuste määramiseks ekraanil. Teksti suurusega seotud ühikud nagu em sobivad sinna, kus mõõtmed peavad olema proportsionaalsed tekstiga. Eriti oluline on arvestades seda, et enamik brausereid pakuvad võimalust teksti suurust vastavalt soovile muuta. Nii näiteks jääb taandrida, mille suuruseks 2em ka siis, kui fonti suurendada 5 korda, ikka kahe tähepikkuse laiuseks samas, kui mõõduga 20px määratud taane kahaneb vaevumärgatavaks.

Litsents

Icon for the Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License

Veebidisain by Koostaja: Mikk Oad; Tekst: Andrus Rinde, Mikk Oad is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License, except where otherwise noted.

Jaga seda raamatut