Go back to home page of Unsolicited Advice from Tiffany B. Brown

On SitePoint: An Overview of CSS Sizing Units

Illustrating the concept of small and large viewports. A small viewport is the available content area of the mobile browser when the controls are expanded. A large viewport is the available content area of the mobile browser when the controls are retracted.

Small versus large viewport. Illustration by Tiffany B. Brown

Cross-posted to Webinista.com.

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.