發表文章

目前顯示的是 4月, 2020的文章

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

圖片
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 .