使用 rems 和 ems 建立可伸縮元素

Version >= 3

你可以使用 html 標籤的 font-size 定義的 rem 來設定元素的樣式,方法是將 font-size 設定為 rem 的值,並在元素內使用 em 來建立與你的全域性 font-size 一起縮放的元素。

HTML:

<input type="button" value="Button">
<input type="range">
<input type="text" value="Text">

相關 CSS:

html {
  font-size: 16px;
}

input[type="button"] {
  font-size: 1rem;
  padding: 0.5em 2em;
}

input[type="range"] {
  font-size: 1rem;
  width: 10em;
}

input[type=text] {
  font-size: 1rem;
  padding: 0.5em;
}

可能的結果:

https://i.stack.imgur.com/Klztk.gif