Kategori: Alat pengembang
Generator Skala Jarak Cair
Bangun sekumpulan token jarak berbasis clamp()
Berikan ukuran jarak dasar pada viewport sempit dan lebar plus rasio skala, lalu dapatkan sekumpulan lengkap custom property --space-*, masing-masing clamp()-nya sendiri yang berskala mulus di antara keduanya, siap ditempel ke :root.
| Token | Keluaran |
|---|---|
| --space-3xs | clamp(0.0988rem, 0.0601rem + 0.1718vw, 0.1975rem) |
| --space-2xs | clamp(0.1481rem, 0.0902rem + 0.2576vw, 0.2963rem) |
| --space-xs | clamp(0.2222rem, 0.1353rem + 0.3865vw, 0.4444rem) |
| --space-sm | clamp(0.3333rem, 0.2029rem + 0.5797vw, 0.6667rem) |
| --space-md | clamp(0.5rem, 0.3043rem + 0.8696vw, 1rem) |
| --space-lg | clamp(0.75rem, 0.4565rem + 1.3043vw, 1.5rem) |
| --space-xl | clamp(1.125rem, 0.6848rem + 1.9565vw, 2.25rem) |
| --space-2xl | clamp(1.6875rem, 1.0272rem + 2.9348vw, 3.375rem) |
| --space-3xl | clamp(2.5313rem, 1.5408rem + 4.4022vw, 5.0625rem) |
:root {
--space-3xs: clamp(0.0988rem, 0.0601rem + 0.1718vw, 0.1975rem);
--space-2xs: clamp(0.1481rem, 0.0902rem + 0.2576vw, 0.2963rem);
--space-xs: clamp(0.2222rem, 0.1353rem + 0.3865vw, 0.4444rem);
--space-sm: clamp(0.3333rem, 0.2029rem + 0.5797vw, 0.6667rem);
--space-md: clamp(0.5rem, 0.3043rem + 0.8696vw, 1rem);
--space-lg: clamp(0.75rem, 0.4565rem + 1.3043vw, 1.5rem);
--space-xl: clamp(1.125rem, 0.6848rem + 1.9565vw, 2.25rem);
--space-2xl: clamp(1.6875rem, 1.0272rem + 2.9348vw, 3.375rem);
--space-3xl: clamp(2.5313rem, 1.5408rem + 4.4022vw, 5.0625rem);
}Setiap token adalah clamp()-nya sendiri, jadi setiap langkah berskala mulus di antara kedua lebar viewport.
Semua yang ada di halaman ini diproses di peramban Anda. Tidak ada yang diunggah.
Apa fungsi alat ini
Satu clamp() cair saja berguna untuk satu nilai, tetapi kebanyakan tata letak butuh seluruh skala langkah jarak yang konsisten, dan menulis clamp() satu per satu secara manual melipatgandakan kesalahan hitung yang sama di setiap token. Alat ini mengambil satu ukuran dasar di tiap ujung rentang viewport Anda dan sebuah rasio, lalu menghasilkan skala token yang simetris di sekitar langkah tengah dengan cara yang sama seperti skala tipografi dibangun, sehingga seluruh kumpulannya tetap konsisten secara proporsional saat viewport berubah.
Cara memakainya
- Atur ukuran jarak dasar pada lebar viewport sempit dan lebar Anda.
- Atur rasio skala di antara langkah-langkahnya.
- Salin blok :root berisi custom property --space-* yang dihasilkan.
Privasi
Alat ini berjalan sepenuhnya di peramban Anda. Masukan Anda tidak pernah diunggah, disimpan, atau dibagikan — menutup tab akan menghapusnya.
Pertanyaan yang sering diajukan
- Kenapa sembilan langkah?
- Sembilan memberi empat langkah di bawah dan di atas nilai tengah, yang mencakup sebagian besar tata letak mulai dari celah baris yang rapat sampai jarak antar-bagian yang besar tanpa perlu membuat nama tambahan nantinya.
- Apakah ada yang dikirim ke server?
- Tidak. Setiap clamp() dihitung di halaman dari angka yang Anda ketik, itu sebabnya tabel dan keluaran CSS-nya berubah seketika.
- Bisakah saya memakai ini bersama Generator CSS Clamp?
- Bisa. Alat ini membangun seluruh skala dari satu set input; Generator CSS Clamp dipakai untuk satu nilai tersendiri seperti ukuran judul, memakai matematika dasar yang sama.