讓 font-size 能隨 viewport 寬度自動變大縮小 (Fluid Type)

不只用在 font-size,也能用在 width, line-hegiht, padding, margin 等等。

Methods

  1. 使用 Fluid Type (aka CSS Locks)

:bulb:目前比較推薦使用這個,瀏覽器支援度比較高

div {
  font-size: 16px;
}
@media screen and (min-width: 600px) {
  div {
    font-size: calc(16px + (32 - 16) * ((100vw - 600px) / (1200 - 600)))
  }
}
@media screen and (min-width: 1200px) {
  div {
    font-size: 32px; 
  }
}

  1. clamp() CSS function
div {
  font-size: clamp(16px, 3vw, 32px);
}

Resources

1個讚

哇哦!!!
那個 cheat sheet 超棒