Bert Bos | CSS masterclass – Amsterdam 2012
“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
(No known implementations)
vw = 1/100th viewport width
vh = 1/100th viewport height
vmin = min(vw, vh)
vmax = max(vw, vh)
DIV { columns: 20em; height: 60vh; /* 60% of viewport height */ }
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.