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

cssbộ 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:

html<div id="con1"></div>
<div id="targ"></div>
<div id="con2"></div>

css#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:

html<p id="con1">
  responsive text example
</p>
<p id="elem">
  responsive text example
</p>
<p id="con2">
  responsive text example
</p>

css#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:

html<div id="con1"></div>
<div id="elem"></div>
<div id="con2"></div>

cssdiv {
  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;
}

Результат:

Xem thêm