demosthenes.info

Iā€™m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter or add me on Google+.

web developer guide

my books

Book cover of Pro CSS3 AnimationPro CSS3 Animation, Apress, 2013

my projects

CSSslidy: an auto-generated #RWD image slider. 1.5K of JS, no JQuery. Drop in images, add a line of CSS. Done.

tipster.ioAutomatically provides local tipping customs and percentages for services anywhere.

Ruler

CSS Measurement Units

css / the box model

Estimated reading time: 1 minute, 30 seconds

CSS has two forms of measurement, absolute and relative. As a general rule, relative units are preferentially used for responsive and mobile design; absolute units tend to be used for fixed-width designs.

AbsoluteRelative
CSS Unit CSS AbbreviationCSS UnitCSS Abbreviation
PixelspxPercent%
PointsptEmem
InchesinExex
CentimeterscmRoot emrem
PicaspcViewport widthvw
Viewport heightvh
Viewport minimumvm
characterch
Gridgd

rem, vh, vw are CSS3 measurement units, supported by modern browsers.

1em is the width of the m character in the default font set for that browser. (ex is the height of the x character in a font). rem allows you to set a root font size for size for the entire page, with sizes for elements relative to this measurement:

html { font-size: 62.5%; }
body { font-size: 1.4rem; }
h1 { font-size: 2.4rem; }

(The measurements above are used because they map exactly to pixels: with a base font-size of 62.5% for a page, the body size maps to 14 pixels, and h1 to 24 pixels.)

The viewport is the browser window: vh, vw and vm can scale elements to its current size. This could be used to restrict the upper scaled size of images, for example:

img { max-width: 90vw; }

ch is the equivalent of em, but applied to the width 0 numeral of the chosen font.

gd relates to the CSS3 grid; unfortunately, only IE10 browser yet supports the grid module at this time.

You never need to specify units when declaring a value of 0: zero centimeters is the same as 0 pixels. In all other cases, units of measurement should be declared 2em, 2px, etc, not 2.

With the exception of pixels, all systems of measurement can take floating point values: 2.25em, 5.3cm, etc.

Generally speaking, CSS written for screen display devices should use relative units (percent, em and ex), with few exceptions (such as fixed-with bitmapped images, and hairlines (i.e. 1 to 5 pixel width borders)).

comments powered by Disqus

This site helps millions of visitors while remaining ad-free. For less than the price of a cup of coffee, you can help pay for bandwidth and server costs while encouraging further articles.