max() 、 min() 、 clamp() 、 calc() 為 CSS function 屬性設定，適用於 <length>長度、 <frequency>頻率、 <angle>角度、 <time>時間、 <number>數字、<integer>整數。
支援瀏覽器：IE10+、Firefox4+、Chrome19+、Safari6+
單位：px、em、rem、%
運算：+ – * /
+ 加
– 減
* 乘 (必為數字)
/ 除 (必為數字，不可為零)
使用 + 和 – 時，前後需加上空白，* 和 / 可以不用加。
☞ 語法說明
max() 最大屬性質
函數以逗號分隔，設定最大值
/* css範例-min-width寫法 */
div{
width:80vw;
min-width:200px;
}
/* css範例-max()寫法 */
div{
width:max(80vw, 200px); //寬度最小是 200px，裝置寬度小於200px則使用 80vw
}
min() 最小屬性質
函數以逗號分隔，設定最小值
/* css範例-max-width寫法 */
div{
width:80vw;
max-width:200px;
}
/* css範例-mix()寫法 */
div{
width:mix(80vw, 200px); //寬度為80vw，裝置寬度小於80vw則使用200px
}
clamp() 中間屬性質
設定最大值與最小值之間的理想值，可自訂理想值。
clamp() = max(最小值, min(val, 最大值));
clamp(最小值, 自訂值, 最大值);
/* css範例-min-width與max-width寫法 */
div{
width: 100%;
min-width:200px;
max-width:300px;
}
/* css範例-clamp()寫法 */
div{
clamp(200px, 100%, 300px);
}
calc() 屬性計算
屬性執行計算函數，透過運算式動態取得參數值。
/* css範例-運算式 */ /* property: calc(expression) */ width: calc(10px + 100px); width: calc(100% - 30px); width: calc(2em * 5); width: calc(100% / 3); width: calc(var(--variable-width) + 20px);
/* css範例-length */
h1 {
font-size: calc(1.5rem + 3vw);
}
/* css範例-integer */
.modal {
z-index: calc(3 / 2);
}
/* css範例-定位*/
.banner {
position: absolute;
left: 40px;
width: calc(100% - 80px);
border: solid black 1px;
box-shadow: 1px 2px;
background-color: yellow;
padding: 6px;
text-align: center;
box-sizing: border-box;
}
/* css範例-自動調整表單自適應於父框，不超出父框邊緣*/
input {
padding: 2px;
display: block;
width: calc(100% - 1em);
}
#formbox {
width: calc(100% / 6);
border: 1px solid black;
padding: 4px;
}
/* css範例-變數運用*/
.foo {
--widthA: 100px;
--widthB: calc(var(--widthA) / 2);
--widthC: calc(var(--widthB) / 2);
width: var(--widthC);
}
/* widthC = calc( calc( 100px / 2) / 2) = 25px */
☞ 範例
min()與calc()搭配使用
/* css範例-最大寬度是80vw - 50px */
:root{
--w:min(200px, 80vw);
}
div {
height: 50px;
width:calc(var(--w) - 50px);
}
