CSS clamp üretici
Küçük ve büyük ekranlar için ekran genişlikleri ve boyutları girerek metin boyutunu veya aralığı düzgün değiştiren CSS üretin. px veya rem çıktısını önizleyin, ardından CSS ve Tailwind kodunu kopyalayın veya metin olarak kaydedin.
Neler yapabilirsiniz
2 genişlik ve boyut çifti belirtin
Küçük ve büyük görünüm için boyut belirtin. Yazı tipi, boşluk, dolgu, kenar boşluğu, genişlik ve yükseklik olmak üzere 6 türü destekler.
px veya rem olarak kod üretin
Tüm değerleri px girin, çıktı için px veya rem seçin. CSS bildirimi ve Tailwind rastgele özellik kodu alın.
Üretilen CSS'yi hemen denetleyin
CSS'yi önizlemedeki iki öğeye uygular. Geçerli çerçeve genişliğinde metin ve boşlukların nasıl göründüğünü kontrol edin.
Nasıl kullanılır
Değiştirilecek özelliği seçin
Metin için font-size, öğeler arası için gap gibi belirtmek istediğiniz CSS özelliğini seçin.
İki genişlik ve boyut girin
İki görünüm genişliğini ve boyutunu px girin. Küçük boyut büyükten büyük olmamalıdır.
Çıktı birimini kontrol edip üretin
Gelişmiş ayarlardan px veya rem seçin. rem için önce tabanı kontrol edin.
Önizleyip kodu alın
CSS'yi kopyalayıp kullanacağınız yere yapıştırın. Tailwind kodunu açıp alın. 2 öğeyi birlikte kopyalayın veya kaydedin.
Ne zaman yararlıdır
Başlık boyutlarını yumuşak değiştirin
Dar ve geniş için metin boyutlarını belirleyip aralarda sürekli değiştirmek istediğinizde.
Boşluğu görünüme uydurun
Kart boşluk veya dolguların belirlediğiniz aralıkta değişmesini istediğinizde.
Akışkan boyutlar ve önizleme
clamp'teki 3 değer
clamp minimum, akışkan ve maksimum belirten CSS işlevidir. Formül iki referansı doğrusal bağlar, dışı uçlarla sınırlar.
Girdi px; çıktı px veya rem
Genişlik ve boyut px girilir. rem'de boyut tabana bölünür, vw katsayısı aynı kalır.
rem tabanını kullanım yerine uydurun
Varsayılan 1rem 16px sayar. Kök boyutu farklıysa uçlar ve değişim farklı olur. Kullanım yerinde kontrol edin.
Çerçeve genişliği tanımlar
Önizleme bağımsız çerçevedir. vw'yi çerçeve içinden hesaplar. Aynı CSS metne, boşluğa veya boyuta uygulanır.
Kullanım yerini de kontrol edin
Metin ve yapı sabittir. Kullanım yerindeki yazı tipleri ve büyütmeyi kontrol edin. Tailwind rastgele özelliktir; algılandığını doğrulayın.
Sık sorulan sorular
Belirtilen görünüm genişliği aralığının dışında ne olur?
Belirtilen küçük genişlikten dar ekranlarda minimum, büyükten genişlerde maksimum boyut kullanılır. rem için kod üretilirken kullanılan taban yazı tipiyle aynı olmalıdır.
rem için taban yazı tipi boyutu nedir?
1rem'in kaç px ile hesaplanacağını belirtir. Varsayılan 16px'dir, gelişmiş ayarlardan 1–1000px yapılabilir. Kodu kullanacağınız kök öğenin yazı tipine uydurun.
Eşit boyutlar veya negatif değerler belirtebilir miyim?
Sabit boyut için minimum ve maksimumu aynı yapın. Negatif değerler yalnızca margin içindir. Görünüm genişledikçe küçülen boyutlar desteklenmez.
Özellik veya değer değişiklikleri hemen uygulanır mı?
Bunları değiştirmek üretilen kodu ve önizlemeyi temizler. Güncellemek için CSS Üret'e basın. Çıktı birimi veya taban boyutu için de geçerlidir.
Önizleme metnini değiştirebilir miyim?
Örnek metin ve Aa 123 sabittir. Metin düzenleme yoktur. Üretilen CSS'yi kullanan sayfada gerçek metni ve genişliği de kontrol edin.
Girdi ve sonuçlar
- Görünüm genişliği
- 1–100000px. Küçük görünüm genişliği büyükten küçük olmalıdır. Ondalık da kabul edilir.
- Boyut
- 0–10000px. Yalnızca margin −10000px'ye inebilir. Küçük görünüm boyutu büyükten büyük olmamalıdır.
- Çıktı
- Bir CSS bildirimi ve Tailwind rastgele özelliği. 2 öğenin tamamını css-clamp-generator.txt olarak kaydedin.
- Hassasiyet
- Üretilen formül 13 anlamlı basamağa kadar katsayı kullanır. Yuvarlanmış formülün referansları üretemeyeceği kadar yakın genişliklerde hata oluşur.