Bert Bos | CSS masterclass – Amsterdam 2012

The rem unit

“rem” means “root em,” i.e., the font size of the root element

From the demo:

IMG.a {width: 5em}
IMG.b {width: 5rem}

Unline 'em', 'rem' is constant throughout a document

(Link to specification)

The vw, vh, vmin and vmax units

vw = 1/100th viewport width
vh = 1/100th viewport height

vmin = min(vw, vh)
vmax = max(vw, vh)

  columns: 20em;
  height: 60vh;   /* 60% of viewport height */

The calc() notation

Useful for combining multiple units

p.framed {
  border: 10px solid gold;
  padding: 1em;
  width: 50%;
  margin: 1em auto }
p.unframed {
  width: calc(50% + 2 * 10px);
  padding: 1em;
  background: yellowgreen }

Spaces around operators are required.