CSS Clamp() Hesap Makinesi

CSS kelepçesi(MIN, PREFERRED, MAX), bir bildirimin tüm medya sorguları yığınının yerini almasına olanak tanır: değer, en küçük görünümün altındaki MIN'de, en büyüğünün üzerindeki MAX'ta kalır ve bu ikisi arasında sorunsuz bir şekilde ölçeklenir. İşin zor kısmı, hiç kimsenin elle türetmek istemeyeceği TERCİH EDİLEN terimdir (0,833rem + 0,833vw gibi görünüm alanına bağlı bir ifade). Bu hesaplayıcı, bunu dört sayıdan gerçek olarak hesaplar: minimum boyut, maksimum boyut ve her birinin geçerli olduğu görünüm genişliği.

Yalnızca son çizgi değil, her ara sayı gösterilir: eğim (görüntü alanının pikseli başına değerin kaç birim büyüdüğü), aynı eğimin vw katsayısı olarak ifade edilmesi ve y ekseni kesişimi — çizginin tam olarak belirttiğiniz iki noktadan geçmesi için vw terimine eklenen sabit. Bir öğreticiden bir kelepçe() değerini anlamadan yapıştıran herkes burada gerçek aritmetiği görebilir ve kontrol edebilir.

Görünüm alanı genişliği kaydırıcısı canlı bir önizleme kutusunu çalıştırır, böylece akışkan ölçeklendirme yalnızca hesaplanmakla kalmaz, görünür olur: minimum ve maksimum kesme noktaları arasında sürükleyin ve örnek metnin tam olarak gerçek bir tarayıcı penceresi yeniden boyutlandırılırken olduğu gibi yeniden boyutlandırılmasını izleyin. Her tuş vuruşunda çıktı satırı ve döküm güncellemesi; temel yazı tipi boyutunun da dönüştürülmesi gerektiğinde bu, doğal olarak pikselden rem'e dönüştürücüyle eşleşir.

Tek adımda eksiksiz bir akışkan tipografi sistemi için yazı ölçeği moduna geçin: bir temel boyut ve modüler bir oran girin (1,125'ten 1,5'e kadar) ve altı boyut elde edin - küçük, temel, h4, h3, h2 ve h1 - her biri daha yumuşak bir mobil ilerleme ile tam masaüstü oranı arasında kendi kelepçe() çizgisi olarak hesaplanır ve CSS özel özelliklerinin bir bloğu olarak kopyalanmaya hazırdır.