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
- font-relative units, such as
emalong with newer units such as the
icunit 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 —
lvmax — are static values that remain the same whether the UI is expanded or retracted.
Dynamic viewport units —
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.