Dokumentasi CSS interaktif: clamp()

Q: Apa fungsi clamp() di CSS?

clamp(MIN, PREFERRED, MAX) memakai nilai yang diinginkan selama nilainya tetap di antara dua batas, dan memakai batas terdekat jika tidak. font-size: clamp(1rem, 4vw, 2rem) mengikuti 4% lebar viewport, tetapi tidak pernah di bawah 1rem atau di atas 2rem.

Q: Apa yang terjadi jika nilai minimum lebih besar dari maksimum di clamp()?

Nilai minimum yang menang. clamp(3rem, 5vw, 2rem) selalu menghasilkan 3rem, karena clamp() menerapkan minimum setelah maksimum.

Q: Apa perbedaan min() dan max() di CSS?

min() mengembalikan nilai terkecil, jadi berperan sebagai batas atas: width: min(100%, 600px) tidak pernah lebih lebar dari 600px. max() mengembalikan nilai terbesar, jadi berperan sebagai batas bawah: font-size: max(1rem, 2vw) tidak pernah lebih kecil dari 1rem.

Q: Apakah clamp() didukung di semua browser?

Ya, clamp(), min(), dan max() berfungsi di semua versi terbaru Chrome, Edge, Firefox, dan Safari, dan bisa dipakai di properti apa pun yang menerima panjang, angka, persentase, atau sudut.

clamp() CSS: Ukuran Font Fluid, min(), dan max()

clamp(MIN, PREFERRED, MAX) mengembalikan nilai yang diinginkan, tetapi tidak pernah kurang dari MIN atau lebih dari MAX. Pelajari bagaimana clamp() membuat ukuran font dan jarak menjadi fluid tanpa media query, cara menghitung nilai tengahnya, dan hubungannya dengan min() dan max().

Halaman ini dilengkapi editor yang bisa dijalankan. Edit, jalankan, dan lihat output-nya seketika.

Oleh Kevin Spektor, Co-founder & CTO

Diterbitkan Sep 24, 2026

Fungsi clamp()

clamp(MIN, PREFERRED, MAX) menerima tiga nilai dan mengembalikan nilai tengahnya, selama nilai itu tetap di antara dua nilai lainnya. Penggunaan klasiknya adalah judul yang membesar mengikuti layar tetapi berhenti di batas yang masuk akal, tanpa media query:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>clamp</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    h1 {
      font-size: clamp(1.5rem, 1rem + 3vw, 3rem);
      margin: 0 0 8px;
      color: #111827;
    }
  </style>
</head>
<body>
  <h1>Fluid heading</h1>
  <p id="out"></p>
  <script>
    const show = () => {
      document.getElementById('out').textContent =
        'Preview width ' + innerWidth + 'px, heading font-size ' + getComputedStyle(document.querySelector('h1')).fontSize;
    };
    addEventListener('resize', show);
    show();
  </script>
</body>
</html>

Nilai yang diinginkan adalah 1rem + 3vw: 16px ditambah 3% dari lebar. Di pratinjau selebar 800px, hasilnya 16 + 24 = 40px, yang berada di antara 24px (1.5rem) dan 48px (3rem), jadi judulnya 40px. Di ponsel 320px, nilai yang diinginkan menjadi 25.6px. Di atas 1067px nilainya akan melebihi 48px, jadi berhenti di 48px. Ubah ukuran jendela untuk melihat angkanya berubah; vw di sini adalah persentase dari lebar bingkai pratinjau.

Lihat tanpa mengubah ukuran jendela

vw mengikuti viewport, yang tidak mudah kamu ubah sambil membaca. Satuan container query mengikuti sebuah container: cqi adalah 1% dari lebar container. Geser slider untuk mengubah kotaknya, dan clamp() sejenis langsung menyesuaikan:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>clamp with a slider</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    .box { container-type: inline-size; background: #e5e7eb; padding: 12px; margin-top: 10px; box-sizing: border-box; }
    .title { font-size: clamp(1.25rem, 0.5rem + 6cqi, 2.5rem); font-weight: 700; margin: 0; }
  </style>
</head>
<body>
  <label>box width <input id="w" type="range" min="200" max="760" value="480"></label>
  <div class="box" id="box"><p class="title">Resizable title</p></div>
  <p id="out"></p>
  <script>
    const box = document.getElementById('box');
    const title = document.querySelector('.title');
    const update = () => {
      box.style.width = document.getElementById('w').value + 'px';
      const size = parseFloat(getComputedStyle(title).fontSize);
      const note = size <= 20 ? ' (at MIN)' : size >= 40 ? ' (at MAX)' : ' (preferred value)';
      document.getElementById('out').textContent = 'box ' + box.offsetWidth + 'px: font-size ' + size.toFixed(1) + 'px' + note;
    };
    document.getElementById('w').addEventListener('input', update);
    update();
  </script>
</body>
</html>

Geser ke awal, dan judulnya berhenti di 20px (MIN). Geser ke ujung, dan judulnya berhenti di 40px (MAX). Di antara keduanya, judul mengikuti 0.5rem + 6cqi. Mekanismenya sama dengan versi vw, hanya dengan penggaris yang lebih kecil.

Ketiga argumen

font-size: clamp(1rem, 0.8rem + 1vw, 1.5rem);
/*               MIN   PREFERRED     MAX    */

Argumen	Peran	Satuan yang umum
MIN	nilai terkecil yang boleh dicapai	`rem`
PREFERRED	nilai yang berubah mengikuti layar	`rem + vw` (atau `cqi`)
MAX	nilai terbesar yang boleh dicapai	`rem`

Hitungan bisa ditulis di dalam setiap argumen tanpa menulis calc(): 1rem + 2vw sudah benar apa adanya. + dan - butuh spasi di kedua sisinya, kalau tidak seluruh deklarasinya tidak valid.

Jika MIN lebih besar dari MAX, MIN yang menang: clamp(3rem, 5vw, 2rem) selalu 3rem.

Menghitung nilai tengah

Untuk membesarkan font dari 16px di layar 320px menjadi 24px di layar 1280px:

Kemiringan: (24 − 16) ÷ (1280 − 320) = 8 ÷ 960 = 0.00833, yaitu 0.833vw (vw dihitung per 100px).
Titik awal: 16px − 0.00833 × 320px = 13.33px, yaitu 0.833rem.
Pasang batasnya di sekelilingnya:

font-size: clamp(1rem, 0.833rem + 0.833vw, 1.5rem);

Di lebar 320px hasilnya 13.33 + 2.67 = 16px, di 1280px hasilnya 13.33 + 10.67 = 24px, dan di luar rentang itu nilainya tetap di batas. "Clamp calculator" online melakukan persis aritmetika ini.

min() dan max()

clamp() adalah gabungan dari dua fungsi yang lebih sederhana:

min(a, b) mengembalikan nilai yang lebih kecil, jadi menetapkan batas atas.
max(a, b) mengembalikan nilai yang lebih besar, jadi menetapkan batas bawah.
clamp(MIN, VAL, MAX) sama dengan max(MIN, min(VAL, MAX)).

Namanya terasa terbalik pada awalnya: untuk mengatakan "paling banyak 600px", kamu memakai min().

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>min and max</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .card {
      width: min(100%, 420px);          /* full width, but at most 420px */
      padding: max(12px, 3%);           /* at least 12px */
      margin-bottom: 10px;
      background: #2563eb;
      color: white;
      box-sizing: border-box;
    }
    .narrow { width: 260px; }
  </style>
</head>
<body>
  <div class="card" id="a">In the full preview</div>
  <div class="narrow"><div class="card" id="b">In a 260px parent</div></div>
  <p id="out"></p>
  <script>
    document.getElementById('out').textContent = ['a', 'b'].map((id) => {
      const el = document.getElementById(id);
      return id + ': width ' + el.offsetWidth + 'px, padding ' + getComputedStyle(el).paddingTop;
    }).join('  |  ');
  </script>
</body>
</html>

Di pratinjau yang lebar, kartu pertama berhenti di 420px. Di dalam induk 260px, 100% adalah nilai yang lebih kecil, jadi kartu kedua lebarnya 260px. max(12px, 3%) memberi kartu pertama 3% dari lebar induknya (body: sekitar 23.5px di pratinjau 800px), dan kartu kedua 12px, karena 3% dari 260px (7.8px) berada di bawah batas bawah.

width: min(100%, 420px) menggantikan pasangan lama width: 100%; max-width: 420px; dalam satu deklarasi.

Lebih dari ukuran font: jarak dan lebar

clamp() berfungsi di properti apa pun yang menerima panjang. Persentase di nilai tengah membuat komponen menjadi fluid terhadap induknya, bukan terhadap viewport:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>clamp spacing</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    .parent { background: #e5e7eb; margin-bottom: 10px; }
    .card {
      width: clamp(200px, 80%, 520px);  /* 80% of the parent, within limits */
      padding: clamp(10px, 5%, 32px);   /* % padding is relative to the parent's width */
      box-sizing: border-box;
      background: #16a34a;
      color: white;
    }
  </style>
</head>
<body>
  <div class="parent" style="width: 300px"><div class="card">In a 300px parent</div></div>
  <div class="parent" style="width: 760px"><div class="card">In a 760px parent</div></div>
  <p id="out"></p>
  <script>
    document.getElementById('out').textContent = [...document.querySelectorAll('.card')]
      .map((c) => c.offsetWidth + 'px wide, padding ' + getComputedStyle(c).paddingTop).join('  |  ');
  </script>
</body>
</html>

Di induk 300px, kartunya selebar 240px (80%) dengan padding 15px (5% dari 300px). Di induk 760px, 80% akan menjadi 608px, jadi kartunya berhenti di maksimum 520px, dan 5% dari 760px adalah 38px, jadi padding-nya berhenti di 32px.

Aksesibilitas: pertahankan rem di nilai tengah

Ukuran font yang hanya terdiri dari vw, seperti font-size: 5vw, tidak membesar saat pembaca menaikkan ukuran font default di pengaturan browser, dan juga tidak membesar saat browser di-zoom, karena zoom membuat viewport lebih sempit dalam piksel CSS. Menambahkan bagian rem (1rem + 2vw) dan batas dalam rem membuat teks tetap terikat pada pengaturan pembaca. Halaman satuan menjelaskan rem dan vw secara rinci.

Kesalahan umum

Memakai min() untuk batas minimum. min() memilih nilai yang lebih kecil, yaitu batas atas. Untuk "paling sedikit 12px", pakai max(12px, ...).
Tanpa spasi di sekitar + atau -. clamp(1rem, 1rem+2vw, 3rem) tidak valid, dan propertinya kembali ke nilai sebelumnya.
Hanya vw di nilai tengah. Teksnya jadi mengabaikan pengaturan ukuran font pembaca. Tambahkan suku rem.
MIN lebih besar dari MAX. Hasilnya selalu MIN, yang jarang sekali dimaksudkan.
Batas dalam px untuk ukuran font. Batas ini membatasi teks bahkan untuk pembaca yang butuh teks lebih besar. Pakai rem.

Pertanyaan yang sering diajukan

Apa fungsi clamp() di CSS?

clamp(MIN, PREFERRED, MAX) memakai nilai yang diinginkan selama nilainya tetap di antara dua batas, dan memakai batas terdekat jika tidak. font-size: clamp(1rem, 4vw, 2rem) mengikuti 4% lebar viewport, tetapi tidak pernah di bawah 1rem atau di atas 2rem.

Bagaimana cara membuat ukuran font responsif dengan clamp?

Taruh nilai berbasis viewport di tengah dan batas tetap di kedua sisinya, lalu campurkan rem ke nilai tengah supaya teks tetap mengikuti pengaturan ukuran font pembaca: font-size: clamp(1.5rem, 1rem + 2vw, 3rem);.

Apa yang terjadi jika nilai minimum lebih besar dari maksimum di clamp()?

Nilai minimum yang menang. clamp(3rem, 5vw, 2rem) selalu menghasilkan 3rem, karena clamp() menerapkan minimum setelah maksimum.

Apa perbedaan min() dan max() di CSS?

min() mengembalikan nilai terkecil, jadi berperan sebagai batas atas: width: min(100%, 600px) tidak pernah lebih lebar dari 600px. max() mengembalikan nilai terbesar, jadi berperan sebagai batas bawah: font-size: max(1rem, 2vw) tidak pernah lebih kecil dari 1rem.

Apakah clamp() didukung di semua browser?

Ya, clamp(), min(), dan max() berfungsi di semua versi terbaru Chrome, Edge, Firefox, dan Safari, dan bisa dipakai di properti apa pun yang menerima panjang, angka, persentase, atau sudut.

Konsep terkait