Pembatasan Tipografi Fluid
Menghasilkan skala font CSS linier antara dua lebar viewport.
Nilai masukan
Ekspresi pembatasan CSS
CSS yang dihasilkan adalah nilai awal. Lebih baik menggunakan satuan teks relatif jika sesuai dan uji zoom, penskalaan teks, dan luapan.
Perbandingan skenario
Hingga tiga cuplikan di tab ini. Memuat satu akan menggantikan input saat ini.
Rumus
Gunakan m = 100(f₁−f₀)/(v₁−v₀) dan b = f₀−mv₀/100. Ukuran fluid adalah clamp(f₀, b + m×vw, f₁); f menunjukkan ukuran font dan v menunjukkan lebar viewport.
Menghasilkan skala font CSS linier antara dua lebar viewport.
Contoh soal
- Ukuran font minimum (px)
- 16
- Ukuran font maksimum (px)
- 24
- Lebar viewport minimum (px)
- 400
- Lebar viewport maksimum (px)
- 1200
- Ekspresi pembatasan CSS
- clamp(16px, calc(12px + 1vw), 24px)
- Koefisien Viewport
- 1 vw
- Intersep Piksel
- 12 px
Cakupan dan batasan
CSS yang dihasilkan adalah nilai awal. Lebih baik menggunakan satuan teks relatif jika sesuai dan uji zoom, penskalaan teks, dan luapan.
Input diperiksa untuk nilai yang hilang dan rentang yang diizinkan. Hasil di luar rentang numerik terbatas tidak ditampilkan. Pembulatan memengaruhi tampilan, sementara perhitungan menggunakan presisi numerik model.
Periksa satuan dan asumsi Anda sebelum mengandalkan hasilnya. Mengubah label tidak mengkonversi mata uang atau satuan fisik.
Versi rumus: 174bffea8b3a · Contoh diperiksa: