Tasarım / Duyarlılık
Akışkan Tipografi ve Boşluklar için CSS Clamp() Oluşturucu
En küçük ve en büyük boyutu ve bunların uygulanacağı görünüm alanı genişliklerini girin; aralarında akıcı biçimde ölçeklenen rem cinsinden bir clamp() ifadesi ve yaygın ekran genişliklerindeki boyutları gösteren bir tablo alın.
Akışkan Tipografi ve Boşluklar için CSS Clamp() Oluşturucu: Araç, iki nokta arasına düz bir çizgi çizer: 320 px görünüm alanında 16 px'ten 1280 px görünüm alanında 24 px'e kadar boyut, genişlikteki her 100 px artış için 0,8333 px büyür. Çizgi, sabit bir rem bölümü ile bir vw bölümünün toplamı olarak yazılır: 0.8333rem + 0.8333vw. clamp() ise bu aralığın dışında değeri 1rem ile 1.5rem arasında tutar. Sunucuya hiçbir dosya yüklenmeden tarayıcınızda %100 yerel olarak çalışır.
- Kategori
- Geliştirici araçları
- Çalıştırma sayısı
- Tarayıcınızda
- Maliyet
- Ücretsiz · kayıt gerekmez
- Kullanılabilirlik
- Kullanıma hazır
Tamamen tarayıcınızda çalışır
CSS
font-size: clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem);
| Görünüm alanı genişliği | Boyut |
|---|---|
| 320 px | 16 px |
| 375 px | 16,46 px |
| 768 px | 19,73 px |
| 800 px | 20 px |
| 1024 px | 21,87 px |
| 1280 px | 24 px |
| 1440 px | 24 px |
| 1920 px | 24 px |
clamp() işlevinin orta değeri, verdiğiniz iki noktadan geçen düz bir çizgidir: görünüm alanı genişliğinin belirli bir payına sabit bir rem miktarı ekler. Böylece boyut, iki genişlik arasında akıcı biçimde ölçeklenir ve bu sınırların dışında limitlerde durur. Sabit kısımda rem kullanılması, boyutun okuyucunun kendi yazı tipi boyutu ayarına duyarlı kalmasını sağlar. Yazı tipi boyutları, iç dolgular, boşluklar veya dış kenar boşlukları gibi her uzunlukta çalışır.
Uygulamalı örnek
375 px'lik bir telefonda 32 px ve 1440 px'lik bir masaüstünde 48 px olan bir başlık için eğim 16 ÷ 1065 = 1,5023 px / 100 px'tir ve ifade clamp(2rem, 1.6479rem + 1.5023vw, 3rem) olur. 800 px'lik bir tablette başlık 38,38 px olur.
Erişilebilirlik
WCAG, metnin %200'e kadar büyütülebilmesini ister. Akışkan boyutun bir bölümü görünüm alanına bağlı olduğundan, çok dik eğimler yakınlaştırmanın metni çok daha büyük yapmasını engelleyebilir; en büyük boyutu en küçüğün yaklaşık 2,5 katından fazla yapmayın ve tutarlı adımlar seçmek için yazı ölçeği oluşturucuyu kullanın.
Nasıl kullanılır?
- En küçük ve en büyük boyutu px cinsinden girin.
- Bunların uygulanacağı görünüm alanı genişliklerini girin.
- clamp() değerini kopyalayın ve tablodaki boyutları kontrol edin.
Gizlilik ve sınırlamalar
Tarayıcıda hesaplanır.
İlgili araçlar
Sık sorulan sorular
Neden yalnızca vw kullanmamalıyım?
Yalnızca vw cinsinden bir boyut, okuyucunun yazı tipi boyutu ayarını dikkate almaz; telefonlarda çok küçük, geniş ekranlarda ise çok büyük olabilir. clamp() içindeki rem bölümü ve sınırlar bu iki sorunu da düzeltir.
clamp() her yerde çalışır mı?
Evet: güncel tüm tarayıcılar clamp() işlevini 2020'den beri desteklemektedir.
Daha geniş ekranlarda boyut küçülebilir mi?
Evet: daha büyük bir en küçük genişlik boyutu girin; ifade bunun yerine vw bölümünü çıkarır.
Ücretsiz araç · tarayıcınızda kez çalıştırma · hesap gerekmez