CSS clamp() გენერატორი უფასოდ
გენერირება გაუკეთეთ მოქნილ CSS clamp() მნიშვნელობას responsive ტიპოგრაფიისა და დაშორებისთვის. დააყენეთ მინ/მაქს ზომა და viewport დიაპაზონი, ნახეთ პირდაპირი გადახედვა და დააკოპირეთ ერთი სტრიქონის CSS.
გარენდერებული ზომა სხვადასხვა viewport-ზე
clamp(min, preferred, max) viewport-ის მიხედვით მნიშვნელობას გლუვად ცვლის, შემდეგ კი მინ და მაქს-ზე ჩამაგრდება. ანაცვლებს მედია-მოთხოვნათა სტეკებს ტიპოგრაფიის, შეჯამვისა და სიგანეებისთვის.
გავრცელებული გამოყენება
- Seiqmne sut reagirebadi tipografiaშეცვალეთ შრიფტის ზომები შეუფერხებლად მობილურსა და დესკტოპს შორის ერთი ხაზით.
- suti veda da Seretsvaგახადეთ სექციების დაშორება ეკრანთან ერთად მზარდი და არა ბრეიქფოინთებზე ნახტომისებრი.
- Secvale media-moTxovnebi clamp()-iTბრეიქფოინთის გადაფარვების გროვა ჩაანაცვლეთ ერთი დინამიკური მნიშვნელობით.
- agebis suti tipi ganzomilebaშექმენით თანმიმდევრული clamp() საფეხურები დიზაინ-სისტემის ტიპოგრაფიული სკალისთვის.
- suti gmiri da gamocena Seglavebiგახადეთ ლენდინგ გვერდის დიდი სათაურები შესამჩნევად, მაგრამ უსაფრთხოდ მასშტაბირებადი.
როგორ მუშაობს
ეს ხელსაწყო ითვლის CSS clamp() მნიშვნელობებს ხელით დაწერილი წრფივი ინტერპოლაციის ფორმულით — ბიბლიოთეკების, სერვერთან ურთიერთქმედების გარეშე. თქვენ შეყავთ ორი ზომა და ორი ხედის-სიგანე; მათემატიკა მყისვე მუშაობს თქვენს ბრაუზერში და ქმნის მზა-ჩასასმელ clamp() გამოსახულებას, vw-ზე-დაფუძნებული სასურველი მნიშვნელობით, რომელიც თქვენს ტიპსა თუ დაშორებას გლუვად ამასშტაბებს ამ საზღვრებს შორის.
- 1წრფივი დახრილობის გამოთვლახელსაწყო ითვლის პიქსელ-პიქსელზე დახრილობას: (maxSize - minSize) / (maxViewport - minViewport). ეს დახრილობა შემდეგ vw ერთეულებზე გარდაიქმნება, 100-ზე გამრავლებით, რაც CSS ხედის-შედარებითი მასშტაბირების ძირითადი მექანიზმია.
- 2გადაკვეთის წერტილის გამოყვანაგადაკვეთის წანაცვლება (px ან rem-ში) გამოითვლება, ისე რომ წრფივი ფუნქცია ზუსტად თქვენს მინიმალურ ზომას მიაღწევს მინიმალურ ხედის-სიგანეზე. ერთად, დახრილობა და გადაკვეთა ქმნის clamp()-ის სასურველ მნიშვნელობას — ნაწილს, რომელიც რეალურად მასშტაბირდება.
- 3ერთეულის გარდაქმნა და გამომავალის ფორმატირებათუ rem გამომავალს აირჩევთ, ყოველი პიქსელის მნიშვნელობა იყოფა თქვენს კონფიგურირებულ ძირეულ შრიფტის ზომაზე (ნაგულისხმევად 16px) clamp() სტრიქონში ჩაწერამდე. შესაბამისი Tailwind თვითნებური-მნიშვნელობის კლასიც წარმოიქმნება, ცარიელი ადგილების ხაზგასმებით ჩანაცვლებით, Tailwind-ის სინტაქსის მიხედვით.
- 4ცოცხალი ხედის-სლაიდერის გადახედვადიაპაზონის სლაიდერი გაძლევთ 320px-დან 1920px-მდე სიგანის გადაადგილების საშუალებას. თითოეულ პოზიციაზე იგივე დახრილობა-და-გადაკვეთის ფორმულა რეალურ დროში ითვლის შეზღუდულ ზომას და ხატავს სანიმუშო ტექსტს ამ გამოთვლილ პიქსელის ზომაზე, ასე რომ მასშტაბირების ქცევის ნახვა შეგიძლიათ, ნებისმიერის კოპირებამდე.
დაკავშირებული ინსტრუმენტები
CSS Grid შემქმნელი
ვიზუალურად დაამუშავეთ CSS grid — ტრეკები, ერთეულები და უფსები — და დააკოპიეთ გენერირებული CSS და HTML.
რა არის ჩემი ეკრანის გაფართოება
ნახეთ თქვენი ეკრანის გაფართოება CSS-ში და რეალურ პიქსელებში, ფანჯრის ზომა, პიქსელის თანაფარდობა, ფერის სიღრმე, HDR, სენსორული მხარდაჭერა და განახლების სიხშირე, და დააკოპირეთ ყველაფერი.
ხელმოწერის შემქმნელი
დახატეთ ხელმოწერა თაგუნათი, თითით ან სტილუსით, ან აკრიფეთ თქვენი სახელი ხელნაწერი შრიფტით, შემდეგ გამოტანეთ გამჭვირვალე PNG-ად ან SVG-ად.