#<length>

The <length> CSS data type represents a distance value.

#Syntax

The <length> data type consists of a <number> followed by one of the units listed below. As with all CSS dimensions, there is no space between the number and the unit literal. Specifying the length unit is optional if the number is 0.

Without units other than 0 is not supported

#Units

#Relative length units

Relative lengths represent a measurement in terms of some other distance. Depending on the unit, this distance can be the size of a specific character, the line height, or the size of the viewport.

• rpx: Responsive pixel. It can be adapted according to the screen width. The specified screen width is 750rpx. For example, on iPhone6's the screen width is 375px, and there are 750 physical pixels in total, then 750rpx = 375px = 750ppx, 1rpx = 0.5px = 1ppx.

• rem: This unit represents the font-size of the root element. When used on the font-size of the root element, it represents its initial value.

• em: This unit represents the calculated value of the element's font-size. If used in the font-size property itself, it represents the font-size value inherited by the element.

• vh: 1vh is 1% of the viewport height.

• vw: 1vw is 1% of the viewport width.

#Absolute length units

Absolute length units represent a physical measurement when the physical properties of the output medium are known, such as for print layout. This is done by anchoring one of the units to a physical unit and then defining the others relative to it. The anchoring is done differently for low-resolution devices and high-resolution devices.

• px: Pixel, equal to a physical pixel multiplied by pixel density, equivalent to pt on iOS or dp on Android. For high-resolution screens, one CSS pixel implies multiple device pixels. E.g: 1px = 1/96th of 1in.

• ppx: Physical pixel, equal to the size of an actual pixel on the screen.

#Compatibility