clamp()
CSS clamp() funksiyasi ko‘rish maydoni (viewport) o‘lchamiga qarab minimal qiymat, afzal qiymat va maksimal qiymat oralig‘ida moslashuvchan o‘zgaradigan qiymatni o‘rnatish uchun ishlatiladi.
clamp() funksiyasi uchta parametrga ega: minimal qiymat, afzal qiymat va maksimal qiymat:
- Agar afzal qiymat min va max qiymatlar oralig‘ida bo‘lsa, afzal qiymat ishlatiladi
- Agar afzal qiymat min qiymatdan kichik bo‘lsa, min qiymat ishlatiladi
- Agar afzal qiymat max qiymatdan katta bo‘lsa, max qiymat ishlatiladi
Misol
<h1> elementining font-size qiymatini 5vw qilib o‘rnating, lekin u hech qachon 1.5rem dan kichik yoki 3rem dan katta bo‘lmasin.
<div> elementining font-size qiymatini 2.5vw qilib o‘rnating, lekin u hech qachon 1rem dan kichik yoki 2rem dan katta bo‘lmasin. Shuningdek, div konteyner kengligini 50% qilib o‘rnating, lekin u hech qachon 200px dan kichik yoki 600px dan keng bo‘lmasin:
h1 {
font-size: clamp(1.5rem, 5vw, 3rem);
}
div {
border: 1px solid green;
padding: 10px;
font-size: clamp(1rem, 2.5vw, 2rem);
width: clamp(200px, 50%, 600px);
}
O‘zingiz sinab ko‘ring »
Brauzerlarda qo‘llab-quvvatlash
Jadvaldagi sonlar funksiyani to‘liq qo‘llab-quvvatlaydigan birinchi brauzer versiyasini ko‘rsatadi.
| Funksiya | |||||
|---|---|---|---|---|---|
| clamp() | 79 | 79 | 75 | 13.1 | 66 |
CSS sintaksisi
clamp(min, preferred, max)
| Qiymat | Tavsif |
|---|---|
| min | Ixtiyoriy. Ruxsat etilgan eng kichik qiymat |
| preferred | Majburiy. Ideal (afzal) qiymat |
| max | Ixtiyoriy. Ruxsat etilgan eng katta qiymat |
| Versiya: | CSS Values and Units moduli, 4-daraja |
|---|
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!