Gosub CSS units & calc() test

Length units (px/pt/cm, em/rem/ch/ex, %, vw/vh/vmin/vmax) and the math functions calc(), min(), max(), clamp(). Resize the window to exercise the relative ones.

Absolute lengths

width: 100px
100px
width: 200px
200px
width: 150pt
150pt
width: 5cm
5cm

Font-relative (em / rem / ch / ex)

10em @ 20px font
10em
10rem (root font)
10rem
20ch
20ch
30ex
30ex

Percentage (of containing block)

25%
50%
75%

Viewport units

50vw
50vw
25vw
25vw
30vmin
30vmin
30vmax
30vmax
height: 15vh
15vh tall

calc()

calc(100% - 80px)
100% − 80px
calc(50vw - 2rem)
50vw − 2rem
calc(10ch + 40px)
10ch + 40px
calc(100%/3 - 10px) ×3
⅓
⅓
⅓

min() / max() / clamp()

min(400px, 90%)
min()
max(200px, 40%)
max()
clamp(150px, 50%, 500px)
clamp()

Fluid type: clamp(14px, 2.5vw, 28px) — resize to watch this scale.