December 19, 2022
Estimated Post Reading Time ~

A guide to CSS units

A guide to CSS units

px:
Pixels are fixed-size units that are used in screen-based media (e.g. computer screens). One pixel is equal to one dot on the screen.

%: Percentages are relative units that are used to specify sizes as a percentage of another size. For example, if you set the width of an element to 50%, it will be half the width of its parent element. c

em: These are relative units that are used to specify sizes as a multiple of the font size of an element. For example, if the font size of an element is 16 pixels and you set the width to 2em, the element will be 32 pixels wide.

rem: Rems are similar to ems, but they are based on the font size of the root element (i.e. the `<html>` element) instead of the element itself. This allows you to set font sizes and other sizes consistently across your document.

vw: Viewport width units are used to specify sizes as a percentage of the viewport width. One vw is equal to 1% of the viewport width.

vh: Viewport height units are used to specify sizes as a percentage of the viewport height. One vh is equal to 1% of the viewport height.

vmin: Viewport minimum units are used to specify sizes as a percentage of the smaller dimension of the viewport (either the width or the height). One vmin is equal to 1% of the smaller dimension of the viewport.

vmax: Viewport maximum units are used to specify sizes as a percentage of the larger dimension of the viewport (either the width or the height). One vmax is equal to 1% of the larger dimension of the viewport


By aem4beginner

No comments:

Post a Comment

If you have any doubts or questions, please let us know.