Единицы CSS

Единицы CSS

CSS имеет несколько различных единиц измерения для длины.

Многие CSS-параметры принимают значения «длины», такие как widthиmarginиpaddingиfont-size и т.д.

Длина - это число, за которым следует единица длины, такие как}} 10pxи2em и т.д.

Пример

Использование px (пикселей) для установки различных значений длины:

h1 {
  font-size: 60px;
}
p {
  font-size: 25px;
  line-height: 50px;
}

Попробуйте это на себе

Пробел между числом и единицей не должен присутствовать. Однако, если значение равно 0, единица может быть опущена.

Для некоторых свойств CSS разрешается использовать отрицательные значения длины.

Единицы длины делятся на два типа:Абсолютные единицыиОтносительные единицы.

Абсолютная длина

Абсолютные единицы длины фиксированы, длина, выраженная любым абсолютным значением, будет точно отображаться в этом размере.

Не рекомендуется использовать абсолютные единицы длины на экране, так как размер экрана очень изменчив. Однако, если известен выходной介质, их можно использовать, например, для макета печати (print layout).

Единица Описание TIY
cm Сантиметр Попробуйте:
mm Миллиметр Попробуйте:
in Дюйм (1in = 96px = 2.54cm) Попробуйте:
px * Пиксель (1px = 1/96 inch) Попробуйте:
pt Точка (1pt = 1/72 inch) Попробуйте:
pc Пико (1pc = 12 pt) Попробуйте:

* Пиксели (px) относятся к观看ému устройству. Для устройств с низким dpi 1px составляет один устройство пиксель (точка) на экране. Для принтеров и экранов с высокой разрешающей способностью 1px представляет собой несколько устройства пикселей.

Относительная длина

Относительные единицы длины определяют длину относительно другой длины. Относительные единицы длины лучше масштабируются между различными средами рендеринга.

Единица Описание TIY
em Относительно размера шрифта элемента (font-size) (2em означает в два раза больше текущего размера шрифта) Попробуйте:
ex Относительно x-height текущего шрифта (редко используется) Попробуйте:
ch Относительно "0" (нуля) ширины Попробуйте:
rem Относительно размера шрифта корневого элемента (font-size) Попробуйте:
vw Относительно ширины видимой области на 1% Попробуйте:
vh Относительно высоты видимой области на 1% Попробуйте:
vmin Относительно меньшего размера видимой области на 1% Попробуйте:
vmax Относительно большего размера видимой области на 1% Попробуйте:
% Относительно родительского элемента Попробуйте:

Совет:Единицы em и rem могут быть использованы для создания идеальной расширяемой компоновки!

* Вид (Viewport) = размер окна браузера. Если ширина видимой области 50, то 1vw = 0.5см.

Поддержка браузера

Числа в таблице указывают на первую версию браузера, которая полностью поддерживает эту единицу длины.

Длина единицы
em, ex, %, px, cm, mm, in, pt, pc 1.0 3.0 1.0 1.0 3.5
ch 27.0 9.0 1.0 7.0 20.0
rem 4.0 9.0 3.6 4.1 11.6
vh, vw 20.0 9.0 19.0 6.0 20.0
vmin 20.0 12.0 19.0 6.0 20.0
vmax 26.0 16.0 19.0 7.0 20.0