1. Sākums
  2. Dokumentācija
  3. HTML un CSS pamācības – kā izveidot mājas lapu bez priekšzināsanām 2020
  4. CSS mērvienības

CSS mērvienības

Ar CSS palīdzību Jūs variet dažādiem elementiem mājas lapā pievienot izmērus – platumu, augstumu, lielumu u.c. Kā arī noteikt attālumus starp elementiem, atstarpes un atkāpes. lai pievienotu šos izmērus iespējams izmantot vairākas mērvienības, kā, piemēram, pikseļos, centimetros, collās utt.

Ir iespējami 2 vediu izmēru noteikšanas veidi: aboslūtie un relatīvie.

Absolūtie elmentu izmēri ir konkrēta izmēra, nemainīgi lielumi, piemēram, platums vienmēr būs 300px, kas ir 300 pikseļi.

Savukārt, relatīvie izmēri ir elementa izmērs ir atkarīgs/relatīvs no cita elementa izmēra, piemēram 10% no body elementa. Mūsdienās visvairāk izmanto relatīvos izmērus, jo mājas lapas tiek attēlotas uz daudz un dažādu ekrānu ierīcēm un tādā veidā var panākt, ka elements pielāgojas katras ierīces ekrānam. Absolūtos izmērus var izmantot, piemēram, gadījumos, kad mājas lapas dizainā ir paredzēts kāds elements, kas visos ekrānos būs vienāda izmēra un svarīgi saglabāt šo izmēru nemainīgu, vai arī, ja paredzēts kādu mājas lapas sadaļu vai bloku printēt un lapā būs printēšanas poga.

Absolūtie izmēri:

  • cm – centimetri
  • mm – milimetri
  • in – collas (12 colla ir vienāda ar 96 px un 2.54 cm)
  • px – pikseļi 91px ir vienāds ar 1/96 no collas)
  • pt – punkti (1pt ir vienāds ar 1/72 no collas)
  • pc – picas (1pc ir vienāds ar 12 punktiem)

Relatīvie izmēri:

  • em – 2em – 2x pašreizējā fonta izmērs, 3em – 3x pašreizējā fonta izmērs utt..
  • ex – relatīvs no elementa fonta augstuma pa x asi
  • ch – relatīvs izmēram “0”
  • rem – relatīvs no root elementa fonta izmēra
  • vw – relatīvs no interneta pārlūka loga izmēra (viewport), piemēram, 1vm būs 0.5cm, brīdī, kad  ekrāna izmērs ir 50cm
  • vmin – 1% no interneta pārlūka loga izmēra (viewport) mazākās dimensijas
  • vmax – 1% no interneta pārlūka loga izmēra (viewport) lielākās dimensijas
  • % – procentuāls lielums atkarīgs no vecāka (parent) elementa.
Vai šis raksts Jums noderēja?

Sazinies ar mums!