CSS Units!
px
- Historically equal to "one pixel".
- Absolute. 1px == 1px throughout a page.
- In print, 1px == 1/96in
mm, cm, in, PT, PC
- Physical/historical units made for print.
- Often unexpected results when using on screen media.
- 1in = 2.54cm = 25.4mm = 72pt = 6pc (= 96px in print)
%
- Percentage of width (or height) relative to an element's container.
- Sometimes relative to something completely different:
line-height: 50%; for example. - Aren't universal, only work with properties that explicitly accept percentages. border-width for example cannot be a percentage.
- Gotchas: margin and padding are always calculated from width.
em
- Relative to the font-size of the current element. If no font-size is set, it is inherited.
- 1em = 1 × font-size.
- Allows you to control many dimensions from a single parent text-size.
- Gets complicated with nested text-sizes based on em units. for example:
... 10 × 1.8 × 1.25 × 0.25 × 50 = 281.25 (px)
What's the actual width of the last element?
eX
- Like "em", but relative to the x-height of the font and font-size of the current element.
ch
- Like "em", but relative to the advance width of the character "0" given the font and font-size of the current element.
- Can be thought of as "characters".
- Could be useful for code snippets, for example. (width: 80ch)
Rem
- Like "em", but always relative to the font-size of the root element (usually <html>).
- More straight-forward and maintainable approach to scaling a page's dimensions with responsive breakpoints.
VH, VW, VMIN, VMAX
- 1vh = 1% of the viewport height.
- 1vw = 1% of the viewport width.
- 1vmin = 1% of the viewport's smallest dimension
- 1vmax = 1% of the viewport's largest dimension
- Great for creating statically scalable webpages without breakpoints.
fin.
