Medya sorguları olmadan ölçeklenen metin
Telefonda 16 px, masaüstünde 32 px olan bir başlık eskiden iki üç kırılma noktası gerektirirdi. clamp() ile tek satır yeter: boyut, bir taban ile bir tavan arasında ekranla birlikte yumuşakça büyür. Zor kısım ortadaki değerdir; sabit bir boyut ile ekran genişliğinin bir yüzdesinin karışımıdır. Bu oluşturucu, önem verdiğiniz iki boyuttan bunu hesaplar ve çıkan değeri doğrudan CSS dosyanıza yapıştırabileceğiniz biçimde verir.
Dört adımda clamp() değeri alın
- En küçük ve en büyük boyutu girin, örneğin 16 ve 32.
- Her birinin geçerli olduğu ekran genişliklerini girin, örneğin 320 ve 1280 piksel.
- px veya rem seçin; sitenizde kök yazı boyutu değişiyorsa 1rem içindeki pikseli de girin. Hazır bir bildirim için CSS özelliğini seçin.
- Değeri ya da bildirimi kopyalayın. Tablo ve kaydırıcı, aradaki her genişlikteki boyutu gösterir.
clamp()'in üç parçası ne yapar
Sonuç clamp(1rem, 0.6667rem + 1.6667vw, 2rem) gibi görünür. İlk değer özelliğin alabileceği en küçük boyuttur, son değer en büyük boyuttur, ortadaki ise aralarındaki çizgidir. Araç eğimi, boyut farkının genişlik farkına bölümünden; sabit kısmı ise bu çizginin sıfır ekran genişliğini kestiği noktadan hesaplar. Boyut büyük ekranlarda küçülecekse araç küçük değeri başa koyar; çünkü clamp() her zaman önce en küçük değeri bekler.
rem kullanmak yakınlaştırmanın çalışmasını sağlar
rem cinsinden boyutlar, ziyaretçinin tarayıcıda belirlediği yazı boyutunu izler; px değerleri izlemez. Salt vw boyutu yakınlaştırma ayarını tamamen yok sayar; bu da erişilebilirlik denetimlerinde başarısızlığa yol açabilir. Bu aracın rem boyutları için yaptığı gibi vw kısmına bir rem kısmı katmak, metni yakınlaştırılabilir tutar. Tasarımınızı %200 yakınlaştırmada deneyin ve en büyük boyutu en küçüğün yaklaşık iki buçuk katından fazla yapmayın; aksi hâlde yakınlaştırılmış metin beklenen kadar büyümeyebilir.
Hiçbir şey tarayıcınızdan çıkmaz
Değerler sayfada hesaplanır. Oluşturucu hiçbir ağ isteği yapmaz ve hiçbir şey saklamaz. Bu yüzden henüz yayımlanmamış tasarım değerlerini de güvenle deneyebilirsiniz. Sayfayı kapattığınızda girdiğiniz değerler silinir; üretilen kod ise kopyaladığınız yerde kalır.