Bepul CSS clamp() Generatori
Moslashuvchan tipografiya va bo'shliq uchun suyuq CSS clamp() qiymatini yarating. Minimal/maksimal o'lcham va ko'rish maydoni diapazonini belgilang, jonli oldindan ko'ring va bir qatorli CSS ni nusxalang.
Turli ko'rish maydonlarida hosil bo'lgan o'lcham
clamp(min, preferred, max) qiymatni ko'rish maydoniga qarab uyg'un tarzda o'zgartiradi, so'ng minimal va maksimal chegarada qotib qoladi. U shrift o'lchami, bo'shliq va kengliklar uchun bir qator media so'rovlar o'rniga bitta qatorni qo'llaydi.
Qanday ishlaydi
Bu asbob qo'lda yozilgan chiziqli interpolyatsiya formulasi yordamida CSS clamp() qiymatlarini hisoblaydi — kutubxonasiz, serverga borib-kelishlarsiz. Siz ikkita o'lcham va ikkita ko'rish oynasi kengligini kiritasiz; matematika brauzeringizda darhol ishlaydi va shu chegara nuqtalari orasida turingiz yoki bo'shlig'ingizni silliq masshtablaydigan vw-asosidagi afzal qiymat bilan joylashtirishga tayyor clamp() ifodasini ishlab chiqaradi.
- 1Chiziqli nishablik hisobiAsbob piksel-bo-piksel nishablikni hisoblaydi: (maksO'lcham - minO'lcham) / (maksKoOynasi - minKoOynasi). Bu nishablik so'ng 100 ga ko'paytirib vw birliklariga o'giriladi, bu CSS ko'rish-oynasiga-nisbiy masshtablashning asosi.
- 2Kesishma chiqarishKesishma siljishi (px yoki rem da) shunday hisoblanadiki, chiziqli funksiya minimal ko'rish oynasida aniq minimal o'lchamingizga tushadi. Birgalikda, nishablik va kesishma clamp() ichidagi afzal qiymatni — haqiqatan masshtablanadigan qismni — hosil qiladi.
- 3Birlik o'girish va chiqish formatlashAgar rem chiqishini tanlasangiz, har bir piksel qiymati clamp() satriga yozilishdan oldin sozlangan ildiz shrift o'lchamiga (standart 16px) bo'linadi. Tailwind sintaksis qoidalariga muvofiq bo'shliqlar pastki chiziq bilan almashtirilgan mos Tailwind ixtiyoriy-qiymat sinfi ham ishlab chiqariladi.
- 4Jonli ko'rish oynasi sursharshti ko'rib chiqishDiapazon sursharshti 320px dan 1920px kenglikkacha siljitishga imkon beradi. Har bir holatda bir xil nishablik-va-kesishma formulasi qulflangan o'lchamni real vaqtda baholaydi va shu hisoblangan piksel o'lchamida namuna matnini chizadi, shuning uchun biror narsani nusxalashdan oldin masshtablash xatti-harakatini ko'rasiz.
Tegishli asboblar
CSS Grid generatori
CSS gridni vizual tarzda loyihalang — tracklar, birliklar va oraliqlar — va yaratilgan CSS hamda HTML ni nusxalang.
Imzo yaratuvchi
Sichqoncha, barmoq yoki stilus bilan imzo chizing yoki ismingizni qo'lyozma shriftida yozing, so'ng shaffof PNG yoki SVG sifatida eksport qiling.
Pikseldan REM ga Konvertor
px, rem, em, pt, vw, vh va % o'rtasida sozlanadigan bazaviy shrift o'lchami bilan konvertatsiya qiling. Keng tarqalgan piksel o'lchamlari uchun ma'lumot jadvalini o'z ichiga oladi.