Hàm clamp
Hàm clamp nhận ba tham số: giá trị tối thiểu, giá trị ưu tiên và giá trị tối đa.
Nó trả về:
- giá trị tối thiểu nếu giá trị ưu tiên nhỏ hơn giá trị tối thiểu
- giá trị tối đa nếu giá trị ưu tiên lớn hơn giá trị tối đa
- giá trị ưu tiên nếu nó nằm giữa giá trị tối thiểu và tối đa
Cú pháp
bộ chọn {
thuộc tính: clamp(min, pref, max);
}
Ví dụ . Giới hạn kích thước khối
Trong ví dụ tiếp theo, kích thước ưu tiên
của khối sẽ là 30% chiều rộng màn hình.
Nhưng nó không thể trở nên nhỏ hơn 100px và lớn hơn 300px:
<div id="con1"></div>
<div id="targ"></div>
<div id="con2"></div>
#targ {
width: clamp(100px, 30%, 300px);
height: 100px;
border: 1px solid red;
margin: 30px auto;
}
#con1 {
width: 100px;
height: 100px;
border: 1px solid black;
margin: 30px auto;
}
#con2 {
width: 300px;
height: 100px;
border: 1px solid black;
margin: 30px auto;
}
:
Ví dụ . Kích thước phông chữ thích ứng
Trong ví dụ tiếp theo, kích thước phông chữ ưu tiên
sẽ là 4vw.
Nhưng nó không thể trở nên nhỏ hơn 16px và lớn hơn 32px:
<p id="con1">
responsive text example
</p>
<p id="elem">
responsive text example
</p>
<p id="con2">
responsive text example
</p>
#elem {
font-size: clamp(16px, 4vw, 32px);
color: red;
}
#con1 {
font-size: 16px;
}
#con2 {
font-size: 32px;
}
:
Ví dụ . Bán kính bo góc thích ứng
Trong ví dụ tiếp theo, bán kính bo góc ưu tiên
sẽ là 3vw.
Nhưng nó không thể trở nên nhỏ hơn 5px và lớn hơn 20px:
<div id="con1"></div>
<div id="elem"></div>
<div id="con2"></div>
div {
width: 100px;
height: 100px;
margin: 20px auto;
background: lightblue;
}
#elem {
border-radius: clamp(5px, 3vw, 20px);
background: #efafc6;
}
#con1 {
border-radius: 5px;
}
#con2 {
border-radius: 20px;
}
:
