Kalkulator CSS clamp()

Masukkan ukuran untuk layar kecil dan besar, lalu dapatkan nilai clamp() dinamis yang berskala mulus di antaranya — cocok untuk ukuran font, padding, margin, atau gap.

Ukuran
Minimum
Maksimum
Nilai clamp()
clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem)

Hasil kalkulasi mempertahankan bagian rem di nilai tengahnya, sehingga ukuran teks tetap membesar saat pengguna melakukan zoom hingga 200% — hal yang tidak akan terjadi jika hanya menggunakan nilai viewport.

Pratinjau

Teks dinamis, ukuran pas di setiap layar.

Sesuaikan ukuran dan lebar layar untuk membentuk nilai clamp.

Kalkulasi ini berjalan sepenuhnya di browser Anda. Tidak ada data yang Anda masukkan di sini yang diunggah ke BroBroGo.

Tanya Jawab

Bagaimana kalkulator ini menyusun nilai clamp()?

Anda menentukan dua titik acuan: ukuran pada lebar layar kecil dan ukuran pada lebar layar besar. Kalkulator ini akan menarik garis lurus di antara keduanya sehingga ukuran tumbuh secara mulus seiring bertambahnya lebar layar, lalu membungkusnya dalam fungsi clamp() agar nilainya tidak pernah turun di bawah batas layar kecil atau melebihi batas layar besar Anda. Di antara kedua lebar tersebut, ukurannya akan berskala secara dinamis (fluid); di luar itu, ukurannya akan tertahan pada batas terdekat.

Mengapa hasilnya menggunakan rem dan vw, bukan piksel?

Batas ukuran menggunakan rem dan bagian tengah yang dinamis mempertahankan komponen rem, sehingga teks tetap membesar saat pembaca memperbesar halaman atau mengubah ukuran font default browser mereka — hal yang tidak akan berfungsi jika hanya menggunakan piksel atau viewport. Anda memasukkan ukuran dalam piksel karena lebih mudah dipahami, dan alat ini akan mengonversinya ke rem berdasarkan ukuran font root Anda.

Apakah saya bisa menggunakan ini untuk jarak (spacing), bukan hanya ukuran font?

Ya. Nilai yang sama dapat digunakan untuk padding, margin, gap, width, atau height — di mana pun nilai panjang digunakan. Ubah mode pratinjau ke Kotak untuk melihat perubahan jarak ruang, bukan teks. Jika ukuran kecil dan besar Anda sama, hasilnya akan disederhanakan menjadi nilai panjang tetap biasa karena tidak ada yang perlu diskalakan.

Apakah semua browser mendukung fungsi clamp()?

Ya — semua browser modern telah mendukung clamp() sejak tahun 2020, sehingga Anda dapat langsung menggunakan nilai ini tanpa perlu fallback. Jika Anda menetapkan nilai maksimum yang sangat besar atau laju perubahan yang cepat, sebaiknya lakukan pemeriksaan cepat pada zoom 200% untuk memastikan teks tetap membesar bagi pembaca yang membutuhkannya.

Ditulis dan ditinjau oleh tim editorial BroBroGo.Terakhir diperbarui:

Memahami CSS clamp() dalam Desain Responsif

Fungsi clamp() dalam CSS merupakan solusi modern untuk menciptakan elemen tata letak yang responsif tanpa perlu menulis banyak aturan @media query. Fungsi ini menerima tiga parameter: nilai minimum, nilai dinamis (atau nilai ideal), dan nilai maksimum. Dengan format clamp(MIN, VAL, MAX), browser akan menjaga agar ukuran elemen tidak pernah turun di bawah batas minimum (MIN) dan tidak pernah melebihi batas maksimum (MAX), sementara di antara kedua batas tersebut ukurannya akan berubah secara dinamis (VAL) mengikuti lebar layar.

Kalkulator CSS clamp() dirancang untuk menghitung fungsi matematika ini secara otomatis. Anda cukup menentukan ukuran yang diinginkan pada layar kecil dan ukuran pada layar besar, serta lebar dari kedua layar tersebut. Alat ini kemudian menghasilkan fungsi clamp() yang presisi untuk digunakan pada berbagai properti panjang CSS, seperti ukuran font (font-size), jarak dalam (padding), jarak luar (margin), celah antar-elemen (gap), lebar (width), atau tinggi (height).

Cara Kerja Kalkulasi dan Interpolasi Linear

Untuk menghasilkan transisi ukuran yang mulus di antara dua titik layar, kalkulator ini menggunakan metode interpolasi linear. Proses ini memetakan hubungan antara perubahan ukuran elemen dan perubahan lebar layar.

Kalkulator mengonversi input piksel (px) yang Anda masukkan menjadi satuan rem berdasarkan ukuran font root yang Anda tentukan. Rumus matematika di balik kalkulator ini membagi selisih ukuran target dengan selisih lebar layar untuk mendapatkan rasio unit viewport (vw). Hasil akhirnya adalah kombinasi antara nilai dasar dalam rem dan nilai dinamis dalam vw.

Sebagai contoh, jika Anda memasukkan parameter tertentu, kalkulator dapat menghasilkan output seperti:

clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem)

Di sini, 1rem bertindak sebagai batas bawah pada layar kecil, 1.5rem sebagai batas atas pada layar besar, dan 0.8333rem + 0.8333vw adalah bagian tengah dinamis yang memastikan ukuran bergeser secara linear dan mulus saat lebar layar berubah.

Parameter Input dan Validasi Nilai

Untuk menghasilkan nilai kalkulasi yang akurat, alat ini membutuhkan beberapa parameter input angka yang valid:

  • Ukuran font root: Nilai piksel yang digunakan sebagai basis untuk mengonversi input piksel menjadi satuan rem.
  • Minimum (Layar Kecil):
    • Ukuran: Ukuran elemen yang diinginkan pada lebar layar minimum.
    • Lebar layar: Batas lebar layar terkecil untuk menghentikan penyusutan ukuran.
  • Maksimum (Layar Besar):
    • Ukuran: Ukuran elemen yang diinginkan pada lebar layar maksimum.
    • Lebar layar: Batas lebar layar terbesar untuk menghentikan pertumbuhan ukuran.

Alat ini menerapkan aturan validasi yang ketat untuk memastikan kode CSS yang dihasilkan valid:

  1. Setiap kolom input harus diisi dengan angka yang valid. Jika tidak, sistem akan menampilkan pesan kesalahan "Masukkan angka yang valid di setiap kolom.".
  2. Lebar layar kecil harus berupa angka positif yang lebih kecil daripada lebar layar besar. Jika aturan ini dilanggar, kalkulator akan menampilkan output — disertai pesan kesalahan "Lebar layar kecil harus berupa angka positif yang lebih kecil daripada lebar layar besar.".

Status Skala dan Pratinjau Visual

Selama Anda menyesuaikan angka pada input, kalkulator akan memberikan umpan balik instan mengenai karakteristik skala yang terbentuk:

  • Sesuaikan ukuran dan lebar layar untuk membentuk nilai clamp.: Pesan status awal saat Anda mulai mengatur konfigurasi.
  • skala dinamis (fluid): Menunjukkan bahwa ukuran elemen saat ini berada di antara batas minimum dan maksimum, serta sedang berubah secara aktif mengikuti lebar viewport.
  • tertahan di batas minimum: Menunjukkan bahwa lebar area pratinjau berada di bawah batas layar kecil Anda, sehingga ukuran elemen dikunci pada nilai minimum.
  • tertahan di batas maksimum: Menunjukkan bahwa lebar area pratinjau berada di atas batas layar besar Anda, sehingga ukuran elemen dikunci pada nilai maksimum.
  • Skala terbalik — ukuran mengecil saat layar membesar.: Muncul jika Anda menetapkan ukuran minimum yang lebih besar daripada ukuran maksimum, yang berarti elemen akan menyusut seiring melebarnya layar.
  • Kedua ukuran sama, sehingga ini menghasilkan nilai tetap, bukan dinamis.: Jika ukuran kecil dan besar yang Anda masukkan sama, fungsi clamp() tidak diperlukan dan kalkulator akan menyederhanakannya menjadi nilai panjang tetap biasa.

Anda dapat melihat simulasi ini secara langsung melalui area pratinjau yang dilengkapi dengan indikator "Lebar pratinjau". Pratinjau dapat dialihkan antara mode "Teks" (menampilkan kalimat "Teks dinamis, ukuran pas di setiap layar.") dan mode "Kotak" untuk memvisualisasikan perubahan ruang atau dimensi fisik.

Aksesibilitas dan Penggunaan Satuan rem

Salah satu aspek terpenting dalam desain web modern adalah aksesibilitas (accessibility). Menggunakan unit viewport murni seperti vw untuk ukuran font sangat tidak disarankan karena teks tidak akan membesar ketika pengguna menggunakan fitur zoom browser atau mengubah ukuran font default di sistem operasi mereka.

Kalkulator ini mengatasi masalah tersebut dengan memastikan bahwa batas ukuran menggunakan rem dan bagian tengah yang dinamis tetap mempertahankan komponen rem. Dengan metode ini, teks tetap dapat membesar hingga 200% saat pengguna melakukan zoom, memenuhi standar aksesibilitas tanpa merusak struktur responsif tata letak Anda.

Pemrosesan Data dan Privasi

Keamanan data Anda sepenuhnya terjaga saat menggunakan alat ini. Kalkulasi ini berjalan sepenuhnya di browser Anda. Tidak ada data yang Anda masukkan di sini yang diunggah ke BroBroGo. Semua proses konversi piksel ke rem serta kalkulasi rumus linear dilakukan secara lokal pada perangkat Anda sendiri.

Pertanyaan yang Sering Diajukan (FAQ)

Bagaimana kalkulator ini menyusun nilai clamp()? Anda menentukan dua titik acuan: ukuran pada lebar layar kecil dan ukuran pada lebar layar besar. Kalkulator ini akan menarik garis lurus di antara keduanya sehingga ukuran tumbuh secara mulus seiring bertambahnya lebar layar, lalu membungkusnya dalam fungsi clamp() agar nilainya tidak pernah turun di bawah batas layar kecil atau melebihi batas layar besar Anda. Di antara kedua lebar tersebut, ukurannya akan berskala secara dinamis (fluid); di luar itu, ukurannya akan tertahan pada batas terdekat.

Mengapa hasilnya menggunakan rem dan vw, bukan piksel? Batas ukuran menggunakan rem dan bagian tengah yang dinamis mempertahankan komponen rem, sehingga teks tetap membesar saat pembaca memperbesar halaman atau mengubah ukuran font default browser mereka — hal yang tidak akan berfungsi jika hanya menggunakan piksel atau viewport. Anda memasukkan ukuran dalam piksel karena lebih mudah dipahami, dan alat ini akan mengonversinya ke rem berdasarkan ukuran font root Anda.

Apakah saya bisa menggunakan ini untuk jarak (spacing), bukan hanya ukuran font? Ya. Nilai yang sama dapat digunakan untuk padding, margin, gap, width, atau height — di mana pun nilai panjang digunakan. Ubah mode pratinjau ke Kotak untuk melihat perubahan jarak ruang, bukan teks. Jika ukuran kecil dan besar Anda sama, hasilnya akan disederhanakan menjadi nilai panjang tetap biasa karena tidak ada yang perlu diskalakan.

Apakah semua browser mendukung fungsi clamp()? Ya — semua browser modern telah mendukung clamp() sejak tahun 2020, sehingga Anda dapat langsung menggunakan nilai ini tanpa perlu fallback. Jika Anda menetapkan nilai maksimum yang sangat besar atau laju perubahan yang cepat, sebaiknya lakukan pemeriksaan cepat pada zoom 200% untuk memastikan teks tetap membesar bagi pembaca yang membutuhkannya.

CSS Cubic Bezier GeneratorGeser kedua handle untuk membentuk kurva easing, saksikan pergerakan titik animasi dibanding gerakan konstan, lalu salin nilai cubic-bezier().Box Shadow GeneratorGeser slider untuk membentuk box-shadow, tumpuk beberapa lapisan untuk efek kedalaman, dan salin kode CSS instan.Gradient GeneratorBuat gradien linear, radial, atau conic, tambahkan color stops dan tentukan arahnya, lalu salin kode CSS dalam sekali klik.Border Radius GeneratorBulatkan setiap sudut dengan slider, buat bentuk blob organik dengan mode elips, dan salin CSS secara instan.Flexbox GeneratorAtur kontainer flex dan item di dalamnya dengan kontrol visual, lihat perubahan tata letak secara langsung, dan salin kode CSS dalam sekali klik.CSS Grid GeneratorAtur kolom dan baris Anda, seret kursor melewati sel untuk menempatkan item, lalu salin kode CSS grid beserta HTML yang cocok dalam sekali klik.CSS Beautifier & MinifierRapikan kembali CSS yang berantakan agar mudah dibaca, atau minify untuk memperkecil ukurannya — lengkap dengan mode aman yang tidak akan mengubah urutan aturan Anda.Konverter px ke rem & emKonversi antara px, rem, dan em menggunakan ukuran font root dan konteks Anda sendiri — cukup edit satu kolom dan dua kolom lainnya otomatis diperbarui.