Водич за ЦСС јединице: ЦСС ем, рем, вх, вв и још много тога, објашњено

Јединице

Многи ЦСС својства волим width, margin, padding, font-sizeитд узети дужину. ЦСС има начин да изрази дужину у више јединица. Дужина је комбинација броја и јединице без размака. Нпр. 5px, 0.9emИтд.

Дужина

Јединице заједничке дужине

Постоји неколико јединица које ЦСС користи за изражавање дужине. Старији, које подржавају сви прегледачи, су:

  • рем - „р“ означава „роот“: „роот ем“ -, што је једнако величини фонта фиксираној на роот елемент (готово увек).
  • вх и вв - Многе реактивне технике веб дизајна ослањају се у великој мери на правила процента. Међутим, мере ЦСС процента нису увек најбоље решење за све проблеме. Мера вх једнака је 1/100 висине видног поља. Тако, на пример, ако је висина прегледача 800пк, 1вх је једнак 8пк, и, слично томе, ако је ширина оквира за приказ 650пк, 1вв је еквивалентно 6.5пк.
  • вмин анд вмак - Ове јединице се односе на максималну или минималну вредност ВХ и ВВ . На пример, ако је прегледач постављен на 1200пк ширине и висине 600пк, 1вмин би био 6пк, а 1вмак би био 12пк. Међутим, ако је ширина постављена на 700пк, а висина постављена на 1080пк, вмин би био једнак 7пк, а вмак 10,8пк.
  • ек и цх - Ове јединице, слично ем и рем , ослањају се на тренутни фонт и величину фонта. Међутим, за разлику од ем и рем , ове јединице се такође ослањајуfont-familyјер се одређују на основу мера специфичних за сваки фонт. Јединица цх („јединица карактера“) дефинисана је као ширина нуле знака („0“). Бивши јединица је дефинисана као "текуће к висине тренутног фонта или половине 1ем". Висина-к датог фонта је висина малих слова "к" тог фонта. Често је средња ознака фонта.

Постоје две опште врсте јединица које се користе за дужину и величину у ЦСС-у: релативне и апсолутне.

Релативне јединице

Релативне јединице се мењају у односу на тренутну величину фонта елемента или друга подешавања. Неке релативне јединице су

em

  • ширина великог слова М font-sizeтренутног елемента.
  • Величине фонтова се наслеђују од родитељских елемената.

Пример:

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

Ево

ће бити једнако 32pxпошто је font-sizeтренутни или надређени елемент 16px.

rem

  • корен emили ширина великог слова М подразумеване базе font-size.
  • Величине надређених фонтова неће имати ефекта.

Пример:

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

Ево

ће износити 24pxјер је подразумевани база font-sizeје 16px.

%

  • проценат величине у односу на величину родитеља.

Пример:

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

Будући да је родитељска ширина 400px, ширина унутрашњег параграфа била би 300px, или 75% 400px.

vw

  • ширина погледа или 1/100 од ширине оквира за приказ

Пример:

body { width: 100vw; }

bodyНасип ширина прозора, да ли је 417пк, 690пк или свака ширина.

vh

  • висина погледа или 1/100 од висине видног поља

Пример:

div { height: 50vh; }

Ово divће попунити половину висине оквира за приказ, било да је то 1080пк, 1300пк или било која висина.

Апсолутне јединице

Апсолутне јединице ће бити исте без обзира на величину екрана или друга подешавања. Неке апсолутне јединице су

px

  • пиксел
  • број пиксела је у односу на квалитет екрана уређаја за преглед

in, cm,mm

  • инч, центиметар, милиметар
  • Инч је инч на малом екрану или великом екрану

pt, pc

  • тачке (1/72 инча) и пицас (12 поена)

Пример

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

font-size: 24pxОдломак са ће се приказати као 24 пиксела на екрану телефона, таблета или радне површине.

divЋе се појавити као 3 инча широк, а borderна divће бити 3/72 од једног инча дебљине, без обзира на величину екрана.