বিনামূল্যে CSS clamp() জেনারেটর

কিভাবে কাজ করে

এই টুল হাতে লেখা রৈখিক ইন্টারপোলেশন সূত্র দিয়ে CSS clamp() মান হিসাব করে — কোনো লাইব্রেরি বা সার্ভার আসা-যাওয়া নেই। আপনি দুটি আকার ও দুটি viewport প্রস্থ দেন; গণিত সঙ্গে সঙ্গে আপনার ব্রাউজারে চলে এবং vw-ভিত্তিক পছন্দের মানসহ পেস্ট-উপযোগী clamp() এক্সপ্রেশন দেয়, যা ওই ব্রেকপয়েন্টগুলোর মধ্যে আপনার টাইপ বা স্পেসিং মসৃণভাবে বাড়ায়-কমায়।

1. 1
   রৈখিক ঢালের হিসাব

   টুলটি পিক্সেল-প্রতি-পিক্সেল ঢাল হিসাব করে: (maxSize - minSize) / (maxViewport - minViewport)। তারপর এই ঢাল 100 দিয়ে গুণ করে vw এককে রূপান্তর হয়, যা CSS viewport-আপেক্ষিক স্কেলিংয়ের মূল ভিত্তি।
2. 2
   intercept নির্ণয়

   একটি intercept অফসেট (px বা rem-এ) হিসাব করা হয় যাতে রৈখিক ফাংশনটি সর্বনিম্ন viewport-এ ঠিক আপনার সর্বনিম্ন আকারে পৌঁছায়। ঢাল ও intercept মিলে clamp()-এর ভেতরের পছন্দের মান তৈরি করে — যে অংশটি আসলে স্কেল হয়।
3. 3
   একক রূপান্তর ও আউটপুট ফরম্যাটিং

   rem আউটপুট বাছলে clamp() স্ট্রিংয়ে লেখার আগে প্রতিটি পিক্সেল মানকে আপনার নির্ধারিত root font size (ডিফল্ট 16px) দিয়ে ভাগ করা হয়। সাথে একটি মিলে যাওয়া Tailwind arbitrary-value ক্লাসও তৈরি হয়, Tailwind-এর সিনট্যাক্স অনুযায়ী স্পেসের বদলে আন্ডারস্কোর দিয়ে।
4. 4
   লাইভ viewport স্লাইডার প্রিভিউ

   একটি range স্লাইডারে 320px থেকে 1920px প্রস্থ পর্যন্ত টেনে দেখতে পারেন। প্রতিটি অবস্থানে একই ঢাল-ও-intercept সূত্র রিয়েল টাইমে clamp করা আকার হিসাব করে এবং সেই পিক্সেল আকারে নমুনা টেক্সট দেখায়, তাই কপি করার আগেই স্কেলিং আচরণ দেখতে পান।

সম্পর্কিত টুলস