Units in CSS

Relative units

Most frequently used in CSS, work well for both print and screen.

• % - percentage, calculated based on a property (usually the same) of parent
• em - relative to the font size of the element (or inherited)
• rem - relative to font size of the root element

Viewport units

The viewport percentage units are relative to the initial containing block -- usually the browser window.

• vw - 1% of viewport (window) width
• vh - 1% of viewport (window) height
• vmin - 1% of viewport (window) width or height, whichever is smaller
• vmax - 1% of viewport (window) width or height, whichever is bigger

Units in print

When styling the website for print, you should still use relative units, but viewport units are tricky. On the other hand, you can use absolute units (aside from px):

• cm, mm, in - centimeter, millimeter, inch

Tasks

See the Pen by t-i-m-i (@t-i-m-i) on CodePen.

Further reading

• CSS Values and Units Module Level 3
• 7 CSS Units You Might Not Know About
• Building Resizeable Components with Relative CSS Units | CSS-Tricks
• CSS Units Best Practices · GitHub
• Taking the “Erm..” Out of Ems