ฟังก์ชัน clamp

ฟังก์ชัน clamp รับพารามิเตอร์สามค่า: ค่าต่ำสุด, ค่าที่ต้องการ และค่าสูงสุด มันจะส่งคืนค่า:

• ค่าต่ำสุด ถ้าค่าที่ต้องการน้อยกว่าค่าต่ำสุด
• ค่าสูงสุด ถ้าค่าที่ต้องการมากกว่าค่าสูงสุด
• ค่าที่ต้องการ ถ้าค่านั้นอยู่ระหว่างค่าต่ำสุดและค่าสูงสุด

ไวยากรณ์

cssselector {
  property: clamp(min, pref, max);
}

ตัวอย่าง . จำกัดขนาดของบล็อก

ในตัวอย่างถัดไป ขนาดที่ต้องการ ของบล็อกจะเป็น 30% ของความกว้างหน้าจอ แต่มันจะไม่สามารถเล็กกว่า 100px หรือใหญ่กว่า 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;
}

Результат:

ตัวอย่าง . ขนาดฟอนต์แบบปรับตัวได้

ในตัวอย่างถัดไป ขนาดฟอนต์ที่ต้องการ จะเป็น 4vw แต่มันจะไม่สามารถเล็กกว่า 16px หรือใหญ่กว่า 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;
}

Результат:

ตัวอย่าง . มุมมนแบบปรับตัวได้

ในตัวอย่างถัดไป มุมมนที่ต้องการ จะเป็น 3vw แต่มันจะไม่สามารถเล็กกว่า 5px หรือใหญ่กว่า 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;
}

Результат:

ดูเพิ่มเติม