Cara memakai
- Pilih Properti, ketik Ukuran terkecil dan Ukuran terbesar, lalu pilih Satuan ukuran.
- Masukkan dua lebar di Lebar viewport tempat ukuran paling kecil dan Lebar viewport tempat ukuran paling besar, lalu pilih satuannya.
- Jika Anda memakai rem di mana pun, periksa Ukuran font akar (px). Peramban memakai 16 px kecuali situs menetapkan ukuran lain.
- Salin Deklarasi CSS, atau periksa Perhitungan dan Ukuran pada lebar umum untuk melihat hasil di setiap lebar.
Cara clamp() membuat ukuran responsif
clamp(MIN, VAL, MAX) menerima nilai minimum, nilai yang diutamakan dan nilai maksimum. Spesifikasi CSS Values and Units menyatakan bahwa ia mewakili nilai yang persis sama dengan max(MIN, min(VAL, MAX)). Jadi ukuran tidak pernah turun di bawah MIN atau naik di atas MAX, dan di antaranya ia mengikuti VAL, yang di sini adalah garis lurus yang bergantung pada lebar viewport.
Garis itu berjalan dari ukuran terkecil pada lebar viewport terkecil sampai ukuran terbesar pada lebar viewport terbesar. Di luar kedua lebar itu, ukurannya tetap.
kemiringan = (ukuran terbesar - ukuran terkecil) / (viewport terbesar - viewport terkecil); intersep = ukuran terkecil - kemiringan × viewport terkecil; nilai yang diutamakan = intersep + kemiringan × 100vwKemiringan, intersep dan suku vw
Kemiringan adalah seberapa besar ukuran bertambah untuk setiap piksel lebar viewport. Intersep adalah tempat garis yang sama bertemu lebar viewport nol. Satuan vw adalah satu persen lebar viewport, jadi kemiringan dikali 100 memberi suku yang mengikuti jendela.
Kedua lebar viewport dan kedua ukuran dihitung dalam piksel sebelum kemiringan dicari. Nilai rem dikali dengan ukuran font akar, sehingga desain yang sama memberi hasil yang sama dalam rem atau px jika akarnya 16 px.
- Jaga agar ukuran terbesar sama dengan atau lebih besar dari yang terkecil. Alat menolak ukuran terbesar yang lebih kecil, karena garis seperti itu akan menyusut ketika layar membesar.
- Suku vw tidak mengikuti pengaturan ukuran teks pengunjung, tetapi intersep rem mengikutinya. Uji halaman pada zoom 200 persen, dan simpan intersep dalam rem jika memungkinkan.
Contoh: font dari 16 px sampai 24 px
Antara viewport 320 px dan viewport 1200 px, font tumbuh dari 16 px menjadi 24 px. Kemiringannya adalah (24 - 16) / (1200 - 320) = 8 / 880, yaitu 0,0091 sampai empat desimal. Intersepnya adalah 16 - 0,0091 × 320 = 13,0909 px, dan suku viewport-nya adalah 0,9091 vw.
Nilainya adalah clamp(16px, 13,0909px + 0,9091vw, 24px), sehingga deklarasi CSS-nya adalah font-size: clamp(16px, 13,0909px + 0,9091vw, 24px);. Dengan satuan rem, 1rem sampai 1,5rem antara 20rem dan 75rem dan akar 16 px memberi clamp(1rem, 0,8182rem + 0,9091vw, 1,5rem).
Pertanyaan yang sering diajukan
Apa yang terjadi pada ukuran jika viewport lebih sempit dari lebar terkecil?
Ukuran tetap pada ukuran terkecil. Formula clamp() tidak pernah membiarkan nilai turun di bawah minimumnya, sehingga teks mempertahankan ukuran yang Anda atur untuk lebar paling sempit.
Mengapa bagian viewport ditulis dalam vw?
Satuan vw adalah satu persen lebar viewport, sehingga ia berubah ketika ukuran jendela peramban berubah. Nilai piksel atau rem tidak berubah mengikuti jendela, sehingga ukuran tidak bisa mengikutinya.
Mengapa kode kadang menulis bagian vw lebih dulu?
Ketika intersep negatif, kode menulis bagian vw lebih dulu lalu mengurangkan intersep, yang lebih jelas dibaca. Kedua bentuk itu memberi nilai yang sama.
Bisakah saya memakai nilai ini untuk padding, margin atau gap?
Bisa. Pilih padding, margin atau gap pada Properti. Garis yang sama berlaku untuk panjang apa pun, sehingga jarak bertambah mengikuti viewport dengan cara yang sama seperti ukuran font.
Peramban mana yang mendukung clamp()?
Semua peramban utama masa kini mendukung clamp(). Jika pengunjung Anda memakai versi lama, periksa halaman pada versi itu sebelum mengandalkan ukuran responsif.
Apakah yang saya masukkan disimpan atau dikirim ke server?
Tidak. Nilainya dihitung di peramban Anda, dan tidak ada yang Anda ketik yang disimpan atau dikirim ke server kami. Salin deklarasinya sebelum meninggalkan halaman.
Sumber
- W3C: CSS Values and Units Level 4, clamp() (dalam bahasa Inggris)
- W3C: CSS Values and Units Level 4, viewport-relative lengths (dalam bahasa Inggris)
- MDN: clamp() (dalam bahasa Inggris)
Angka dan teks terakhir diperiksa pada Selasa, 10 November 2026.