CSS clamp() კალკულატორი
მიუთითეთ ზომა მცირე და დიდი ეკრანებისთვის და მიიღეთ დინამიკური clamp() მნიშვნელობა, რომელიც თანაბრად იცვლება მათ შორის — შრიფტებისთვის, padding-ებისთვის, margin-ებისთვის ან gap-ებისთვის.
clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem)შედეგი ინარჩუნებს rem კომპონენტს შუა წევრში, ამიტომ ტექსტი მაინც დიდდება, როდესაც მომხმარებელი მასშტაბს 200%-მდე ზრდის — მხოლოდ viewport-ზე დაფუძნებული მნიშვნელობა ამას ვერ უზრუნველყოფდა.
დინამიკური ტექსტი, იდეალურად მორგებული ზომით.
გამოთვლა მთლიანად სრულდება თქვენს ბრაუზერში. თქვენ მიერ შეყვანილი მონაცემები BroBroGo-ზე არ იტვირთება.
ხშირად დასმული კითხვები
როგორ აგებს კალკულატორი clamp() მნიშვნელობას?
თქვენ მიუთითებთ ორ წერტილს: ზომას მცირე ეკრანის სიგანეზე და ზომას დიდი ეკრანის სიგანეზე. კალკულატორი მათ შორის აგებს სწორ ხაზს, რათა ზომა თანაბრად გაიზარდოს ეკრანის გაფართოებასთან ერთად, შემდეგ კი სვამს მას clamp() ფუნქციაში, რათა ზომა არასოდეს ჩამოცდეს მინიმუმს და არ გადააჭარბოს მაქსიმუმს. ამ ორ სიგანეს შორის ზომა იცვლება დინამიკურად, ხოლო მათ გარეთ ინარჩუნებს ზღვრულ მნიშვნელობებს.
რატომ არის შედეგი rem და vw ერთეულებში პიქსელების ნაცვლად?
საზღვრები მოცემულია rem ერთეულებში, ხოლო ცვლადი შუა ნაწილი ინარჩუნებს rem კომპონენტს, რათა ტექსტი გაიზარდოს, როდესაც მომხმარებელი ადიდებს მასშტაბს ან ცვლის ბრაუზერის ნაგულისხმებ შრიფტის ზომას — მხოლოდ პიქსელებზე ან viewport-ზე დაფუძნებულმა მნიშვნელობამ შესაძლოა ხელი შეუშალოს ამ ფუნქციას. თქვენ ზომებს პიქსელებში წერთ, რადგან ასე უფრო მარტივია აღქმა, ხოლო ხელსაწყო მათ rem-ში გადაიყვანს თქვენი ძირეული (root) შრიფტის ზომის მიხედვით.
შემიძლია გამოვიყენო ეს დაშორებებისთვის და არა მხოლოდ შრიფტის ზომისთვის?
დიახ. იგივე მნიშვნელობა მუშაობს padding, margin, gap, width ან height თვისებებისთვის — ყველგან, სადაც სიგრძე მიეთითება. გადართეთ წინასწარი პროსმონტაჟი „ყუთის“ (Box) რეჟიმზე, რათა დააკვირდეთ დაშორებების ზრდას ტექსტის ნაცვლად. თუ თქვენი მცირე და დიდი ზომები ერთმანეთს ემთხვევა, შედეგი გარდაიქმნება ჩვეულებრივ ფიქსირებულ სიგრძედ, რადგან მასშტაბირებადი არაფერია.
ყველა ბრაუზერს აქვს clamp() მხარდაჭერა?
დიახ — 2020 წლიდან ყველა თანამედროვე ბრაუზერს აქვს clamp() მხარდაჭერა, ასე რომ შეგიძლიათ გამოიყენოთ ეს მნიშვნელობა დამატებითი ალტერნატივების (fallback) გარეშე. ძალიან დიდი მაქსიმუმის ან სწრაფი ცვლილების კოეფიციენტის შემთხვევაში, სასურველია სწრაფად შეამოწმოთ 200%-იანი მასშტაბირება, რათა დარწმუნდეთ, რომ ტექსტი კვლავ იზრდება მათთვის, ვისაც ეს სჭირდება.