CSS clamp() Oluşturucu

CSS clamp() Oluşturucu nedir?

CSS clamp() Oluşturucu, ön uç geliştiriciler ve tasarımcılar için ücretsiz bir akışkan tipografi hesaplayıcısıdır. Ona bir minimum yazı tipi boyutu, bir maksimum yazı tipi boyutu, bir minimum görünüm alanı genişliği ve bir maksimum görünüm alanı genişliği verirsiniz; tercih edilen değerin bir rem ofsetini bir vw eğimiyle harmanladığı bir clamp(min, tercih edilen, maks) bildirimi döndürür; böylece metin ekranla birlikte doğrusal olarak büyür ve sınırlarınızdan asla taşmaz. Bu, üst üste yığılmış font-size medya sorgularına olan ihtiyacı ortadan kaldırır ve başlıkları ile gövde metnini her cihazda duyarlı tutar. Değerin nasıl işlendiğini görmek için bir önizleme boyutu seçin, çıktı birimini rem ile px arasında değiştirin ve satırı doğrudan stil sayfanıza kopyalayın.

CSS clamp() Oluşturucu nasıl kullanılır

1. Minimum yazı tipi boyutunu girin — metnin en küçük ekranda olması gereken boyut.
2. Maksimum yazı tipi boyutunu girin — metnin en büyük ekranda ulaşması gereken boyut.
3. Boyutun ölçekleneceği minimum ve maksimum görünüm alanı genişliklerini ayarlayın.
4. İsterseniz çıktı birimini değiştirmek için ayarları açın (rem erişilebilirliği korur; px de mevcuttur).
5. O görünüm alanında örnek metin işlemek için bir önizleme boyutu seçin, ardından canlı clamp() değerini okuyun.
6. Oluşturulan clamp() ifadesini kopyalayın ve CSS font-size değerinize yapıştırın.

Örnekler

min font 16, maks font 20, min vw 320, maks vw 1240

font-size: clamp(1rem, 0.913rem + 0.435vw, 1.25rem);

min font 32, maks font 64, min vw 320, maks vw 1536

font-size: clamp(2rem, 1.474rem + 2.632vw, 4rem);

min font 12, maks font 14, min vw 480, maks vw 1280

font-size: clamp(0.75rem, 0.675rem + 0.25vw, 0.875rem);

Sıkça sorulan sorular

clamp() değeri medya sorguları olmadan nasıl ölçeklenir?

clamp(min, tercih edilen, maks) bir alt sınır, bir tercih edilen (akışkan) değer ve bir üst sınır alır. Tercih edilen değer, yazı tipinin minimum görünüm alanında minimumunuza ve maksimum görünüm alanında maksimumunuza eşit olması için hesaplanan rem + vw biçiminde bir doğrudur. Bu genişlikler arasında tarayıcı otomatik olarak interpolasyon yapar, dışında ise clamp() boyutu en yakın sınıra sabitler — hepsi tek bir bildirimde.

Çıktı neden px yerine rem'de?

Sabit kısımlar için rem kullanmak, kullanıcının tarayıcı yazı tipi boyutu ayarına saygı gösterir ve bu erişilebilirlik için daha iyidir. Görünüm alanına bağlı eğim vw cinsinden ifade edilir. Projeniz mutlak birimlere ihtiyaç duyuyorsa birimi ayarlardan px'e değiştirebilirsiniz, ancak önerilen varsayılan rem'dir.

Hangi görünüm alanı aralığını kullanmalıyım?

Yaygın bir seçim, minimum için desteklediğiniz en küçük genişlik (genellikle 320px veya 360px) ve maksimum için en geniş içerik kapsayıcınızdır (örneğin 1240px–1536px). Yazı tipi yalnızca bu aralık içinde tamamen akışkandır; altında metin minimumda, üstünde maksimumda kalır.

Bu yalnızca font-size için değil, herhangi bir CSS uzunluğu için çalışır mı?

Evet. Oluşturulan clamp() değeri yalnızca bir uzunluktur, bu yüzden onu padding, margin, gap veya uzunluk kabul eden herhangi bir özelliğe yapıştırabilirsiniz. Etiketler font-size'dan bahseder çünkü akışkan tipografi en yaygın kullanımdır, ancak matematik boşluklar için aynıdır.

Verilerim herhangi bir yere gönderiliyor mu?

Hayır. Hesaplama tamamen tarayıcınızda JavaScript ile çalışır — yazı tipi boyutlarınız ve görünüm alanı genişlikleriniz hiçbir sunucuya yüklenmez, böylece araç gizli bir şekilde ve sayfa yüklendikten sonra çevrimdışı bile çalışır.