İçeriğe atla
%100 yerel

CSS clamp() oluşturucu

İki görüş alanı genişliği arasında sorunsuz bir şekilde ölçeklenen akışkan bir CSS clamp() değeri oluşturun.

Çıkış

CSS clamp() oluşturucu

Akışkan tipografi ve boşluk, görüş alanı yeniden boyutlandırıldığında bir değeri sorunsuz bir şekilde ölçeklendirir ve bunun yerine sabit boyutlar arasında birkaç medya sorgusu kırılma noktasında atlamaktan kaçınır. Bu araç bu değeri sizin için oluşturur: minimum ve maksimum bir boyut ve bunlara uygulanacak görüş alanı genişlikleri girin, ve aralarında doğrusal bir enterpolasyonla bir CSS clamp() işlevi alırsınız, bunu doğrudan stil sayfanıza yapıştırmaya hazır.

Minimum boyut ve maksimum boyut ölçeğin iki uç noktasını tanımlar; minimum ve maksimum görüş alanı genişliği, her uç noktanın nerede devreye girdiğini belirler — minimum genişliğin altında değer alt sınırda kalır, üstünde üst sınırda kalır ve arasında görüş alanıyla doğrusal olarak büyür. Birim seçeneği çıktıyı px ve rem arasında değiştirir, kök yazı tipi boyutu px-den rem-e dönüştürmeyi kontrol eder ve ondalık basamaklar oluşturulan sayıların ne kadar hassas olduğunu kontrol eder. Çıktı biçimi aynı clamp()-i düz bir bildirim, CSS özel özelliği veya Tailwind rastgele değer sınıfı olarak sarar, böylece bunu doğrudan çalıştığınız herhangi bir kod tabanına yerleştirebilirsiniz.

Erişilebilirlik kontrolünü açmak, kurulum sorun yaratabileceğinde bir not ekler: px tabanlı boyutlandırma okuyucunun tarayıcı yazı tipi boyutu ayarını yok sayar ve çok küçük bir minimum ölçeklemeye başlamadan önce bile okunması zor kalır. Her ikisi de el yazısı akışkan tip formüllerinde yaygın hatalarıdır ve araç bunları sessizce sevk etmek yerine onları işaretler.

Tüm hesaplamalar seçenekleri ayarlarken tarayıcınızda gerçekleşir — girdiğiniz hiçbir şey başka yere gitmez. Sonuç doğru görünüyorsa kopyalayın, .txt dosyası olarak indirin veya çalışmaya devam etmek için başka bir aracın girdisine gönderin.

FAQ

clamp() aslında ne yapar?
clamp(min, preferred, max) tercih edilen değeri seçer, ancak hiçbir zaman min altına veya max üstüne gitmesine izin vermez — burada tercih edilen değer görüş alanı genişliğiyle doğrusal olarak büyür, bu nedenle sonuç iki boyut uç noktası arasında sorunsuz bir şekilde ölçeklenir.
Neden px yerine rem'i seçelim?
Rem tabanlı bir boyut kök yazı tipi boyutuyla ölçeklendirir, bu nedenle tarayıcısının varsayılan metin boyutunu değiştiren bir okuyucuya saygı duyar. Px tabanlı bir boyut bu tercihe bakılmaksızın sabit kalır, bu yüzden erişilebilirlik kontrolü bunu işaretler.
Kök yazı tipi boyutu ne için?
Bu, stíluslandırdığınız sayfada 1rem'in temsil ettiği px değeridir — her tarayıcıda varsayılan olarak 16, siz veya bir sıfırlama stil sayfası bunu değiştirmediğince. Araç bunu px boyutlarınızı doğru rem değerlerine dönüştürmek için kullanır.
Tailwind çıktısını doğrudan bir sınıf özniteliğinde kullanabilir miyim?
Evet. Bu text-[clamp(1rem,0.8rem+1vw,2rem)] gibi boşluk olmayan tam bir rastgele değer sınıfıdır; bu da Tailwind'in beklediği tam söz dizimi.
Girişim herhangi bir yere yüklendi mi?
Hayır. Tüm hesaplamalar tarayıcınızda gerçekleşir — girdiğiniz sayılar asla cihazınızdan ayrılmaz.