On SitePoint: An Overview of CSS Sizing Units

Cross-posted to my personal blog.

Sometimes people pay me to write things. Most recently, it's An Overview of CSS Sizing Units now available on SitePoint.

In it, I walk you through the four broad categories of CSS length units:

• absolute units, including px, pt and in.
• font-relative units, such as rem and em along with newer units such as the ic unit that work well with Chinese, Japanese, and Korean writing systems.
• viewport relative units, including new small, large, and dynamic viewport units.
• container-relative units.

The small, large, and dynamic viewport units are particularly useful. Screen space is at a premium on mobile phones and tablets. As a result, the browser controls for some browsers expand and retract as the user scrolls the page.

Small and large viewport units — svw, svh, svi, svb, svmin, svmax, lvw, lvh, lvi, lvb, lvmin and lvmax — are static values that remain the same whether the UI is expanded or retracted.

Dynamic viewport units — dvw, dvh, dvi, dvb, dvmin and dvmax — change when the size of the viewport changes.

If you've ever tried vertically centering an element on a mobile browser, only to have it appear off-center, small viewport units might be what you need. Ahmad Shaheed's recent New Viewport Units post goes into more detail about how viewport units work.