<h1>CSS 尺寸大小单位</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;