ক্ল্যাম্পিং কার্ড

এই ডেমোতে, আপনি clamp() ব্যবহার করে প্রস্থ নির্ধারণ করছেন এভাবে: width: clamp(<min>, <actual>, <max>) ।

এটি একটি পরম ন্যূনতম এবং সর্বোচ্চ আকার এবং একটি প্রকৃত আকার সেট করে। মানগুলির সাথে, এটি দেখতে এরকম হতে পারে:

.parent {
  width: clamp(23ch, 60%, 46ch);
}

এখানে সর্বনিম্ন আকার হল 23ch বা 23 অক্ষর একক, এবং সর্বাধিক আকার হল 46ch , 46 অক্ষর৷ অক্ষর প্রস্থের ইউনিটগুলি উপাদানের ফন্টের আকারের উপর ভিত্তি করে (বিশেষত 0 গ্লিফের প্রস্থ)। 'প্রকৃত' আকার হল 50%, যা এই উপাদানটির মূল প্রস্থের 50% প্রতিনিধিত্ব করে।

clamp() ফাংশনটি এখানে যা করছে তা এই উপাদানটিকে 50% প্রস্থ ধরে রাখতে সক্ষম করে যতক্ষণ না 50% হয় 46ch (বিস্তৃত ভিউপোর্টে) বা 23ch (ছোট ভিউপোর্টে) এর চেয়ে ছোট হয়। ভিডিওতে, দেখুন কিভাবে এই কার্ডের প্রস্থ তার ক্ল্যাম্পড সর্বোচ্চ পয়েন্টে বৃদ্ধি পায় এবং প্যারেন্ট প্রসারিত এবং সঙ্কুচিত হওয়ার সাথে সাথে এটির ক্ল্যাম্পড সর্বনিম্ন পর্যন্ত হ্রাস পায়। তারপর এটিকে কেন্দ্রীভূত করতে অতিরিক্ত বৈশিষ্ট্যগুলি ব্যবহার করে অভিভাবকের মধ্যে কেন্দ্রীভূত থাকে। এটি আরও সুস্পষ্ট লেআউট সক্ষম করে, কারণ পাঠ্যটি খুব বেশি চওড়া ( 46ch উপরে) বা খুব বেশি চওড়া এবং সরু ( 23ch এর কম) হবে না।

আপনি প্রতিক্রিয়াশীল টাইপোগ্রাফি বাস্তবায়ন করতে এই কৌশলটি ব্যবহার করতে পারেন। উদাহরণস্বরূপ: font-size: clamp(1.5rem, 20vw, 3rem) । এই ক্ষেত্রে, একটি শিরোনামের ফন্ট-সাইজ সর্বদা 1.5rem এবং 3rem এর মধ্যে আটকে থাকবে কিন্তু ভিউপোর্টের প্রস্থের সাথে মানানসই 20vw প্রকৃত মানের উপর ভিত্তি করে বৃদ্ধি এবং সঙ্কুচিত হবে।

এটি একটি সর্বনিম্ন এবং সর্বাধিক আকারের মান সহ স্পষ্টতা নিশ্চিত করার জন্য একটি দুর্দান্ত কৌশল, তবে মনে রাখবেন এটি সমস্ত আধুনিক ব্রাউজারে সমর্থিত নয় তাই নিশ্চিত করুন যে আপনার ফলব্যাক আছে এবং আপনার পরীক্ষা করুন৷

এইচটিএমএল

<div class="parent">
  <div class="card">
    <h1>Title Here</h1>
    <div class="visual"></div>
    <p>Descriptive Text. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sed est error repellat veritatis.</p>
  </div>
</div>

সিএসএস

        .parent {
  display: grid;
  place-items: center;
}

.card {
  width: clamp(23ch, 60%, 46ch);
  display: flex;
  flex-direction: column;
  padding: 1rem;
}

.visual {
    height: 125px;
    width: 100%;
  }