CSS clamp() hesaplayıcı

Küçük bir ekranda istediğiniz boyutu, büyük bir ekranda istediğiniz boyutu ve aradaki iki viewport genişliğini girin. Araç, bu iki nokta arasında düz bir çizgi çizen clamp() değerini hesaplar ve boyutun yedi yaygın genişlikte ne çıktığını gösterir. Önizlemedeki örnek cümle gerçekten üretilen değerle biçimlendirilir, yani pencereyi yeniden boyutlandırdıkça değişir.

Verilerim bir yere yükleniyor mu?

Hayır. Buradaki her şey tarayıcınızda yapılan aritmetik. Girdiğiniz sayılar hiçbir zaman sunucuya gönderilmez. Üye olmanız gerekmez, hiçbir şey kayda geçmez ve sonucun arkasında bir ağ isteği yoktur.

Hesaplama nasıl çalışır?

CSS clamp() üç değer alır: bir minimum, bir tercih edilen değer ve bir maksimum. Tarayıcı tercih edilen değeri kullanır ama onun minimumun altına düşmesine ya da maksimumun üstüne çıkmasına izin vermez.

İlginç olan kısım tercih edilen değerdir. Bunun viewport ile birlikte büyüyen bir boyut olması gerekir, vw biriminin işi de tam olarak budur: 1vw, viewport genişliğinin yüzde biridir. 320px genişlikte 16px’ten 1280px genişlikte 48px’e gitmek için boyutun 960px’lik genişlik boyunca 32px artması gerekir, bu da piksel başına 0,0333px, yani 3,3333vw eder. Ancak sadece bu eğim yanlış boyutlara denk gelir, bu yüzden sabit bir ofset çizgiyi doğru yere kaydırır. Sonuç clamp(1rem, 0.3333rem + 3.3333vw, 3rem) şeklinde çıkar; ortadaki terimin iki parçadan oluşmasının sebebi de bu ofsettir.

Sayılar dört ondalık basamağa yuvarlanır ve sondaki sıfırlar atılır, böylece 1.5000rem yerine 1.5rem görürsünüz. Boyutlar piksel olarak girilir; çıktı birimini rem yaparsanız değerler kök yazı tipi boyutuna bölünür, bu da her tarayıcının varsayılan ayarında 16px’tir.

Sayılar mantıklı değilse ne olur?

Araç, sessizce yanlış bir şey üretmek yerine size haber verir. İki viewport genişliği aynıysa üzerinde ölçeklenecek bir aralık yoktur, bu durumda boyut sabit kalır ve vw terimi ortadan kalkar. Minimum ve maksimum boyutlar birbirine eşitse aynı sebepten aynı uyarıyı görürsünüz.

Dikkat edilmesi gereken durum, minimumun maksimumdan büyük olmasıdır. CSS clamp()’i max(MIN, min(VALUE, MAX)) olarak çözer, bu yüzden minimum kazanır ve boyut orada sabitlenip kalır. Tarayıcılar bunu sessizce yapar. Önizleme tablosu sabitlenen değeri gösterir ve bir uyarı bunu açıklar.

Bu nerede işe yarar?

Masaüstünde büyük, telefonda okunaklı olması gereken başlıklar; 375px’lik bir ekranda 8rem’de sabit kalmaması gereken bölüm dolguları; bir kart ızgarasındaki boşluklar ve her genişlikte alanını doldurması gereken hero metinleri.