Pembuat CSS clamp
Masukkan lebar layar dan ukuran untuk layar kecil dan layar besar untuk membuat CSS yang mengubah ukuran teks atau jarak secara halus. Pratinjau keluaran px atau rem, lalu salin kode CSS dan Tailwind atau simpan sebagai teks.
Yang dapat Anda lakukan
Tentukan 2 pasangan lebar dan ukuran
Tentukan ukuran untuk viewport kecil dan viewport besar. Mendukung 6 jenis: ukuran font, jarak, padding, margin, lebar, dan tinggi.
Buat kode dalam px atau rem
Masukkan semua nilai dalam px, dan pilih px atau rem untuk keluaran. Dapatkan deklarasi CSS dan kode properti arbitrer Tailwind.
Periksa CSS yang dibuat langsung
Menerapkan CSS pada dua elemen di pratinjau. Periksa bagaimana teks dan spasi tampil pada lebar bingkai saat ini.
Cara penggunaan
Pilih properti yang akan diubah
Pilih properti CSS yang ingin Anda tentukan, misalnya font-size untuk ukuran teks atau gap untuk jarak antar elemen.
Masukkan dua lebar viewport beserta ukurannya
Masukkan masing-masing dari dua lebar viewport beserta ukurannya dalam px. Ukuran untuk viewport yang lebih kecil tidak boleh lebih besar daripada ukuran untuk viewport yang lebih besar.
Periksa satuan keluaran lalu buat
Pilih px atau rem di pengaturan lanjutan. Untuk rem, periksa juga ukuran font dasar sebelum menekan “Buat CSS”.
Pratinjau dan ambil kodenya
Salin CSS lalu tempel di tempat Anda akan memakainya. Buka kode Tailwind untuk mengambilnya. Anda juga dapat menyalin kedua item sekaligus atau menyimpannya sebagai teks.
Berguna ketika
Ubah ukuran judul dengan halus
Saat Anda ingin mengatur ukuran teks untuk viewport sempit dan lebar serta mengubahnya secara bertahap di antara kedua lebar tersebut.
Sesuaikan spasi dengan viewport
Saat Anda ingin jarak kartu atau padding bagian dalam berubah antara ukuran minimum dan maksimum yang Anda tentukan.
Menentukan ukuran fluida dan membaca pratinjau
Tiga nilai dalam clamp
clamp adalah fungsi CSS yang menentukan nilai minimum, nilai fluida, dan nilai maksimum. Rumus yang dibuat menghubungkan dua titik acuan dengan ungkapan linear dan membatasi ukuran di luar rentang pada ukuran batasnya.
Input dalam px; keluaran dalam px atau rem
Kedua lebar viewport dan ukurannya dimasukkan dalam px. Untuk keluaran rem, ukuran dan suku tetap dibagi ukuran font dasar, sedangkan koefisien vw untuk lebar viewport dipakai apa adanya.
Samakan basis rem dengan tempat kode ini dipakai
Secara bawaan, kode menganggap 1rem sebagai 16px. Jika ukuran font elemen akar berbeda di tempat kode ini dipakai, ukuran batas dan cara ukuran berubah juga akan berbeda. Periksa di tempat Anda memakainya.
Lebar viewport ditentukan oleh bingkai pratinjau
Pratinjau ini adalah bingkai tampilan tersendiri. Pratinjau menghitung vw dari lebar di dalam bingkai, bukan lebar seluruh layar. Tergantung properti, CSS yang sama diterapkan pada teks, jarak antara kedua elemen, spasi, atau dimensi elemen.
Periksa juga tempat kode ini dipakai
Teks dan struktur pratinjau bersifat tetap. Periksa juga font, teks panjang, pemenggalan baris, dan pembesaran teks browser di tempat Anda memakai kode ini. Kode Tailwind memakai format properti arbitrer; pastikan juga bahwa format itu terdeteksi dan dibuat di tempat Anda memakainya.
Pertanyaan yang sering diajukan
Apa yang terjadi di luar rentang lebar viewport yang ditentukan?
Lebar yang lebih kecil dari lebar viewport minimum yang ditentukan memakai ukuran minimum, sedangkan lebar yang lebih besar dari lebar maksimum memakai ukuran maksimum. Untuk rem, Anda harus memakai ukuran font dasar yang sama seperti saat kode dibuat.
Apa ukuran font dasar untuk rem?
Ini menentukan berapa px yang dipakai untuk menghitung 1rem. Nilai bawanya adalah 16px, dan Anda dapat mengubahnya menjadi 1–1000px di pengaturan lanjutan. Samakan dengan ukuran font elemen akar tempat Anda akan memakai kode ini.
Bisakah saya menentukan ukuran yang sama atau nilai negatif?
Atur nilai minimum dan maksimum sama untuk ukuran konstan. Nilai negatif hanya diperbolehkan untuk margin. Ukuran yang mengecil seiring melebar viewport tidak didukung.
Apakah perubahan pada properti atau nilai langsung diterapkan?
Mengubahnya akan menghapus kode dan pratinjau yang sudah dibuat. Tekan “Buat CSS” untuk memperbaruinya. Hal yang sama berlaku bila Anda mengubah satuan keluaran atau ukuran font dasar.
Bisakah saya mengubah teks pratinjaunya?
Teks contoh dan Aa 123 keduanya bersifat tetap. Tidak ada fitur pengeditan teks. Periksa juga teks dan lebar tampilan sebenarnya di halaman yang memakai CSS hasil ini.
Input dan hasil
- Lebar viewport
- 1–100000px. Lebar viewport yang lebih kecil harus lebih kecil daripada yang lebih besar. Angka desimal juga diterima.
- Ukuran
- 0–10000px. Hanya margin yang bisa turun hingga −10000px. Ukuran untuk viewport yang lebih kecil tidak boleh lebih besar daripada ukuran untuk viewport yang lebih besar.
- Keluaran
- Satu deklarasi CSS dan satu properti arbitrer Tailwind. Simpan kedua item sebagai css-clamp-generator.txt.
- Presisi
- Rumus yang dibuat memakai koefisien dengan hingga 13 digit signifikan. Terjadi kesalahan jika lebar terlalu berdekatan sehingga rumus yang dibulatkan tidak dapat mereproduksi titik acuan.