Единицы 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.54 см) Попробуйте
px * Пиксель (1px = 1/96 дюйма) Попробуйте
pt Точка (1pt = 1/72 дюйма) Попробуйте
pc Пико (1pc = 12 pt) Попробуйте

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

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

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

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

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

* Viewport (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