<h1>CSS Sizing Units</h1>
<div>
10
<select>
<optgroup label="Relative">
<option>%</option>
<option>em</option>
<option>ex</option>
<option>ch</option>
<option>cap</option>
<option>ic</option>
<option>lh</option>
</optgroup>
<optgroup label="Root Relative">
<option>rem</option>
<option>rex</option>
<option>rch</option>
<option>rlh</option>
<option>ric</option>
<option>rcap</option>
</optgroup>
<optgroup label="Absolute">
<option>px</option>
<option>pt</option>
<option>pc</option>
<option>in</option>
<option>cm</option>
<option>mm</option>
<option>Q</option>
</optgroup>
<optgroup label="Viewport">
<option>vw</option>
<option>vh</option>
<option>vi</option>
<option>vb</option>
<option selected>vmin</option>
<option>vmax</option>
<option>dvw</option>
<option>dvh</option>
<option>dvi</option>
<option>dvb</option>
<option>dvmin</option>
<option>dvmax</option>
<option>svw</option>
<option>svh</option>
<option>svi</option>
<option>svb</option>
<option>svmin</option>
<option>svmax</option>
<option>lvw</option>
<option>lvh</option>
<option>lvi</option>
<option>lvb</option>
<option>lvmin</option>
<option>lvmax</option>
</optgroup>
<optgroup label="Container">
<option>cqw</option>
<option>cqh</option>
<option>cqi</option>
<option>cqb</option>
<option>cqmin</option>
<option>cqmax</option>
</optgroup>
<optgroup label="Container Relative">
<option>cqem</option>
<option>cqlh</option>
<option>cqex</option>
<option>cqch</option>
</optgroup>
</select>
</div>
h1 {
font-weight: lighter;
font-size: var(--user-choice, 10vmin);
margin: 0;
}
select {
font-size: 1em;
}
div {
font-size: 30Q;
}
html {
block-size: 100%;
color-scheme: dark light;
}
body {
min-block-size: 100%;
margin: 0;
padding: 10Q;
box-sizing: border-box;
display: flex;
flex-direction: column;
gap: 10Q;
align-items: center;
justify-content: center;
font-family: system-ui;
}
const title = document.querySelector('h1')
const list = document.querySelector('select')
const options = document.querySelectorAll('select option')
// set select choice to custom property
list.addEventListener('change', e =>
document.body.style.setProperty('--user-choice', `10${e.target.value}`))
// disable any units that the visiting browser doesnt understand
options.forEach(opt => {
if (!CSS.supports('font-size: 2'+opt.textContent))
opt.setAttribute('disabled', true)
})
title.innerText = options.length + ' ' + title.innerText
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.