Kalkulator CSS clamp()

Tentukan ukuran untuk viewport kecil dan ukuran untuk viewport besar. Anda akan mendapat clamp() yang berubah mulus di antara keduanya, dalam rem, sehingga tetap mengikuti ukuran font peramban pembaca.

Ukuran min (px)

pada viewport (px)

Ukuran font root (px)

Ukuran maks (px)

pada viewport (px)

Pratinjau pada lebar viewport

Viewport—

Ukuran hasil hitung—

Rubah cokelat gesit

Skala tipografi

Tingkat

Rasio

Mengapa rem, bukan px

Ukuran dalam px mengabaikan ukuran font yang dipilih pembaca di perambannya. Deklarasi yang sama dalam rem ikut menyesuaikan, jadi orang yang menyetel bawaan 20px mendapat teks lebih besar, bukan 16px yang Anda patok. Bagian viewport tetap memakai vw dalam kedua kasus — itu soal lebar layar, bukan preferensi pembaca.

Pertanyaan Umum

Apa fungsi suku tengah?

Ini garis lurus yang melewati kedua titik Anda: sebuah intersep ditambah kemiringan dalam vw. Di bawah viewport kecil nilainya terkunci pada minimum, dan di atas viewport besar terkunci pada maksimum.

Bisakah maksimum lebih kecil dari minimum?

Bisa, dan clamp() tetap bekerja — tetapi hasilnya mengecil saat layar membesar, yang hampir tidak pernah diinginkan. Halaman ini akan memberi tahu Anda saat hal itu terjadi.

Adakah yang dikirim ke server Anda?

Tidak. Ini aritmetika di peramban Anda; apa pun yang Anda ketik tidak keluar dari halaman.

Dibuat oleh tim GO AI. Semua alat gratis