Pulsuz CSS clamp() Generatoru
Responsive tipografiya və interval üçün axıcı CSS clamp() dəyəri yaradın. Min/maks ölçü və viewport aralığı təyin edin, canlı önizləmə görün və bir sətirlik CSS-i kopyalayın.
Müxtəlif viewport-larda render ölçüsü
clamp(min, preferred, max) dəyəri viewport ilə axıcı şəkildə miqyaslandırır, sonra min və maks-da kilidlənir. Tipografiya, boşluq və enlər üçün media query yığınlarını tək sətrlə əvəz edir.
Ümumi istifadələr
- Maye Responsive Tipografiyasını YaradınMobil və masaüstü arasında şrift ölçülərini bir sətir ilə hamarlıqla miqyasa qoyun.
- Maye Boşluqları və DoldurmaBölmə boşluğunun viewport ilə böyüməsini əvəzinə qırılma nöqtələrindən sıçramasını edin.
- Medya Sorğularını clamp() ilə Əvəz EdinQırılma nöqtəsi overridunun yığınını tək bir maye dəyərinə çökmə.
- Maye Tipi Miqyası QurunDizayn sistemi tipi miqyası üçün ardıcıl clamp() addımları yaradın.
- Maye Qəhrəman və Ekran BaşlıqlarıBöyük eniş səhifəsi başlıqlarını dramatik lakin təhlükəsiz şəkildə miqyaslandırın.
Necə İşləyir
Bu alət əl ilə yazılmış bir xətti interpolyasiya düsturundan istifadə edərək CSS clamp() dəyərlərini hesablayır — kitabxana yoxdur, server gediş-gəlişi yoxdur. İki ölçü və iki görünüş sahəsi eni daxil edirsiniz; riyaziyyat brauzerinizdə ani olaraq işləyir və şriftinizi və ya boşluğunuzu həmin kəsmə nöqtələri arasında hamar miqyaslayan vw-əsaslı üstünlük verilən dəyəri olan yapışdırmaya-hazır bir clamp() ifadəsi yaradır.
- 1Xətti maillik hesablamasıAlət piksel-hər-piksel bir maillik hesablayır: (maxSize - minSize) / (maxViewport - minViewport). Bu maillik sonra 100-ə vurularaq vw vahidinə çevrilir, bu isə CSS görünüş-sahəsi-nisbi miqyaslamasının əsasını təşkil edir.
- 2Kəsişmə çıxarılmasıBir kəsişmə ofseti (px və ya rem ilə) hesablanır ki, xətti funksiya minimum görünüş sahəsində tam olaraq minimum ölçünüzü versin. Birlikdə, maillik və kəsişmə clamp() daxilindəki üstünlük verilən dəyəri — həqiqətən miqyaslanan hissəni — təşkil edir.
- 3Vahid çevirmə və çıxış formatlamasırem çıxışını seçsəniz, clamp() sətrinə yazılmadan əvvəl hər piksel dəyəri konfiqurasiya etdiyiniz kök şrift ölçüsünə (defolt 16px) bölünür. Tailwind sintaksisinə uyğun boşluqların alt xəttlərlə əvəz olunduğu uyğun bir Tailwind özbaşına-dəyər sinfi də yaradılır.
- 4Canlı görünüş-sahəsi sürüşdürücü önizləməsiBir aralıq sürüşdürücüsü 320px-dən 1920px enliyə qədər gəzdirməyə imkan verir. Hər mövqedə eyni maillik-və-kəsişmə düsturu qıstırılmış ölçünü real vaxtda qiymətləndirir və o hesablanmış piksel ölçüsündə nümunə mətn render edir, ona görə heç nəyi kopyalamadan əvvəl miqyaslama davranışını görə bilərsiniz.
Əlaqəli Alətlər
CSS Grid Generatoru
CSS grid-i vizual olaraq dizayn edin — trekler, vahidlər və boşluqlar — və yaradılmış CSS və HTML-i kopyalayın.
Ekranımın Görüntü İmkanı Nədir
Ekran qətnamənizi CSS və həqiqi piksellərlə, pəncərə ölçüsünü, piksel nisbətini, rəng dərinliyini, HDR, toxunma dəstəyini və yenilənmə sürətini görün və hamısını kopyalayın.
İmza Yaradıcısı
Siçan, barmaq və ya qələmlə imza çəkin, ya da adınızı əl yazısı şrifti ilə yazın, sonra şəffaf PNG və ya SVG kimi ixrac edin.