DEV Community

loading...

CSS: Unit of Measurements

koralarts profile image Karl Castillo ・1 min read

Pixel (px)

Represents a dot on the screen. 1px = 1 dot

em

Represents a calculated value based on the container's font size where 1em equals 100% of the font size. If the container has no specified font size, the inherited font size will be used.

rem

Represents a calculated value based on the root element's font size where 1rem equals 100% of the font size. The root is usually the html element. The :root pseudo element could also be used.

vh

Represents a calculated value based on the height of the viewport where 1vh equals 1% of the viewport height.

vw

Represents a calculated value based on the width of the viewport where 1vw equals 1% of the viewport width.

vmin

Represents a calculate value based on the smaller value between the viewport's height and width where 1vmin equals 1% of the smaller value.

vmax

Represents a calculate value based on the bigger value between the viewport's height and width where 1vmin equals 1% of the smaller value.

Discussion (0)

pic
Editor guide