CSS Ръководство за единици: CSS em, rem, vh, vw и др., Обяснено

Единици

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

Дължина

Единици с обща дължина

Има няколко единици, използвани от CSS за изразяване на дължина. По-старите, поддържани от всички браузъри, са:

  • rem - „r“ означава „root“: „root em“ -, което е равно на размера на шрифта, фиксиран към основния елемент (почти винаги).
  • vh и vw - Много отзивчиви техники за уеб дизайн разчитат до голяма степен на процентните правила. Процентните мерки на CSS обаче не винаги са най-доброто решение за всички проблеми. Мярката vh е равна на 1/100 от височината на прозореца за гледане. Така например, ако височината на браузъра е 800px, 1vh се равнява на 8px и по подобен начин, ако ширината на прозореца за гледане е 650px, 1vw е еквивалентно на 6.5px.
  • vmin и vmax - Тези единици са свързани с максималната или минималната стойност на vh и vw . Например, ако браузърът е зададен на 1200px широк и височината 600px, 1vmin ще бъде 6px и 1vmax ще бъде 12px. Ако обаче ширината е зададена на 700px и височината е зададена на 1080px, vmin ще бъде равна на 7px и vmax 10.8px.
  • ex и ch - Тези единици, подобни на em и rem , разчитат на текущия шрифт и размера на шрифта. Въпреки това, за разлика от em и rem , тези единици също разчитат,font-familyтъй като се определят въз основа на мерки, специфични за всеки шрифт. В СН единица ( "характер единица") се определя като ширината на характер нула ( "0"). В бившия единица е определена като "сегашната х-височината на текущия шрифт или половината от 1em". Височината-x на даден шрифт е височината на малките букви „x“ на този шрифт. Често е средната маркировка на шрифта.

Има два основни вида единици, използвани за дължина и размер в CSS: относителни и абсолютни.

Относителни единици

Относителните единици се променят спрямо текущия размер на шрифта на елемента или други настройки. Някои относителни единици са

em

  • ширината на главна буква M на font-sizeтекущия елемент.
  • Размерите на шрифтовете се наследяват от родителски елементи.

Пример:

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

Тук

ще бъде равно, 32pxтъй като font-sizeтекущият или родителският елемент е 16px.

rem

  • корен emили ширината на главна буква M на основата по подразбиране 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запълването на ширината на прозореца за, независимо дали това е 417px, 690px, или всяка ширина.

vh

  • височина на изгледа или 1/100 от височината на прозореца за гледане

Пример:

div { height: 50vh; }

Това divще запълни половината от височината на прозореца за гледане, независимо дали това е 1080px, 1300px или която и да е височина.

Абсолютни единици

Абсолютните единици ще бъдат еднакви, независимо от размера на екрана или други настройки. Някои абсолютни единици са

px

  • пиксел
  • броят на пикселите е спрямо качеството на екрана на гледащото устройство

in, cm,mm

  • инч, сантиметър, милиметър
  • Инч е инч на малък или голям екран

pt, pc

  • точки (1/72 от инча) и picas (12 точки)

Пример

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

font-size: 24pxАбзац с ще се покаже като 24px на телефон, таблет или десктоп екран.

The divще се покаже като 3 инча широк, а borderon на divще бъде с дебелина 3/72 от инча, независимо от размера на екрана.