Kalkulator CSS clamp()

Beri satu ukuran pada viewport kecil dan satu pada yang besar. Anda mendapat clamp() yang bergerak mulus di antara keduanya, dalam rem, sehingga tetap menghormati ukuran font peramban pembaca.

Viewport
Ukuran terhitung

Rubah cokelat gesit

Skala tipografi

Kenapa 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 16 yang Anda patok. Suku viewport tetap dalam vw bagaimanapun — itu soal lebar layar, bukan preferensi pembaca.

Pertanyaan Umum

Suku tengah itu melakukan apa?

Ini garis lurus melalui dua titik Anda: sebuah intersep ditambah kemiringan dalam vw. Di bawah viewport kecil nilainya terkunci di minimum, di atas yang besar di 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 memberi tahu bila 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 perkakas gratis