CSS clamp()、max()、min() 簡單規劃最大值與最小值

作者： cjzopen - 4月 10, 2020

chrome80, firefox75……以上，基本上各大知名的瀏覽器都可以支援。而雖然說是 3 種語法，但其實 clamp 可以被其它兩者取代。

font-size 的使用案例

Sass / SCSS

它的開發環境目前還不支援(2020-06)，所以若要用 Sass / SCSS 開發的話目前可以寫成：
font-size: m#{i}n(m#{a}x(9vw,2.5rem),5rem);

For Exmaple

這些語法可以用在 width、font-size、甚至是 grid 的 repeat()……等等的地方，例如：


.example{
  font-size:16px; /* if not support */
  font-size: clamp(min, default, max);

  font-size: max(default, min);

  width: min(99.2px * 10, 100%);
  
  left: min(30%, calc(100% - 220px));
  
  font-size: max(value1, value2, min); /* value1 and value2 are different unit. */
  
  /* clamp() is not a necessity */
  font-size: max(min(0.5vw, 0.5em), 1rem);
}

English bold

中文粗體

See the Pen CSS clamp()、max()、min() by cj (@cjzopen) on CodePen.

留言