CSS clamp() ক্যালকুলেটর
ছোট এবং বড় স্ক্রিনের জন্য একটি আকার লিখুন এবং একটি ফ্লুইড clamp() মান পান যা মাঝের অংশে মসৃণভাবে স্কেল করে — ফন্ট সাইজ, প্যাডিং, মার্জিন বা গ্যাপের জন্য।
clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem)ফলাফলটির মাঝের অংশে একটি rem অংশ থাকে, যাতে কেউ ২০০% জুম করলেও টেক্সট বড় হয় — শুধুমাত্র ভিউপোর্ট-ভিত্তিক মান হলে তা হতো না।
ফ্লুইড টেক্সট, একদম সঠিক মাপে।
হিসাবটি সম্পূর্ণ আপনার ব্রাউজারে সম্পন্ন হয়। আপনার কোনো ইনপুট BroBroGo-তে আপলোড করা হয় না।
জিজ্ঞাসিত প্রশ্নাবলী
ক্যালকুলেটরটি কীভাবে clamp() মান তৈরি করে?
আপনি এটিকে দুটি পয়েন্ট দেবেন: একটি ছোট স্ক্রিনের প্রস্থের আকার এবং একটি বড় স্ক্রিনের প্রস্থের আকার। এটি তাদের মধ্যে একটি সরলরেখা তৈরি করে যাতে স্ক্রিন বড় হওয়ার সাথে সাথে আকারটি মসৃণভাবে বৃদ্ধি পায়, তারপর এটিকে clamp() দিয়ে মুড়ে দেয় যাতে এটি কখনো আপনার ছোট স্ক্রিনের আকারের নিচে না নামে বা বড় স্ক্রিনের আকারের উপরে না যায়। দুটি প্রস্থের মাঝে আকারটি তরলভাবে (fluidly) স্কেল করে; এর বাইরে এটি নিকটতম সীমায় স্থির থাকে।
ফলাফলটি পিক্সেলের পরিবর্তে rem এবং vw-তে কেন থাকে?
সীমাগুলো rem-এ থাকে এবং পরিবর্তনশীল মাঝের অংশটিতে একটি rem উপাদান থাকে, যাতে পাঠক জুম করলে বা ব্রাউজারের ডিফল্ট ফন্ট সাইজ বাড়ালে টেক্সট বড় হতে পারে — পিক্সেল বা শুধুমাত্র ভিউপোর্ট-ভিত্তিক মান হলে তা কাজ নাও করতে পারে। আপনি পিক্সেলে আকার লিখবেন কারণ বেশিরভাগ মানুষ এভাবেই চিন্তা করে, এবং টুলটি আপনার রুট ফন্ট সাইজ ব্যবহার করে সেটিকে rem-এ রূপান্তর করবে।
আমি কি এটি ফন্ট সাইজ ছাড়াও স্পেসিংয়ের জন্য ব্যবহার করতে পারব?
হ্যাঁ। একই মান padding, margin, gap, width বা height — যেকোনো দৈর্ঘ্যের ক্ষেত্রে কাজ করে। টেক্সটের পরিবর্তে স্পেসিং কীভাবে বাড়ছে তা দেখতে প্রিভিউটি Box-এ পরিবর্তন করুন। যদি আপনার ছোট এবং বড় আকার একই হয়, তবে ফলাফলটি একটি সাধারণ নির্দিষ্ট দৈর্ঘ্যে নেমে আসবে, কারণ তখন স্কেল করার কিছু থাকে না।
সব ব্রাউজার কি clamp() সমর্থন করে?
হ্যাঁ — ২০২০ সাল থেকে সব আধুনিক ব্রাউজার clamp() সমর্থন করে, তাই আপনি কোনো ফলব্যাক ছাড়াই সরাসরি এই মান ব্যবহার করতে পারেন। খুব বড় সর্বোচ্চ আকার বা দ্রুত পরিবর্তনের হারের ক্ষেত্রে, ২০০% জুমে টেক্সটটি বড় হচ্ছে কিনা তা একবার পরীক্ষা করে নেওয়া ভালো।